Cloudflare

---
name: cloudflare-com-design-system
source: https://www.cloudflare.com/
extracted: 2026-07-03
theme: light  # measured from neutral usage weight
colors:  # roles inferred from usage frequency + luminance; names verified against values
  canvas: "#ffffff"
  ink: "#171717"
  text-muted: "#8c8c8c"
  surface: "#f0f0f0"
  hairline: "#b4b4b4"
  accent: "#ff5e1f"  # orange
  accent-2: "#ff4801"  # orange
  accent-3: "#fb2c36"  # red
fonts:
  primary: "STK Bureau Sans"  # medium-confidence: usage counts are close
  mono: "Apercu Mono Pro"
---

# Cloudflare: Build for the agent era — Design System

Extracted from **https://www.cloudflare.com/** on 2026-07-03.

> Welcome to Cloudflare - Powering the next generation of applications

Every value below is mined from the site's live CSS (120 native custom properties, ranked usage counts). Role assignments are inferred from usage and luminance and marked as such — treat them as a strong starting point, not gospel.

## Overview

The system reads as light: measured neutral usage weighs 278 light against 168 dark. The palette is chromatic: 12 saturated values against 8 neutrals, led by orange (`#ff5e1f`). **STK Bureau Sans** leads the font stack, though usage counts are close — verify against rendered pages before committing. Geometry mixes sharp corners (0px) with full pills.

## Usage rules

Derived from the measured usage below — each rule cites its evidence.

- Chromatic color carries 39% of measured usage — this palette uses color structurally. Saturated values can hold large surfaces here; timidity would misrepresent the source.
- The theme is light (measured neutral weight 278:168). Don't flip individual sections to the opposite mode.
- `.25rem` is the workhorse radius (x9); treat the other radii as exceptions, not options.
- The only shadows are blur-less hairline offsets — this system barely uses elevation; don't add soft drop shadows.
- One family does the work — build hierarchy with size and weight (400/500/600/700), not by adding typefaces.
- `Apercu Mono Pro` is the monospace — keep it for code, data, and metadata roles.

## Colors

### Neutrals (light → dark)

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `neutral-50` | `#ffffff` | 213 | **canvas** — lightest neutral, matches the measured light-leaning theme |
| `neutral-100` | `#f0f0f0` | 65 | **surface** — neutral closest to canvas luminance |
| `neutral-300` | `#b4b4b4` | 7 | **hairline** — next neutral near canvas, hairline-border weight |
| `neutral-400` | `#a0a0a0` | 6 | — |
| `neutral-500` | `#8c8c8c` | 12 | **text-muted** — most-used mid-luminance neutral |
| `neutral-600` | `#737373` | 5 | — |
| `neutral-900` | `#262626` | 81 | — |
| `neutral-950` | `#171717` | 30 | **ink** — darkest neutral, highest contrast against canvas |

### Accents

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `orange` | `#ff5e1f` | 95 | **accent** — most-used chromatic color |
| `orange-2` | `#ff4801` | 70 | **accent-2** — supporting chromatic color |
| `red` | `#fb2c36` | 25 | **accent-3** — supporting chromatic color |
| `yellow` | `#fcbb00` | 12 | — |
| `pale-orange` | `#f0e3de` | 10 | — |
| `orange-3` | `#f99c00` | 9 | — |
| `red-2` | `#ff6568` | 9 | — |
| `orange-4` | `#ff7038` | 8 | — |
| `blue` | `#3080ff` | 8 | — |
| `teal` | `#00bb7f` | 8 | — |
| `cyan` | `#0a95ff` | 7 | — |
| `orange-5` | `#e9d1bb` | 7 | — |

### Modern color values (kept verbatim)

- `oklch(21% .006 285.885)`
- `oklch(97% 0 0)`
- `oklch(20.5% 0 0)`
- `oklch(43.9% 0 0)`
- `oklch(70.8% 0 0)`
- `oklch(55.6% 0 0)`
- `oklch(42.4% .199 265.638)`
- `oklch(70.7% .165 254.624)`
- `oklch(43.2% .095 166.913)`
- `oklch(90.5% .093 164.15)`
- `oklch(50.5% .213 27.518)`
- `oklch(70.4% .191 22.216)`

### Dark mode

The source defines 60 dark-mode variants (via light-dark(), dark selector). Both halves of the system, first 30:

