---
version: alpha
name: Cloudflare
description: Infrastructure-grade clarity — FT Kunst Grotesk at medium weight with tight negative tracking, signature orange #ff5e1f on white and soft-gray canvas, restrained 3–8px radius, and orange-tinted ambient shadows that glow from within.

colors:
  # Canvas + surfaces
  background: "#ffffff"
  surface: "#f0f0f0"           # dominant light gray — used for alternating sections and cards
  surface-dark: "#1d1d1d"      # deep charcoal for dark hero sections
  surface-darker: "#0c0c0c"    # near-black for the deepest dark surfaces

  # Text / ink
  ink: "#262626"               # primary text — rich near-black
  ink-secondary: "#707070"     # secondary body copy, captions
  ink-inverted: "#ffffff"      # text on dark surfaces
  on-primary: "#ffffff"        # text on orange brand surfaces

  # Brand accent
  primary: "#ff5e1f"           # Cloudflare Orange — primary CTA, accent, logo
  primary-muted: "#bf4c14"     # deeper orange for muted accent states — was oklch derived, opaque approx
  primary-container: "#fde8dc" # light orange tint for badge backgrounds — was rgba(255,94,31,0.1) over white
  primary-hover: "#e0521a"     # darkened orange for button hover states

  # Interactive
  link: "#ff5e1f"              # links inherit brand orange
  focus-ring: "#ff5e1f"        # focus ring follows brand accent
  selection-text: "#c33d08"    # text selection highlight color

  # Semantic
  success: "#0d9488"           # teal — success/positive states (--color-sase-100)
  error: "#b52831"             # red — error states (--color-security-100)
  warning: "#ffb10a"           # amber — warning states (--color-multiplayer-yellow)
  info: "#0a95ff"              # blue — informational states

  # Neutrals
  gray-100: "#f0f0f0"          # soft gray — card surfaces, alternating backgrounds
  gray-200: "#cccccc"          # border gray — dividers, input borders
  gray-600: "#707070"          # mid gray — secondary text
  gray-900: "#262626"          # near-black — primary text, headings

  # Borders
  border: "#cccccc"            # standard dividers and card outlines
  border-soft: "#e5e5e5"       # lighter divider for subtle separation

  # Shadow tints
  shadow-orange: "#ff500a"     # was rgba(255,80,10,0.06-0.1) — orange-tinted ambient glow
  shadow-soft: "#000000"       # was rgba(0,0,0,0.02-0.03) — near-invisible lift for cards

typography:
  display-hero:
    fontFamily: "FT Kunst Grotesk, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 0.99
    letterSpacing: -1.4px
  display:
    fontFamily: "FT Kunst Grotesk, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -1.2px
  heading-section:
    fontFamily: "FT Kunst Grotesk, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -0.8px
  heading-sub:
    fontFamily: "FT Kunst Grotesk, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 29px
    fontWeight: 500
    lineHeight: 0.96
    letterSpacing: -0.74px
  body-large:
    fontFamily: "FT Kunst Grotesk, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -0.48px
  body:
    fontFamily: "FT Kunst Grotesk, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-medium:
    fontFamily: "FT Kunst Grotesk, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: -0.16px
  nav-link:
    fontFamily: "FT Kunst Grotesk, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  button-ui:
    fontFamily: "FT Kunst Grotesk, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  caption:
    fontFamily: "FT Kunst Grotesk, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  mono-body:
    fontFamily: "Apercu Mono Pro, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: -0.56px
  mono-caption:
    fontFamily: "Apercu Mono Pro, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: -0.48px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 40px
  3xl: 48px
  4xl: 64px
  5xl: 80px

rounded:
  none: 0px
  xs: 3px
  sm: 4px
  md: 6px
  lg: 8px
  xl: 16px
  pill: 9999px

