.webp)
Cloudflare
Connectivity cloud platform
No items found.
Visual identity
Cloudflare — design reference
Source: https://www.cloudflare.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Typography
font-family: var(--font-mono)— selector.[&_.rich-text-code-block]:font-mono .rich-text-code-blockfont-family: var(--font-sans)— selectorh1,.heading-visual-h1font-family: var(--ot-font-sans)!important— selector#onetrust-banner-sdk #onetrust-accept-btn-handler,#onetrust-banner-sdk #onetrust-reject-all-handler,#onetrust-banner-sdk #onetrust-pc-btn-handler,#onetrust-banner-sdk .ot-sdk-buttonfont-size: var(--text-base)!important— selector.!text-basefont-size: var(--text-2xl)— selector.text-2xlfont-size: var(--text-3xl)— selector.text-3xlfont-size: var(--text-4xl)— selector.text-4xlfont-size: var(--text-5xl)— selector.text-5xlfont-size: 11px— selector.text-[11px]/nonefont-weight: var(--font-weight-medium)— selector.file:font-medium::file-selector-buttonfont-weight: var(--font-weight-bold)— selector.[&_.rich-text-bold]:font-bold .rich-text-boldfont-weight: var(--font-weight-semibold)— selector.[&_.rich-text-h2]:font-semibold .rich-text-h2font-weight: var(--font-weight-normal)— selector.[&_pre]:font-normal prefont-weight: 600— selector.rdp-today:not(.rdp-outside):not(.rdp-selected) .rdp-day_buttonfont-weight: var(--type-h1-weight)— selectorh1,.heading-visual-h1font-weight: var(--type-h2-weight)— selectorh2line-height: var(--tw-leading,var(--text-base--line-height))!important— selector.!text-baseline-height: var(--tw-leading,var(--text-2xl--line-height))— selector.text-2xlline-height: var(--tw-leading,var(--text-3xl--line-height))— selector.text-3xlline-height: var(--tw-leading,var(--text-4xl--line-height))— selector.text-4xlline-height: var(--tw-leading,var(--text-5xl--line-height))— selector.text-5xlline-height: 1— selector.text-[11px]/noneline-height: var(--tw-leading,var(--text-base--line-height))— selector.text-baseletter-spacing: var(--type-h1-tracking)— selectorh1,.heading-visual-h1letter-spacing: var(--type-h2-tracking)— selectorh2letter-spacing: var(--type-h3-tracking)— selectorh3,.heading-visual-h3letter-spacing: var(--type-h4-tracking)— selectorh4letter-spacing: var(--type-h5-tracking)— selectorh5,.heading-visual-h5letter-spacing: var(--type-h6-tracking)— selectorh6,.heading-visual-h6letter-spacing: var(--type-p-tracking)— selectorp
Colors and surfaces
color: var(--text-color-kumo-danger)!important— selector.!text-kumo-dangercolor: var(--text-color-kumo-default)!important— selector.!text-kumo-defaultcolor: var(--text-color-kumo-inverse)!important— selector.!text-kumo-inversecolor: var(--text-color-kumo-subtle)!important— selector.!text-kumo-subtlecolor: var(--color-white)!important— selector.!text-whitecolor: var(--registrar-finder-foreground)— selector.text-(--registrar-finder-foreground)color: #0f766e— selector.text-[#0F766E]background-color: #0000— selectorbutton,input,select,optgroup,textareabackground-color: var(--color-accent-100)— selectorhtml.is-home-page:not(.mobile-nav-open) bodybackground-color: var(--color-background-100)— selectorhtml.is-home-page.mobile-nav-open bodybackground-color: var(--kumo-button-emphasis-bg)— selector.bg-(--kumo-button-emphasis-bg)background-color: color-mix(in srgb,light-dark(var(--color-neutral-200,oklch(92.2% 0 0)),var(--color-neutral-800,oklch(26.9% 0 0))) 10%,transparent)— selector.file:bg-kumo-fill/10::file-selector-buttonbackground-color: color-mix(in oklab,var(--color-kumo-fill) 10%,transparent)— selector.file:bg-kumo-fill/10::file-selector-buttonbackground-color: #0000001c— selector.has-[button:active]:[&_.lg-unify-hover-overlay]:bg-black/[0.11]:has(:is(button:active)) .lg-unify-hover-overlaybackground-color: color-mix(in oklab,var(--color-black) 11%,transparent)— selector.has-[button:active]:[&_.lg-unify-hover-overlay]:bg-black/[0.11]:has(:is(button:active)) .lg-unify-hover-overlay
Components and layout
border-radius: 0— selectorbutton,input,select,optgroup,textareaborder-radius: var(--radius-md)— selector.file:rounded-md::file-selector-buttonborder-radius: .25rem— selector.[&_.rich-text-inline-code]:rounded .rich-text-inline-codeborder-radius: var(--radius-lg)— selector.[&_pre]:rounded-lg preborder-radius: var(--rdp-day_button-border-radius)— selector.rdp-day_buttonborder-radius: .375rem— selector.rdp-button_next,.rdp-button_previousborder-radius: var(--ot-radius-btn)!important— selector#onetrust-banner-sdk #onetrust-accept-btn-handler,#onetrust-banner-sdk #onetrust-reject-all-handler,#onetrust-banner-sdk #onetrust-pc-btn-handler,#onetrust-banner-sdk .ot-sdk-buttonborder-radius: 50%!important— selector#onetrust-pc-sdk #ot-pc-lst #filter-btn-handlerbox-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)— selector.shadow-[inset_0_1px_0_0_var(--kumo-button-emphasis-bg)]box-shadow: var(--admin-shadow-card)— selector.[box-shadow:var(--admin-shadow-card)]box-shadow: inset 0 0 0 2px var(--rdp-focus-ring)— selector.rdp-day_button:focus-visiblebox-shadow: inset 0 0 0 1px var(--rdp-nav-border)— selector.rdp-button_next,.rdp-button_previousbox-shadow: none!important— selector#onetrust-banner-sdk #onetrust-accept-btn-handler,#onetrust-banner-sdk #onetrust-reject-all-handler,#onetrust-banner-sdk #onetrust-pc-btn-handler,#onetrust-banner-sdk .ot-sdk-buttonbox-shadow: 0 2px 8px #0000001f!important— selector#ot-sdk-btn-floating .ot-floating-button**front,#ot-sdk-btn-floating .ot-floating-button**backbox-shadow: 0 1px 2px color-mix(in srgb,var(--registrar-fg) 4%,transparent),0 18px 40px -34px color-mix(in srgb,var(--registrar-fg) 9%,transparent)— selector.registrar-cardmax-width: 40rem!important— selector.!containermax-width: 48rem!important— selector.!containermax-width: 64rem!important— selector.!containermax-width: 80rem!important— selector.!containermax-width: 96rem!important— selector.!containermax-width: 40rem— selector.containermax-width: 48rem— selector.containermax-width: 64rem— selector.containerpadding: 0— selector::file-selector-buttonpadding: calc(var(--spacing) \* 4)— selector.[&_.rich-text-code-block]:p-4 .rich-text-code-blockpadding: 0!important— selector#onetrust-banner-sdk .ot-sdk-containerpadding: 10px 20px!important— selector#onetrust-banner-sdk #onetrust-accept-btn-handler,#onetrust-banner-sdk #onetrust-reject-all-handler,#onetrust-banner-sdk #onetrust-pc-btn-handler,#onetrust-banner-sdk .ot-sdk-buttonpadding: 10px 16px!important— selector#onetrust-pc-sdk .ot-pc-footer button,#onetrust-pc-sdk .ot-btn-container button,#onetrust-pc-sdk button#accept-recommended-btn-handler,#onetrust-pc-sdk button.save-preference-btn-handler,#onetrust-pc-sdk button.ot-pc-refuse-all-handlerpadding: 16px 20px 12px!important— selector#onetrust-pc-sdk #ot-pc-lst #ot-lst-titlepadding: 8px 12px!important— selector#onetrust-pc-sdk .ot-tab-list button,#onetrust-pc-sdk .ot-tab-list agap: calc(var(--spacing) _ 3)— selector:is(.\*\*:data-[sidebar=menu-button]:gap-3 _)[data-sidebar=menu-button]gap: 8px!important— selector#onetrust-banner-sdk #onetrust-button-groupgap: calc(var(--spacing) _ 12)— selector.gap-sectiongap: calc(var(--spacing) _ 16)— selector.gap-sectiongap: calc(var(--spacing) \* 20)— selector.gap-sectiontransition: background-color .15s,color .15s— selector.rdp-day_buttontransition: background-color .15s,box-shadow .15s— selector.rdp-button_next,.rdp-button\_previoustransition: background-color .16s,border-color .16s,color .16s,transform .16s,opacity .16s!important— selector#onetrust-banner-sdk #onetrust-accept-btn-handler,#onetrust-banner-sdk #onetrust-reject-all-handler,#onetrust-banner-sdk #onetrust-pc-btn-handler,#onetrust-banner-sdk .ot-sdk-buttontransition: background-color .16s!important— selector#onetrust-banner-sdk .onetrust-close-btn-handler,#onetrust-banner-sdk .banner-close-button,#onetrust-banner-sdk .ot-close-icontransition: filter .16s!important— selector#onetrust-banner-sdk .onetrust-close-btn-handler:before,#onetrust-banner-sdk .banner-close-button:before,#onetrust-banner-sdk .ot-close-icon:beforetransition: background-color .16s,border-color .16s,color .16s,transform .16s!important— selector#onetrust-pc-sdk .ot-pc-footer button,#onetrust-pc-sdk .ot-btn-container button,#onetrust-pc-sdk button#accept-recommended-btn-handler,#onetrust-pc-sdk button.save-preference-btn-handler,#onetrust-pc-sdk button.ot-pc-refuse-all-handlertransition: color .16s,border-color .16s!important— selector#onetrust-pc-sdk .ot-tab-list button,#onetrust-pc-sdk .ot-tab-list a
Responsive rules
(max-width:47.999rem)
(min-width:48rem)
(width<40rem)
(max-width:767px)
(min-width:40rem)
(min-width:64rem)
(min-width:80rem)
(min-width:96rem)
(forced-colors:active)
(hover:hover)
(prefers-reduced-motion:reduce)
not all and (min-width:1120px)
not all and (min-width:860px)
not all and (min-width:560px)
not all and (min-width:400px)
not all and (min-width:64rem)
not all and (min-width:48rem)
not all and (min-width:40rem)
(max-height:924px)
(max-height:924px)]:min-h-screen
(max-width:640px)
(min-width:768px)
(min-height:925px)
(prefers-reduced-motion)
(hover:hover)and (pointer:fine)Source: https://www.cloudflare.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Original CSS custom-property declarations, grouped by source and selector. Up to 250 declarations; selectors preserved; media-query conditions are not attached to individual declarations.
https://www.cloudflare.com/ — search-modal-snippet[data-astro-cid-457tmonj]
--search-snippet-primary-color: var(--color-accent-100);
--search-snippet-primary-hover: var(--color-accent-200);
--search-snippet-background: var(--color-background-100);
--search-snippet-surface: var(--color-background-200);
--search-snippet-hover-background: var(--color-background-300);
--search-snippet-text-color: var(--color-foreground-100);
--search-snippet-text-secondary: var(--color-text-secondary);
--search-snippet-text-description: var(--color-foreground-200);
--search-snippet-border-color: var(--color-border-100);
--search-snippet-focus-ring: color-mix(in oklab, var(--color-accent-100) 25%, transparent);
--search-snippet-warning-color: var(--color-foreground-100);
--search-snippet-warning-background: var(--color-background-300);
--search-snippet-shadow-lg: 0 8px 24px rgb(0 0 0 / .12);
--search-snippet-font-family: var(--font-sans);https://www.cloudflare.com/ — .home-hero-title[data-astro-cid-zoedcjun]
--type-h1-weight: 600;https://www.cloudflare.com/ — to
--customer-browser-beam-angle: 360deg;
--beam-angle-_r132R_2l\_: 360deg;
--beam-opacity-_r132R_2l\_: 1;
--beam-opacity-_r132R_2l_: 0;https://www.cloudflare.com/ — from
--beam-opacity-_r132R_2l_: 1;https://www.cloudflare.com/_astro/_separator.CZgc5wuK.css — \*,:before,:after,::backdrop
--fade-left-n: 0;
--fade-right-n: 0;https://www.cloudflare.com/_astro/_separator.CZgc5wuK.css — :root,:host
--text-color-kumo-default: light-dark(var(--color-neutral-900,oklch(21% .006 285.885)),var(--color-neutral-100,oklch(97% 0 0)));
--text-color-kumo-inverse: light-dark(var(--color-neutral-100,oklch(97% 0 0)),var(--color-neutral-900,oklch(20.5% 0 0)));
--text-color-kumo-strong: light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0)));
--text-color-kumo-subtle: light-dark(var(--color-neutral-500,oklch(55.6% 0 0)),var(--color-neutral-400,oklch(70.8% 0 0)));
--text-color-kumo-inactive: light-dark(var(--color-neutral-300,oklch(87% 0 0)),var(--color-neutral-600,oklch(43.9% 0 0)));
--text-color-kumo-placeholder: light-dark(var(--color-neutral-400,oklch(70.8% 0 0)),var(--color-neutral-500,oklch(55.6% 0 0)));
--text-color-kumo-brand: var(--color-kumo-brand);
--text-color-kumo-link: light-dark(var(--color-blue-800,oklch(42.4% .199 265.638)),var(--color-blue-400,oklch(70.7% .165 254.624)));
--text-color-kumo-info: light-dark(var(--color-blue-800,oklch(42.4% .199 265.638)),var(--color-blue-400,oklch(70.7% .165 254.624)));
--text-color-kumo-success: light-dark(var(--color-emerald-800,oklch(43.2% .095 166.913)),var(--color-emerald-200,oklch(90.5% .093 164.15)));
--text-color-kumo-danger: light-dark(var(--color-red-700,oklch(50.5% .213 27.518)),var(--color-red-400,oklch(70.4% .191 22.216)));
--text-color-kumo-warning: light-dark(oklch(59.7% .144 57.5),var(--color-orange-400,oklch(75% .183 55.934)));
--text-color-kumo-badge-teal-subtle: light-dark(var(--color-teal-800,oklch(43.7% .078 188.216)),var(--color-teal-200,oklch(91% .096 180.426)));
--text-color-kumo-badge-neutral-subtle: light-dark(var(--color-neutral-800,oklch(26.9% 0 0)),var(--color-neutral-200,oklch(92.2% 0 0)));
--text-color-kumo-badge-inverted: light-dark(var(--color-white,#fff),var(--color-black,#000));
--color-kumo-canvas: light-dark(var(--color-kumo-neutral-25,oklch(98.75% 0 0)),var(--color-kumo-neutral-1000,oklch(10% 0 0)));
--color-kumo-elevated: light-dark(var(--color-kumo-neutral-75,oklch(98% 0 0)),var(--color-kumo-neutral-975,oklch(12% 0 0)));
--color-kumo-recessed: light-dark(var(--color-kumo-neutral-125,oklch(96% 0 0)),var(--color-kumo-neutral-950,oklch(15% 0 0)));
--color-kumo-base: light-dark(var(--color-white,#fff),var(--color-kumo-neutral-925,oklch(17% 0 0)));
--color-kumo-tint: light-dark(var(--color-neutral-100,oklch(97% 0 0)),var(--color-kumo-neutral-800,oklch(26.9% 0 0)));
--color-kumo-contrast: light-dark(var(--color-kumo-neutral-975,oklch(8.5% 0 0)),var(--color-kumo-neutral-25,oklch(98.5% 0 0)));
--color-kumo-overlay: light-dark(var(--color-kumo-neutral-50,oklch(97.5% 0 0)),var(--color-neutral-800,oklch(26.9% 0 0)));
--color-kumo-control: light-dark(var(--color-white,#fff),var(--color-neutral-900,oklch(21% .006 285.885)));
--color-kumo-interact: light-dark(var(--color-neutral-300,oklch(87% 0 0)),var(--color-neutral-700,oklch(37.1% 0 0)));
--color-kumo-fill: light-dark(var(--color-neutral-200,oklch(92.2% 0 0)),var(--color-neutral-800,oklch(26.9% 0 0)));
--color-kumo-fill-hover: light-dark(var(--color-kumo-neutral-125,oklch(96.5% 0 0)),var(--color-neutral-800,oklch(37.1% 0 0)));
--color-kumo-brand: var(--color-accent-100);
--color-kumo-brand-hover: var(--color-accent-200);
--color-kumo-line: light-dark(oklch(14.5% 0 0/.1),var(--color-kumo-neutral-750,oklch(32% 0 0)));
--color-kumo-hairline: light-dark(var(--color-kumo-neutral-150,oklch(93.5% 0 0)),var(--color-neutral-800,oklch(26.9% 0 0)));
--color-kumo-focus: light-dark(var(--color-kumo-neutral-950,oklch(15% 0 0)),var(--color-kumo-neutral-150,oklch(93.5% 0 0)));
--color-kumo-shadow-edge: light-dark(oklch(0% 0 0/.12),oklch(100% 0 0/.1));
--color-kumo-shadow-drop: light-dark(oklch(0% 0 0/.08),oklch(0% 0 0/.3));
--color-kumo-arrow-edge: light-dark(oklch(14.5% 0 0/.1),#0000);
--color-kumo-arrow-stroke: light-dark(transparent,var(--color-kumo-neutral-750,oklch(32% 0 0)));
--color-kumo-info-tint: light-dark(oklch(93.2% .032 255.6/.45),oklch(38% .145 265.5/.22));
--color-kumo-info: light-dark(var(--color-blue-500,oklch(68.5% .169 237.323)),var(--color-blue-500,oklch(68.5% .169 237.323)));
--color-kumo-warning-tint: light-dark(oklch(93.1% .107 94.6/.2),oklch(35.3% .079 65/.37));
--color-kumo-warning: light-dark(oklch(73.9% .177 58.2),oklch(64.5% .168 50));
--color-kumo-danger-tint: light-dark(oklch(93.6% .032 17.7/.42),oklch(42.9% .176 28.7/.17));
--color-kumo-danger: light-dark(var(--color-red-500,oklch(63.7% .237 25.331)),var(--color-red-600,oklch(57.7% .245 27.325)));
--color-kumo-success-tint: light-dark(oklch(96.2% .043 156.7/.57),oklch(39.3% .096 152.3/.2));
--color-kumo-success: light-dark(var(--color-emerald-600,oklch(59.6% .145 163.225)),var(--color-emerald-400,oklch(76.5% .177 163.223)));
--color-kumo-badge-red: light-dark(var(--color-red-600,oklch(57.7% .245 27.325)),var(--color-red-700,oklch(50.5% .213 27.518)));
--color-kumo-badge-green: light-dark(var(--color-emerald-600,oklch(59.6% .145 163.225)),var(--color-emerald-700,oklch(50.8% .118 165.612)));
--color-kumo-badge-orange: light-dark(var(--color-orange-650,oklch(81.5% .197 76)),var(--color-orange-650,oklch(81.5% .197 76)));
--color-kumo-badge-purple: light-dark(var(--color-purple-600,oklch(55.8% .288 302.321)),var(--color-purple-700,oklch(49.6% .265 301.924)));
--color-kumo-badge-teal: light-dark(var(--color-teal-650,oklch(54.9% .096 184.565)),var(--color-teal-700,oklch(51.1% .096 186.391)));
--color-kumo-badge-blue: light-dark(var(--color-blue-600,oklch(54.6% .245 262.881)),var(--color-blue-700,oklch(48.8% .243 264.376)));
--color-kumo-badge-neutral: light-dark(var(--color-neutral-500,oklch(55.6% 0 0)),var(--color-neutral-600,oklch(43.9% 0 0)));
--color-kumo-badge-inverted: light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-white,#fff));
--text-xs: 12px;
--text-xs--line-height: calc(1 / .75);
--text-sm: 13px;
--text-sm--line-height: calc(1 / .85);
--text-base: 14px;
--text-base--line-height: 1.5;
--text-lg: 16px;
--text-lg--line-height: 1.5;
--color-blue-400: oklch(70.7% .165 254.624);
--color-blue-800: oklch(42.4% .199 265.638);
--color-orange-650: oklch(81.5% .197 76);
--color-teal-650: oklch(54.9% .096 184.565);
--color-kumo-neutral-50: oklch(98.75% 0 0);
--color-kumo-neutral-75: oklch(98% 0 0);
--color-kumo-neutral-125: oklch(96.5% 0 0);
--color-kumo-neutral-750: oklch(32% 0 0);
--color-kumo-neutral-925: oklch(17% 0 0);
--color-kumo-neutral-950: oklch(15% 0 0);
--color-kumo-neutral-975: oklch(12% 0 0);
--color-kumo-neutral-1000: oklch(10% 0 0);
--default-transition-duration: .1s;
--animate-refresh: refresh .5s ease-in-out infinite;
--font-sans: "FT Kunst Grotesk", sans-serif;
--font-mono: "Apercu Mono Pro", monospace;
--color-red-50: oklch(97.1% .013 17.38);
--color-red-100: oklch(93.6% .032 17.717);
--color-red-200: oklch(88.5% .062 18.334);
--color-red-300: oklch(80.8% .114 19.571);
--color-red-400: oklch(70.4% .191 22.216);
--color-red-500: oklch(63.7% .237 25.331);
--color-red-600: oklch(57.7% .245 27.325);
--color-red-700: oklch(50.5% .213 27.518);
--color-red-800: oklch(44.4% .177 26.899);
--color-red-900: oklch(39.6% .141 25.723);
--color-red-950: oklch(25.8% .092 26.042);
--color-orange-200: oklch(90.1% .076 70.697);
--color-orange-400: oklch(75% .183 55.934);
--color-orange-500: oklch(70.5% .213 47.604);
--color-orange-600: oklch(64.6% .222 41.116);
--color-orange-800: oklch(47% .157 37.304);
--color-amber-100: oklch(96.2% .059 95.617);
--color-amber-200: oklch(92.4% .12 95.746);
--color-amber-300: oklch(87.9% .169 91.605);
--color-amber-400: oklch(82.8% .189 84.429);
--color-amber-500: oklch(76.9% .188 70.08);
--color-amber-600: oklch(66.6% .179 58.318);
--color-amber-700: oklch(55.5% .163 48.998);
--color-amber-800: oklch(47.3% .137 46.201);
--color-amber-950: oklch(27.9% .077 45.635);
--color-yellow-50: oklch(98.7% .026 102.212);
--color-yellow-100: oklch(97.3% .071 103.193);
--color-yellow-400: oklch(85.2% .199 91.936);
--color-yellow-500: oklch(79.5% .184 86.047);
--color-yellow-600: oklch(68.1% .162 75.834);
--color-yellow-700: oklch(55.4% .135 66.442);
--color-yellow-800: oklch(47.6% .114 61.907);
--color-yellow-900: oklch(42.1% .095 57.708);
--color-green-100: oklch(96.2% .044 156.743);
--color-green-400: oklch(79.2% .209 151.711);
--color-green-500: oklch(72.3% .219 149.579);
--color-green-600: oklch(62.7% .194 149.214);
--color-green-800: oklch(44.8% .119 151.328);
--color-emerald-100: oklch(95% .052 163.051);
--color-emerald-200: oklch(90.5% .093 164.15);
--color-emerald-300: oklch(84.5% .143 164.978);
--color-emerald-400: oklch(76.5% .177 163.223);
--color-emerald-500: oklch(69.6% .17 162.48);
--color-emerald-600: oklch(59.6% .145 163.225);
--color-emerald-700: oklch(50.8% .118 165.612);
--color-emerald-800: oklch(43.2% .095 166.913);
--color-teal-200: oklch(91% .096 180.426);
--color-teal-700: oklch(51.1% .096 186.391);
--color-teal-800: oklch(43.7% .078 188.216);
--color-cyan-500: oklch(71.5% .143 215.221);
--color-sky-100: oklch(95.1% .026 236.824);
--color-sky-400: oklch(74.6% .16 232.661);
--color-sky-500: oklch(68.5% .169 237.323);
--color-sky-600: oklch(58.8% .158 241.966);
--color-blue-300: oklch(80.9% .105 251.813);
--color-blue-500: oklch(62.3% .214 259.815);
--color-blue-600: oklch(54.6% .245 262.881);
--color-blue-700: oklch(48.8% .243 264.376);
--color-violet-100: oklch(94.3% .029 294.588);
--color-violet-300: oklch(81.1% .111 293.571);
--color-violet-400: oklch(70.2% .183 293.541);
--color-violet-500: oklch(60.6% .25 292.717);
--color-violet-600: oklch(54.1% .281 293.009);
--color-purple-400: oklch(71.4% .203 305.504);
--color-purple-500: oklch(62.7% .265 303.9);
--color-purple-600: oklch(55.8% .288 302.321);
--color-purple-700: oklch(49.6% .265 301.924);
--color-pink-100: oklch(94.8% .028 342.258);
--color-pink-500: oklch(65.6% .241 354.308);
--color-pink-600: oklch(59.2% .249 .584);
--color-rose-500: oklch(64.5% .246 16.439);
--color-slate-100: oklch(96.8% .007 247.896);
--color-gray-50: oklch(98.5% .002 247.839);
--color-gray-100: oklch(96.7% .003 264.542);
--color-gray-200: oklch(92.8% .006 264.531);
--color-gray-300: oklch(87.2% .01 258.338);
--color-gray-500: oklch(55.1% .027 264.364);
--color-gray-600: oklch(44.6% .03 256.802);
--color-gray-700: oklch(37.3% .034 259.733);
--color-gray-900: oklch(21% .034 264.665);
--color-zinc-800: oklch(27.4% .006 286.033);
--color-neutral-50: oklch(98.5% 0 0);
--color-neutral-100: oklch(97% 0 0);
--color-neutral-200: oklch(92.2% 0 0);
--color-neutral-300: oklch(87% 0 0);
--color-neutral-400: oklch(70.8% 0 0);
--color-neutral-500: oklch(55.6% 0 0);
--color-neutral-600: oklch(43.9% 0 0);
--color-neutral-700: oklch(37.1% 0 0);
--color-neutral-800: oklch(26.9% 0 0);
--color-neutral-900: oklch(20.5% 0 0);
--color-neutral-950: oklch(14.5% 0 0);
--color-black: #000;
--color-white: #fff;
--spacing: .25rem;
--container-xs: 20rem;
--container-sm: 24rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--text-xl: 1.25rem;
--text-xl--line-height: calc(1.75 / 1.25);
--text-2xl: 1.5rem;
--text-2xl--line-height: calc(2 / 1.5);
--text-3xl: 1.875rem;
--text-3xl--line-height: 1.2;
--text-4xl: 2.25rem;
--text-4xl--line-height: calc(2.5 / 2.25);
--text-5xl: 3rem;
--text-5xl--line-height: 1;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--tracking-tight: -.025em;
--tracking-normal: 0em;
--tracking-wide: .025em;
--tracking-wider: .05em;
--tracking-widest: .1em;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--radius-xs: .125rem;
--radius-sm: .25rem;
--radius-md: .375rem;
--radius-lg: .5rem;
--radius-xl: .75rem;
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;
--ease-in: cubic-bezier(.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, .2, 1);
--ease-in-out: cubic-bezier(.4, 0, .2, 1);
--animate-spin: spin 1s linear infinite;
--animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
--animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
--blur-sm: 8px;
--blur-md: 12px;
--blur-lg: 16px;
--blur-xl: 24px;
--blur-2xl: 40px;
--blur-3xl: 64px;
--aspect-video: 16 / 9;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
--color-accent-100: #ff5e1f;
--color-accent-200: #ff7038;Source: https://www.cloudflare.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Observed design values, with source selectors. Names shown are CSS properties, not invented official token names.
| Property | Declared value | Selector |
|---|---|---|
| font-family | var(--font-mono) | .[&_.rich-text-code-block]:font-mono .rich-text-code-block |
| font-family | var(--font-sans) | h1,.heading-visual-h1 |
| font-family | var(--ot-font-sans)!important | #onetrust-banner-sdk #onetrust-accept-btn-handler,#onetrust-banner-sdk #onetrust-reject-all-handler,#onetrust-banner-sdk #onetrust-pc-btn-handler,#onetrust-banner-sdk .ot-sdk-button |
| font-size | var(--text-base)!important | .!text-base |
| font-size | var(--text-2xl) | .text-2xl |
| font-size | var(--text-3xl) | .text-3xl |
| font-size | var(--text-4xl) | .text-4xl |
| font-size | var(--text-5xl) | .text-5xl |
| font-size | 11px | .text-[11px]/none |
| font-weight | var(--font-weight-medium) | .file:font-medium::file-selector-button |
| font-weight | var(--font-weight-bold) | .[&_.rich-text-bold]:font-bold .rich-text-bold |
| font-weight | var(--font-weight-semibold) | .[&_.rich-text-h2]:font-semibold .rich-text-h2 |
| font-weight | var(--font-weight-normal) | .[&_pre]:font-normal pre |
| font-weight | 600 | .rdp-today:not(.rdp-outside):not(.rdp-selected) .rdp-day_button |
| font-weight | var(--type-h1-weight) | h1,.heading-visual-h1 |
| font-weight | var(--type-h2-weight) | h2 |
| line-height | var(--tw-leading,var(--text-base--line-height))!important | .!text-base |
| line-height | var(--tw-leading,var(--text-2xl--line-height)) | .text-2xl |
| line-height | var(--tw-leading,var(--text-3xl--line-height)) | .text-3xl |
| line-height | var(--tw-leading,var(--text-4xl--line-height)) | .text-4xl |
| line-height | var(--tw-leading,var(--text-5xl--line-height)) | .text-5xl |
| line-height | 1 | .text-[11px]/none |
| line-height | var(--tw-leading,var(--text-base--line-height)) | .text-base |
| letter-spacing | var(--type-h1-tracking) | h1,.heading-visual-h1 |
| letter-spacing | var(--type-h2-tracking) | h2 |
| letter-spacing | var(--type-h3-tracking) | h3,.heading-visual-h3 |
| letter-spacing | var(--type-h4-tracking) | h4 |
| letter-spacing | var(--type-h5-tracking) | h5,.heading-visual-h5 |
| letter-spacing | var(--type-h6-tracking) | h6,.heading-visual-h6 |
| letter-spacing | var(--type-p-tracking) | p |
| color | var(--text-color-kumo-danger)!important | .!text-kumo-danger |
| color | var(--text-color-kumo-default)!important | .!text-kumo-default |
| color | var(--text-color-kumo-inverse)!important | .!text-kumo-inverse |
| color | var(--text-color-kumo-subtle)!important | .!text-kumo-subtle |
| color | var(--color-white)!important | .!text-white |
| color | var(--registrar-finder-foreground) | .text-(--registrar-finder-foreground) |
| color | #0f766e | .text-[#0F766E] |
| background-color | #0000 | button,input,select,optgroup,textarea |
| background-color | var(--color-accent-100) | html.is-home-page:not(.mobile-nav-open) body |
| background-color | var(--color-background-100) | html.is-home-page.mobile-nav-open body |
| background-color | var(--kumo-button-emphasis-bg) | .bg-(--kumo-button-emphasis-bg) |
| background-color | color-mix(in srgb,light-dark(var(--color-neutral-200,oklch(92.2% 0 0)),var(--color-neutral-800,oklch(26.9% 0 0))) 10%,transparent) | .file:bg-kumo-fill/10::file-selector-button |
| background-color | color-mix(in oklab,var(--color-kumo-fill) 10%,transparent) | .file:bg-kumo-fill/10::file-selector-button |
| background-color | #0000001c | .has-[button:active]:[&_.lg-unify-hover-overlay]:bg-black/[0.11]:has(:is(button:active)) .lg-unify-hover-overlay |
| background-color | color-mix(in oklab,var(--color-black) 11%,transparent) | .has-[button:active]:[&_.lg-unify-hover-overlay]:bg-black/[0.11]:has(:is(button:active)) .lg-unify-hover-overlay |
| border-radius | 0 | button,input,select,optgroup,textarea |
| border-radius | var(--radius-md) | .file:rounded-md::file-selector-button |
| border-radius | .25rem | .[&_.rich-text-inline-code]:rounded .rich-text-inline-code |
| border-radius | var(--radius-lg) | .[&_pre]:rounded-lg pre |
| border-radius | var(--rdp-day_button-border-radius) | .rdp-day_button |
| border-radius | .375rem | .rdp-button_next,.rdp-button_previous |
| border-radius | var(--ot-radius-btn)!important | #onetrust-banner-sdk #onetrust-accept-btn-handler,#onetrust-banner-sdk #onetrust-reject-all-handler,#onetrust-banner-sdk #onetrust-pc-btn-handler,#onetrust-banner-sdk .ot-sdk-button |
| border-radius | 50%!important | #onetrust-pc-sdk #ot-pc-lst #filter-btn-handler |
| box-shadow | var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow) | .shadow-[inset_0_1px_0_0_var(--kumo-button-emphasis-bg)] |
| box-shadow | var(--admin-shadow-card) | .[box-shadow:var(--admin-shadow-card)] |
| box-shadow | inset 0 0 0 2px var(--rdp-focus-ring) | .rdp-day_button:focus-visible |
| box-shadow | inset 0 0 0 1px var(--rdp-nav-border) | .rdp-button_next,.rdp-button_previous |
| box-shadow | none!important | #onetrust-banner-sdk #onetrust-accept-btn-handler,#onetrust-banner-sdk #onetrust-reject-all-handler,#onetrust-banner-sdk #onetrust-pc-btn-handler,#onetrust-banner-sdk .ot-sdk-button |
| box-shadow | 0 2px 8px #0000001f!important | #ot-sdk-btn-floating .ot-floating-button**front,#ot-sdk-btn-floating .ot-floating-button**back |
| box-shadow | 0 1px 2px color-mix(in srgb,var(--registrar-fg) 4%,transparent),0 18px 40px -34px color-mix(in srgb,var(--registrar-fg) 9%,transparent) | .registrar-card |
| max-width | 40rem!important | .!container |
| max-width | 48rem!important | .!container |
| max-width | 64rem!important | .!container |
| max-width | 80rem!important | .!container |
| max-width | 96rem!important | .!container |
| max-width | 40rem | .container |
| max-width | 48rem | .container |
| max-width | 64rem | .container |
| padding | 0 | ::file-selector-button |
| padding | calc(var(--spacing) \* 4) | .[&_.rich-text-code-block]:p-4 .rich-text-code-block |
| padding | 0!important | #onetrust-banner-sdk .ot-sdk-container |
| padding | 10px 20px!important | #onetrust-banner-sdk #onetrust-accept-btn-handler,#onetrust-banner-sdk #onetrust-reject-all-handler,#onetrust-banner-sdk #onetrust-pc-btn-handler,#onetrust-banner-sdk .ot-sdk-button |
| padding | 10px 16px!important | #onetrust-pc-sdk .ot-pc-footer button,#onetrust-pc-sdk .ot-btn-container button,#onetrust-pc-sdk button#accept-recommended-btn-handler,#onetrust-pc-sdk button.save-preference-btn-handler,#onetrust-pc-sdk button.ot-pc-refuse-all-handler |
| padding | 16px 20px 12px!important | #onetrust-pc-sdk #ot-pc-lst #ot-lst-title |
| padding | 8px 12px!important | #onetrust-pc-sdk .ot-tab-list button,#onetrust-pc-sdk .ot-tab-list a |
| gap | calc(var(--spacing) _ 3) | :is(.\*\*:data-[sidebar=menu-button]:gap-3 _)[data-sidebar=menu-button] |
| gap | 8px!important | #onetrust-banner-sdk #onetrust-button-group |
| gap | calc(var(--spacing) _ 12) | .gap-section |
| gap | calc(var(--spacing) _ 16) | .gap-section |
| gap | calc(var(--spacing) \* 20) | .gap-section |
| transition | background-color .15s,color .15s | .rdp-day_button |
| transition | background-color .15s,box-shadow .15s | .rdp-button_next,.rdp-button\_previous |
| transition | background-color .16s,border-color .16s,color .16s,transform .16s,opacity .16s!important | #onetrust-banner-sdk #onetrust-accept-btn-handler,#onetrust-banner-sdk #onetrust-reject-all-handler,#onetrust-banner-sdk #onetrust-pc-btn-handler,#onetrust-banner-sdk .ot-sdk-button |
| transition | background-color .16s!important | #onetrust-banner-sdk .onetrust-close-btn-handler,#onetrust-banner-sdk .banner-close-button,#onetrust-banner-sdk .ot-close-icon |
| transition | filter .16s!important | #onetrust-banner-sdk .onetrust-close-btn-handler:before,#onetrust-banner-sdk .banner-close-button:before,#onetrust-banner-sdk .ot-close-icon:before |
| transition | background-color .16s,border-color .16s,color .16s,transform .16s!important | #onetrust-pc-sdk .ot-pc-footer button,#onetrust-pc-sdk .ot-btn-container button,#onetrust-pc-sdk button#accept-recommended-btn-handler,#onetrust-pc-sdk button.save-preference-btn-handler,#onetrust-pc-sdk button.ot-pc-refuse-all-handler |
| transition | color .16s,border-color .16s!important | #onetrust-pc-sdk .ot-tab-list button,#onetrust-pc-sdk .ot-tab-list a |
Source: https://www.cloudflare.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Evidence and limitations
- Values come directly from downloaded stylesheets. Selector context is retained to distinguish elements; individual media-query conditions are not retained.
- CSS cascade, active viewport, runtime styles, interactive states and private product UI were not verified. Colors or dimensions in utility classes may be unused on this page.
- No inferred dark theme, semantic color roles or framework defaults have been added.
- 737 custom-property declarations found; 2858 relevant property declarations parsed.