| Token | Light | Dark |
| --- | --- | --- |
| `--text-color-kumo-badge-inverted` | `var(--color-white,#fff)` | `var(--color-black,#000)` |
| `--color-kumo-shadow-edge` | `oklch(0% 0 0/.12)` | `oklch(100% 0 0/.1)` |
| `--color-kumo-shadow-drop` | `oklch(0% 0 0/.08)` | `oklch(0% 0 0/.3)` |
| `--text-color-kumo-default` | `light-dark(var(--color-neutral-900,oklch(21% .006 285.885)),var(--color-neutral-100,oklch(97% 0 0)))` | `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)))` | `var(--color-neutral-900,oklch(20.5% 0 0))` |
| `--text-color-kumo-strong` | `light-dark(var(--color-neutral-600,oklch(43.9% 0 0)),var(--color-neutral-400,oklch(70.8% 0 0)))` | `var(--color-neutral-400,oklch(70.8% 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)))` | `var(--color-neutral-400,oklch(70.8% 0 0))` |
| `--text-color-kumo-inactive` | `light-dark(var(--color-neutral-400,oklch(70.8% 0 0)),var(--color-neutral-600,oklch(70.8% 0 0)))` | `var(--color-neutral-600,oklch(70.8% 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)))` | `var(--color-neutral-500,oklch(55.6% 0 0))` |
| `--text-color-kumo-brand` | `var(--color-kumo-brand)` | `#f6821f` |
| `--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)))` | `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)))` | `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)))` | `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)))` | `var(--color-red-400,oklch(70.4% .191 22.216))` |
| `--text-color-kumo-warning` | `light-dark(var(--color-yellow-800,oklch(47.6% .114 61.907)),var(--color-yellow-400,oklch(85.2% .199 91.936)))` | `var(--color-yellow-400,oklch(85.2% .199 91.936))` |
| `--text-color-kumo-badge-orange-subtle` | — | `var(--color-orange-200,oklch(90.1% .076 70.697))` |
| `--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)))` | `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)))` | `var(--color-neutral-200,oklch(92.2% 0 0))` |
| `--color-kumo-canvas` | `light-dark(var(--color-kumo-neutral-25,oklch(98.75% 0 0)),var(--color-kumo-neutral-1000,oklch(10% 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)))` | `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)))` | `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)))` | `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)))` | `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)))` | `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)))` | `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)))` | `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)))` | `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)))` | `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)))` | `var(--color-neutral-800,oklch(37.1% 0 0))` |
| `--color-kumo-brand` | `var(--color-accent-100)` | `oklch(57.72% .2324 260)` |

`variables.css` ships these as a `prefers-color-scheme: dark` override block.

## Typography

**STK Bureau Sans** has the most `font-family` declarations, but the margin over the rest is thin — treat the primary-face call as provisional and verify on rendered pages. Full list by usage:

| Family | Usage |
| --- | --- |
| STK Bureau Sans | 3 |
| FT Kunst Grotesk | 2 |
| Apercu Mono Pro | 1 |

**Size scale (px):** `8`, `10`, `11`, `12`, `13`, `14`, `14.8`, `15`, `15.6`, `16`, `20`, `24`

**Weights in use:** `400` (x8), `500` (x24), `600` (x3), `700` (x2)

**Line-heights (unitless):** `1`, `1.1`, `1.2`, `1.25`, `1.28`, `1.3`, `1.4`, `1.5`

**Letter-spacing values:** `-.04em`, `-.035em`, `-.02em`, `-.01em`, `.01em`, `.2em`

## Spacing

Most-used values (px): `1`, `2`, `3`, `4`, `5`, `6`, `8`, `10`, `12`, `16`, `20`, `24`

## Border radius

| Token | Value | Usage |
| --- | --- | --- |
| `radius-sm` | `0px` | 6 |
| `radius-md` | `2px` | 3 |
| `radius-lg` | `.25rem` | 9 |
| `radius-xl` | `.375rem` | 3 |
| `radius-2xl` | `10px` | 4 |
| `radius-full` | `50%` | 2 |

## Shadows (ordered by blur radius)

- `shadow-sm` — `inset 0 0 9px 1px rgba(0, 0, 0, 0.14)` (x1)

### Focus rings (spread-only box-shadows, kept out of the elevation scale)

- `0 0 0 1px #0a0a0a1a,0 1px 2px #0000000d` (x1)
- `0 0 0 1px #e5e5e5` (x1)