components:
  # Primary orange CTA
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px

  # Secondary outlined button
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.gray-100}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
    borderColor: "{colors.border}"

  # Ghost / dark surface button
  button-ghost-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px

  # Standard card — light gray surface
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border-soft}"

  # White card on gray section
  card-white:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  # Dark hero card
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink-inverted}"
    rounded: "{rounded.lg}"
    padding: 24px

  # Input field
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    borderColor: "{colors.primary}"
    backgroundColor: "{colors.background}"

  # Product category badge
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  # Navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
    borderColor: "{colors.border-soft}"

  # "Under attack?" emergency link
  link-emergency:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 4px 8px
---

# Cloudflare Design System

## Overview

Cloudflare's design language is infrastructure confidence made legible — a system that handles the complexity of internet security, performance, and developer tooling without ever appearing cluttered or uncertain. The canvas is predominantly clean white (`{colors.background}`) alternating with a cool light gray (`{colors.surface}`) that creates section rhythm without reaching for dark drama. The overall impression is clinical efficiency with a warm accent: the signature orange (`{colors.primary}`) appears as a precise point of heat against cool neutrality.

The custom font FT Kunst Grotesk carries the personality. At display sizes (48–56px) with weight 500 and negative tracking down to -1.4px, it reads as authoritative — not decorative, not engineered-spare like Geist, but something in between: a grotesk with subtle optical compression that communicates scale. Kern at medium weight sits in the confident middle ground between a startup's playful type and an enterprise's conservative system sans. Below heading sizes, the tracking relaxes and the font becomes a quiet, efficient reading companion at weight 400. Apercu Mono Pro appears in code snippets and technical labels, reinforcing the developer-facing identity.

What anchors the system is the restraint of the orange. `{colors.primary}` is the only persistent chromatic signal in an otherwise achromatic palette — it appears on the primary CTA, the logo mark, links, and critical UI accents. Cloudflare uses orange-tinted ambient shadows (`rgba(255,80,10,0.06)`) behind key feature cards, casting a barely-perceptible warm glow that echoes the brand color without screaming it. This technique — color in shadow rather than on surface — is the system's most distinctive optical signature.

**Key Characteristics:**
- FT Kunst Grotesk weight 500 with negative letter-spacing (-1.4px at 56px) — authority without aggression
- Signature orange `{colors.primary}` as the single chromatic anchor in an otherwise achromatic palette
- White + soft gray canvas alternation (`{colors.background}` / `{colors.surface}`) for section rhythm without dark drama
- Orange-tinted ambient shadows on feature cards — color hidden in depth, not on surface
- Dual-mode sections: light gray standard, deep charcoal (`{colors.surface-dark}`) for dark hero moments
- Apercu Mono Pro for code blocks and technical labels
- Tight radius vocabulary: 3–8px for functional UI, pill reserved for badges/tags
- Near-invisible card shadows (0.02–0.03 opacity) — elevation whispered, not announced
- Product-category color system via CSS custom properties for security, storage, media, AI, compute

## Colors

### Canvas & Surfaces
- **White** (`{colors.background}`): Primary page background for light sections.
- **Soft Gray** (`{colors.surface}`): Alternating section backgrounds, card surfaces — the quiet default.
- **Dark Charcoal** (`{colors.surface-dark}`): Hero sections, contrast moments, dark-mode cards.
- **Near Black** (`{colors.surface-darker}`): Deepest dark surfaces, code block backgrounds.

### Brand Accent
- **Cloudflare Orange** (`{colors.primary}`): The entire chromatic identity. CTA buttons, logo, links, focus rings.
- **Orange Muted** (`{colors.primary-muted}`): Darker orange for hover states and text accents where full orange is too vivid.
- **Orange Container** (`{colors.primary-container}`): Tinted badge backgrounds — the orange at whisper strength.
- **Orange Hover** (`{colors.primary-hover}`): Darkened CTA hover state.

### Text / Ink
- **Near Black** (`{colors.ink}`): All primary headings and body text. Not pure black — a softened #262626.
- **Mid Gray** (`{colors.ink-secondary}`): Secondary body copy, captions, metadata.
- **White** (`{colors.ink-inverted}`): Text on dark sections.

### Semantic
- **Teal** (`{colors.success}`): Positive/secure states — particularly for the SASE product line.
- **Red** (`{colors.error}`): Error, security violations.
- **Amber** (`{colors.warning}`): Warning states.
- **Info Blue** (`{colors.info}`): Informational and compute-product highlights.

### Borders & Shadows
- **Standard Border** (`{colors.border}`): Card outlines, input borders, table dividers.
- **Soft Border** (`{colors.border-soft}`): Subtle section and component dividers.
- **Shadow Orange** (`{colors.shadow-orange}`): Orange-tinted ambient glow used behind hero cards.
- **Shadow Soft** (`{colors.shadow-soft}`): Near-invisible neutral lift for standard cards.

## Typography

### Font Family
- **Primary**: `FT Kunst Grotesk` (self-hosted), closest Google Font: `DM Sans`, with fallbacks: `system-ui, -apple-system, sans-serif`
- **Monospace**: `Apercu Mono Pro` (self-hosted), with fallbacks: `ui-monospace, SFMono-Regular, Menlo, monospace`

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 56px — billboard headlines, hero sections |
| `display` | 48px — major feature headings |
| `heading-section` | 32px — section titles |
| `heading-sub` | 29px — sub-section headings, card titles |
| `body-large` | 19px — hero sub-copy, feature descriptions |
| `body` | 16px — standard reading text |
| `body-medium` | 16px weight 500 — emphasized labels, active nav |
| `nav-link` | 14px weight 500 — navigation links |
| `button-ui` | 14px weight 500 — buttons and interactive labels |
| `caption` | 12px — badges, metadata, timestamps |
| `mono-body` | 14px Apercu — code samples, terminal output |
| `mono-caption` | 12px Apercu — inline code, technical labels |

### Principles
- **Medium weight as identity**: Weight 500 throughout headings — neither bold nor light. FT Kunst Grotesk weight 500 communicates substance without requiring visual shouting.
- **Compression at scale**: Negative tracking from -1.4px at 56px to -0.48px at 19px, easing to 0 at 16px body — the tracking breathes as the scale descends.
- **Two families, clear roles**: FT Kunst Grotesk for all human-readable content; Apercu Mono Pro exclusively for technical/code contexts.
- **Restrained weight variation**: Only weights 400 and 500 in active use — there is no bold in the functional system, only medium and regular.

## Layout

### Spacing System
The complete spacing scale lives in the `spacing:` token block above. Base unit is **8px**. Scale from 4px micro-details through 80px section gutters.

### Grid & Container
- Max content width: approximately 1280px
- Standard sections: centered 12-column grid
- Feature sections: full-width backgrounds with contained inner grid
- Navigation: sticky with 16px vertical padding and subtle bottom border

### Whitespace Philosophy
- **Section alternation over visual noise**: White and gray sections create rhythm without shadows or borders between sections — the canvas itself is the separator.
- **Generous section padding**: 64–80px vertical padding on major sections communicates enterprise-grade space; not a startup's dense scroll.
- **Cards breathe**: 24px internal padding as standard; icon tiles use 16px tighter treatment.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Section backgrounds, text blocks |
| Whisper (Level 1) | `0 2px 12px rgba(0,0,0,0.02), 0 4px 12px rgba(0,0,0,0.02)` | Standard cards, default surfaces |
| Glow (Level 2) | Whisper + `0 4px 60px rgba(255,80,10,0.06)` | Feature hero cards with orange ambient glow |
| Deep Glow (Level 3) | Whisper + `0 4px 100px rgba(255,80,10,0.10)` | Primary hero feature — maximum orange radiance |
| Inner Highlight | `1px 6px 6px 0px rgba(255,255,255,0.2) inset` | Glass-like inner edge on elevated components |
| Focus Ring | `2px solid {colors.focus-ring}` | Keyboard focus on all interactive elements |