## Breakpoints

`640px`, `767px`, `768px`, `1024px`, `1280px`, `1536px`

## Starter recipes

Tokens composed into components. The source site's real components were **not** inspected — these are starting points built from the extracted values, with contrast ratios computed rather than assumed.

```css
.button-primary {
  background: var(--color-accent); /* #ff5e1f */
  color: var(--color-ink); /* #171717 — contrast 5.9:1 */
  border-radius: 9999px; /* pill — mined as 50% */
  font-weight: 500;
}

.card {
  background: var(--color-surface); /* #f0f0f0 */
  border: 1px solid var(--color-hairline); /* #b4b4b4 */
  border-radius: .25rem; /* most-used finite radius */
  box-shadow: var(--shadow-sm);
}

.input {
  background: var(--color-canvas); /* #ffffff */
  color: var(--color-ink); /* #171717 — contrast 17.9:1 */
  border: 1px solid var(--color-hairline); /* #b4b4b4 */
  border-radius: 0px;
  /* placeholder color: var(--color-text-muted) #8c8c8c */
}

.nav {
  background: var(--color-canvas); /* #ffffff */
  border-bottom: 1px solid var(--color-hairline); /* #b4b4b4 */
  color: var(--color-ink); /* #171717 */
  /* inactive links: var(--color-text-muted) #8c8c8c */
  /* active link: var(--color-accent) #ff5e1f — contrast vs canvas 3.1:1 */
}

.modal {
  background: var(--color-surface); /* #f0f0f0 */
  border-radius: .25rem;
  box-shadow: var(--shadow-sm); /* largest mined shadow */
}

.modal-backdrop {
  background: color-mix(in srgb, var(--color-ink) 55%, transparent); /* scrim from #171717 */
}

.input-error {
  border-color: #ff5e1f; /* mined token: orange */
  /* error text: #ff5e1f on canvas — contrast 3.1:1, below AA; darken for message text */
}

.input-success {
  border-color: #00bb7f; /* mined token: teal */
}
```

## Observations

- 8 of 20 extracted colors are neutrals.
- 1 distinct shadow; the softest reaches 0px blur.
- 6 breakpoints, from 640px to 1536px.
- The site ships a large native token system (120+ custom properties) — prefer those names when extending it.

## Native CSS custom properties

First 40 of 120:

```css
:root {
  --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-600,oklch(43.9% 0 0)),var(--color-neutral-400,oklch(70.8% 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-400,oklch(70.8% 0 0)),var(--color-neutral-600,oklch(70.8% 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(var(--color-yellow-800,oklch(47.6% .114 61.907)),var(--color-yellow-400,oklch(85.2% .199 91.936)));
  --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-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-tip-shadow: light-dark(var(--color-gray-200,oklch(92.8% .006 264.531)),transparent);
  --color-kumo-tip-stroke: light-dark(transparent,var(--color-neutral-800,oklch(26.9% 0 0)));
  --color-kumo-info-tint: light-dark(var(--color-blue-100,oklch(93.2% .032 255.585)),var(--color-blue-900,oklch(37.9% .146 265.522)));
  --color-kumo-info: light-dark(var(--color-blue-300,oklch(80.9% .105 251.813)),var(--color-blue-900,oklch(37.9% .146 265.522)));
  --color-kumo-warning-tint: light-dark(var(--color-yellow-100,oklch(97.3% .071 103.193)),var(--color-yellow-700,oklch(55.4% .135 66.442)));
  --color-kumo-warning: light-dark(var(--color-yellow-300,oklch(90.5% .182 98.111)),var(--color-yellow-900,oklch(42.1% .095 57.708)));
  --color-kumo-danger-tint: light-dark(var(--color-red-100,oklch(93.6% .032 17.717)),var(--color-red-900,oklch(39.6% .141 25.723)));
  --color-kumo-danger: light-dark(var(--color-red-500,oklch(63.7% .237 25.331)),var(--color-red-900,oklch(39.6% .141 25.723)));
}
```

## Files

- `tailwind.css` — Tailwind v4 `@theme` block; tokens become utilities (e.g. `bg-neutral-900`, `text-orange`).
- `variables.css` — framework-agnostic `:root` variables, same values.
- `tokens.json` — W3C Design Tokens format for Figma plugins, Style Dictionary, etc.