**Shadow Philosophy**: Cloudflare uses orange-branded shadows as a stealth branding mechanism. Standard cards use near-invisible neutral shadows (2–3% opacity) that provide only the faintest lift. Feature and hero cards upgrade to orange-tinted ambient glows — at 6–10% orange opacity, barely perceptible but unmistakably warm. The shadows echo the brand color without competing with it on surface. Combined with white inset highlights, the effect is a luminous quality, as though light is being processed through the component rather than just illuminating it.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 3px | Small tags, checkboxes, inline elements |
| `sm` | 4px | Small interactive elements, tabs |
| `md` | 6px | Buttons, inputs, default interactive |
| `lg` | 8px | Cards, containers, feature tiles |
| `xl` | 16px | Image containers, feature section cards |
| `pill` | 9999px | Badges, status pills, emergency link tags |

The shape vocabulary is conservative and functional — small radii communicate reliability rather than playfulness. The jump from `{rounded.lg}` (8px) to `{rounded.pill}` (9999px) is intentional: intermediate radius values don't exist in the system. You're either a card (structural, 8px) or a badge (circular, pill).

## Components

The complete component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Orange fill (`{colors.primary}`), white text, 6px radius. The only active CTA color in the system.
- **`button-primary-hover`** — Darkened orange (`{colors.primary-hover}`) on mouse over.
- **`button-secondary`** — White surface, border in `{colors.border}`, ink text. Paired with primary on hero sections.
- **`button-ghost-dark`** — Dark charcoal surface for buttons on dark-section backgrounds.

### Cards
- **`card`** — Soft gray surface (`{colors.surface}`), 8px radius, minimal lift. The default information container.
- **`card-white`** — White surface card used when sitting on gray sections — the inverse of default.
- **`card-dark`** — Deep charcoal background for dark sections.

### Inputs
- **`input`** — White surface, 4px radius, standard border. Focus state upgrades border to `{colors.primary}`.

### Badges
- **`badge`** — Orange-tinted container (`{colors.primary-container}`) with muted orange text. Full pill radius. Used for product categories and status indicators.

### Navigation
- **`nav-bar`** — Sticky white header with subtle bottom border. FT Kunst Grotesk 14px weight 500 for navigation links. Orange CTA button right-aligned.
- **`link-emergency`** — The orange "Under attack?" pill in the top navigation — a crisis-mode shortcut that doubles as signature interaction detail.

## Do's and Don'ts

### Do
- Use `{colors.primary}` exclusively for primary CTAs, links, and critical interactive accents — it is the only chromatic color in the UI layer
- Apply orange-tinted shadows behind hero feature cards to create warm ambient glow that echoes brand identity
- Alternate white and soft-gray sections (`{colors.background}` / `{colors.surface}`) for visual rhythm — avoid adding additional background colors
- Use FT Kunst Grotesk weight 500 for all headings with negative tracking; relax tracking to 0 at body size
- Use Apercu Mono Pro only for technical/code content — never mix it with general UI text
- Keep shadows at near-invisible opacity (0.02–0.10) — the orange glow is the upper limit, not the default
- Use `{rounded.pill}` exclusively for badges and tags — cards and buttons use structural radii only
- Apply 3px (`{rounded.xs}`) for small UI chrome, 8px (`{rounded.lg}`) for card containers

### Don't
- Don't introduce additional chromatic accent colors into UI chrome — product category colors exist in CSS variables but are not UI system colors
- Don't use orange on orange — always pair `{colors.primary}` with white or dark backgrounds
- Don't increase shadow opacity beyond 0.10 — the brand glow system is a whisper, not a shout
- Don't use weight 700 or higher — the system tops at weight 500 for all text
- Don't use pill radius on buttons — `{rounded.md}` (6px) is the button shape. Pill is for badges only
- Don't place dark cards on dark sections without sufficient ink-inverted contrast
- Don't use FT Kunst Grotesk without negative tracking at display sizes — zero tracking makes the font look generic
- Don't rely on border-only card treatment for dark sections — use `{colors.surface-dark}` as background fill

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <400px | Single column, collapsed nav, full-width buttons |
| Mobile Large | 400–600px | Standard mobile, hero text scales down to 32px |
| Tablet | 600–768px | 2-column feature grids, expanded padding |
| Desktop Small | 768–925px | Full navigation visible, 3-column grids |
| Desktop | 925–1280px | Full layout, max-width container active |
| Large Desktop | >1280px | Centered with generous outer margins |

### Touch Targets
- Buttons: 10px 20px padding provides comfortable tap targets
- Navigation links: 14px with generous spacing — minimum 44px height
- Card tiles are full-clickable regions with appropriate spacing between

### Collapsing Strategy
- Hero: 56px display → 32px heading on mobile; maintains negative tracking proportionally
- Navigation: horizontal with mega-menu → hamburger icon
- Feature grids: 3-column → 2-column → single column stacked
- Dark sections maintain full-width treatment; only inner content compresses
- Section spacing: 80px → 48px → 32px as viewport shrinks

### Image Behavior
- Product screenshots maintain border treatment at all sizes
- Hero graphics (3D renders, network visualizations) may simplify or hide at mobile widths
- Logo grid (partner/customer logos) transitions from grid to horizontal scroll at mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (white) / `{colors.surface}` (soft gray)
- Primary text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Brand accent: `{colors.primary}` (orange)
- Border: `{colors.border}`
- Dark section: `{colors.surface-dark}`
- CTA: `{colors.primary}` with white text

### Example Component Prompts
- "Create a hero section on white background. Headline at 56px FT Kunst Grotesk weight 500, line-height 0.99, letter-spacing -1.4px, color `{colors.ink}`. Sub-copy at 19px weight 400, line-height 1.20, `{colors.ink-secondary}`. Primary button: `{colors.primary}` fill, white text, 14px weight 500, 6px radius, 10px 20px padding. Secondary button: white background, `{colors.border}` border, same type and radius."
- "Design a feature card: `{colors.surface}` gray background, 8px radius, 24px padding. Add orange ambient glow shadow: `0 4px 60px rgba(255,80,10,0.06), 0 2px 12px rgba(0,0,0,0.02)`. Heading at 29px FT Kunst Grotesk weight 500, letter-spacing -0.74px, `{colors.ink}`. Body at 16px weight 400, `{colors.ink-secondary}`, line-height 1.50."
- "Build an orange CTA button: `{colors.primary}` background, white text, 14px FT Kunst Grotesk weight 500, 6px border-radius, 10px 20px padding. Hover state: `{colors.primary-hover}` background. Focus: 2px solid `{colors.focus-ring}` outline."
- "Create a product badge: `{colors.primary-container}` background, `{colors.primary-muted}` text, 9999px border-radius, 4px 10px padding, 12px FT Kunst Grotesk weight 500."
- "Design a sticky navigation bar: white background, subtle bottom border `{colors.border-soft}`. Logo left. Center links at 14px FT Kunst Grotesk weight 500, `{colors.ink}`. Right: Login link (`{colors.ink-secondary}`) + 'Start building' orange button (`{colors.primary}`, 6px radius, 10px 20px)."
- "Create a dark section with card: `{colors.surface-dark}` section background. White card (`{colors.background}`) or matching dark card (`{colors.surface-dark}`), 8px radius, 24px padding. All text in `{colors.ink-inverted}`. Use Apercu Mono Pro for any code or technical label, 14px weight 400."

### Iteration Guide
1. Start with the canvas choice: white (`{colors.background}`) for informational sections, soft gray (`{colors.surface}`) for feature grids, charcoal (`{colors.surface-dark}`) for hero moments
2. Orange (`{colors.primary}`) appears once per section — on the primary CTA. Resist adding it as decoration
3. Typography tracking must scale with size: -1.4px at 56px, -1.2px at 48px, -0.8px at 32px, 0 at 16px and below
4. Shadow glow formula: standard cards = neutral whisper; hero cards = add orange ambient layer at 0.06–0.10 opacity
5. Radius is structural: 6px for interactive, 8px for containers, pill for badges only — no 12px, 16px, or 20px in primary UI
6. Weight never exceeds 500 — if emphasis is needed, use size increase or color change, not weight increase
7. The orange glow shadow behind hero cards is the single most distinctive rendering detail — include it on any featured component

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Cloudflare. Brand names and trademarks belong to their respective owners.