Cloudflare Design System

Overview

Cloudflare's design language is built on a foundation of confident warmth — a near-neon orange ({colors.primary}) that saturates the hero band and acts as the sole brand voltage across an otherwise restrained palette. The canvas is paper-white ({colors.canvas}), ink is a soft charcoal ({colors.ink}), and the only other chromatic presence is a sharp error red ({colors.error}) reserved for the "Under attack?" sentinel in the navigation bar. This is not a shy brand; it is infrastructure that announces itself through color temperature before a word is read.

The typographic system revolves around STK Bureau Sans, a proprietary geometric-humanist sans-serif that carries the full weight hierarchy from {typography.display-xl} at 64px down to {typography.label-sm} at 13px. Display roles sit at weight 500 with aggressive negative letter-spacing (up to -1.6px on the largest size), creating tightly-set headlines that feel architectural. Body text relaxes to weight 400 but retains the same face, ensuring visual continuity across every content density. A secondary monospace voice — Apercu Mono Pro ({typography.mono}) — handles code snippets, terminal references, and technical annotations at 13px.

Shape language is dominated by the pill: {rounded.pill} (9999px) appears on every button, the event banner, badge labels, and icon containers. Cards and input fields use gentler radii ({rounded.lg} at 8px, {rounded.sm} at 3px), creating a two-tier rounding system that separates interactive controls from container surfaces. Shadows are unusually warm-toned — even the elevation layers carry orange-tinted diffusion ({extensions.shadows.md}, {extensions.shadows lg}), binding depth treatment back to brand color rather than neutral grayscale.

The hero band is the system's signature moment: full-viewport orange wash with centered white typography, an overlaid event announcement pill, and a single white CTA button ({component.hero-cta-primary}). Below the fold, the page alternates between {component.section-white} and {component.section-soft} bands, creating a subtle zebra rhythm that guides the eye downward without jarring transitions.

Key Characteristics:

• Single brand color ({colors.primary} — #ff5e1f) applied at full saturation on hero, CTAs, links, and focus rings — never desaturated, never pastel.
• Proprietary typeface STK Bureau Sans across all roles; weight 500 for anything heading-like, weight 400 for body and UI.
• Pill-shaped buttons ({rounded.pill}) as the universal interactive shape; no rectangular or squircle variants.
• Warm-toned shadow system where elevation carries orange diffusion instead of neutral gray.
• Two-surface alternation ({colors.canvas} / {colors.surface-soft}) for below-the-fold sections.
• Event banner component ({component.event-banner}) with transparent background and white text floating above hero.
• "Under attack?" navigation link in error red ({colors.under-attack}) as the only non-brand chromatic accent.
• Monospace fallback ({typography.mono}) using Apercu Mono Pro for all technical/code contexts.
• Transition easing locked to cubic-bezier(0.19, 1, 0.22, 1) — an expressive ease-out curve felt across color, opacity, and transform changes.

Colors

Brand & Accent

• Primary ({colors.primary} — #ff5e1f): Cloudflare's signature orange. Saturates the hero band background, fills primary button surfaces, colors inline links, and tints focus rings. This is the single voltage color in the entire system.
• Primary Hover ({colors.primary-hover} — #ff7038): Lightened orange for hover states on buttons and interactive elements.
• Primary Active ({colors.primary-active} — #e55218): Darkened orange for pressed/active states.
• Primary Subtle ({colors.primary-subtle}): 5% opacity orange used as background tint for code inline blocks and very light decorative fills.
• Primary Soft ({colors.primary-soft}): 15% opacity orange powering label badge backgrounds and subtle highlight zones.
• Primary Medium ({colors.primary-medium}): 30% opacity orange for medium-intensity tinting on overlays and decorative elements.
• Primary Strong ({colors.primary-strong}): 50% opacity orange used for text rendering on certain semi-transparent contexts.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white baseline surface. Used for the main page background, navigation bar, card interiors, and button backgrounds in secondary/outline variants.
• Surface Soft ({colors.surface-soft} — #fdfdfc): Near-white (1-unit warmth offset from pure white). Powers alternating section bands below the hero and subtle card backgrounds.
• Surface Neutral ({colors.surface-neutral} — #f0f0f0): Light gray used for outlined button borders, divider lines, and neutral card backgrounds.
• Surface Elevated ({colors.surface-elevated} — #ffffff): White surface with elevated shadow treatment for dropdowns, modals, and floated cards.
• Hero Surface ({colors.hero-surface} — #ff5e1f): Full-saturation orange filling the entire hero viewport band. Text on this surface always uses {colors.body} (#ffffff).

Text & Ink

• Ink ({colors.ink} — #262626): Deep charcoal — the primary text color on white and light surfaces. Used for headlines, body copy, navigation links, and button text on light backgrounds.
• Body on Canvas ({colors.body-on-canvas} — #262626): Alias for ink when explicitly referencing body text rendered on {colors.canvas}.
• Body ({colors.body} — #ffffff): Pure white — the mandatory text color on {colors.hero-surface} and any orange-tinted background. Never use dark text on orange.
• Muted ({colors.muted} — #707070): Medium gray for secondary text, captions, footer content, and de-emphasized UI labels.
• Muted Alt ({colors.muted-alt} — #727272): Slightly warmer gray variant appearing in specific subdued-text contexts.
• Muted Strong ({colors.muted-strong} — #cccccc): Light gray for disabled text, placeholders, and very low-emphasis content.
• On Primary ({colors.on-primary} — #ffffff): White text guaranteed AA-compliant against {colors.primary}. Used on all orange-filled buttons and orange badges.
• On Dark ({colors.on-dark} — #ffffff): White text for any dark or saturated background context.

Hairlines & Borders

• Hairline ({colors.hairline} — #f0f0f0): Light gray border color for outlined buttons, input fields, card borders, and dividers.
• Hairline Soft ({colors.hairline-soft}): Semi-transparent version of hairline for subtle separators.
• Border Focus ({colors.border-focus} — #ff5e1f): Orange focus ring color for keyboard-navigable inputs and interactive elements.

Semantic

• Error ({colors.error} — #ed1641): Sharp red used exclusively for the "Under attack?" navigation indicator and error states.
• Error Soft ({colors.error-soft}): 10% opacity red tint for error background surfaces (toast containers, validation error zones).
• Link ({colors.link} — #ff5e1f): Inline link color — identical to primary, reinforcing brand color as the navigational signal.
• Link Hover ({colors.link-hover} — #e55218): Darkened orange for link hover states.
• Under Attack ({colors.under-attack} — #ed1641): Red link color for the security status indicator in top navigation; semantically distinct from regular links.

Typography

Font Family

The system is built entirely on STK Bureau Sans, a proprietary sans-serif font family served via self-hosted OpenType files (STKBureauSans-Book.otf at weight 400, STKBureauSans-Regular.otf at weight 500, plus italic variants). This is a geometric-humanist design with slightly squared proportions and tight character fit. It serves every role in the system — from 64px display headlines to 13px UI labels — creating absolute typographic consistency. The fallback stack is "STK Bureau Sans", sans-serif.

A secondary typeface, Apercu Mono Pro, handles all monospace needs: code snippets, terminal commands, technical identifiers, and data values. It is a clean monospace with slightly rounded terminals that harmonizes with the geometric quality of STK Bureau Sans. Served as Apercu Mono Pro with monospace fallback.

An additional font family, FT Kunst Grotesk, is declared in the font-face rules (weights 400 and 500) but does not appear in the extracted type scale for the visible page; it may serve sub-pages or documentation surfaces not captured in this screenshot.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 64px | 500 | 1.0 | -1.6px | Largest display headline (not visible in hero but declared in system) | | {typography.display-lg} | 56px | 500 | 0.99 | -1.4px | Hero headline — "Everything we learned..." | | {typography.title-md} | 48px | 500 | 1.0 | -1.2px | Section headlines below the fold | | {typography.title-sm} | 32px | 500 | 1.0 | -0.8px | Card titles, sub-section headings | | {typography.heading-md} | 18px | 500 | 1.2 | -0.45px | Small headings, card category labels | | {typography.body-md} | 19.2px | 400 | 1.2 | -0.48px | Hero subheadline, lead paragraph text | | {typography.body-sm} | 16px | 400 | 1.5 | -0.16px | Standard body copy, card descriptions, navigation items | | {typography.caption} | 14px | 400 | 1.15 | -0.14px | Captions, fine print, metadata | | {typography.button} | 16px | 500 | 1.0 | 0 | Button labels, CTA text, nav action text | | {typography.nav-link} | 14px | 500 | 1.0 | 0 | Top navigation menu items | | {typography.mono} | 13px | 400 | 1.2 | 0 | Code inline, technical annotations, terminal text | | {typography.label-sm} | 13px | 500 | 1.0 | 0 | Badge labels, tag text |

Principles

The Cloudflare type system trusts size and tight letter-spacing to create hierarchy rather than weight contrast. Both display and body roles stay within the 400–500 weight range — there is no bold (700) anywhere in the extracted scale. Instead, the 56px hero headline ({typography.display-lg}) carries -1.4px letter-spacing, pulling characters so close they almost touch, which creates a dense, architectural block of text that reads as "headline" purely through spatial compression. Body text at {typography.body-md} (19.2px) is already larger than many systems' base size, giving paragraphs presence without needing weight.

Negative letter-spacing scales proportionally with size: -1.6px at 64px, -1.4px at 56px, -1.2px at 48px, -0.8px at 32px, and tapering to -0.48px at body size. This is a deliberate optical correction — larger type naturally needs more letter-spacing reduction to avoid looking loose. The system applies it systematically rather than per-instance.

Color also carries hierarchical weight: {colors.body} (white) on {colors.hero-surface} creates maximum contrast for the hero message, while {colors.ink} (charcoal) on {colors.canvas} provides softer reading comfort below the fold. The transition from white-on-orange to charcoal-on-white signals "attention zone → reading zone" without any type-size change.

Uppercase is absent from the extracted text; the voice is sentence-case throughout, even in buttons ("Start building for free", "Contact sales"). Italics are available in the STK Bureau Sans font family (Book Italic is loaded) but do not appear in the visible page's type roles.

Note on Font Substitutes

STK Bureau Sans is a proprietary Cloudflare typeface not available on Google Fonts. For implementation without access to the original .otf files, substitute with Inter (Google Fonts) as the closest match in geometric-humanist character, x-height, and numeral alignment. For Apercu Mono Pro, substitute with JetBrains Mono or Fira Code. Define these as CSS custom properties:

:root {
  --font-sans: 'Inter', 'STK Bureau Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Apercu Mono Pro', ui-monospace, monospace;
}

Layout

Spacing System

• Base unit: 2px ({spacing.xxs}), with the majority of tokens clustering at 4px, 6px, 8px, 10px, 12px, 16px increments.
• Tokens: {spacing.xxs} (2px — micro-adjustments, 1px border offsets), {spacing.xs} (4px — icon gaps, tight internal padding), {spacing.sm} (6px — small element spacing), {spacing.md} (8px — standard internal padding, gap between icon and text), {spacing.lg} (10px — button vertical padding), {spacing.xl} (12px — card internal spacing, form padding), {spacing.2xl} (14px — less common, occasional horizontal padding), {spacing.3xl} (16px — section gutters, card padding), {spacing.4xl} (24px — component-to-component gaps), {spacing.5xl} (32px — large internal padding), {spacing.6xl} (40px — major section-internal spacing), {spacing.7xl} (48px — footer/hero vertical rhythm), {spacing.section} (72px — section-to-section vertical padding).
• Section padding (vertical): {spacing.section} (72px) — applied to {component.section-white} and {component.section-soft} bands. The hero band uses the same value via paddingTop/paddingBottom.
• Card internal padding: {spacing.5xl} (32px) for {component.card} and {component.card-elevated}; {spacing.4xl} (24px) for {component.card-neutral}.
• Gutters: Desktop pages are constrained to 1440px max-width with 8px lateral padding (md:px-2 in Tailwind classes). Content within that constraint uses internal spacing tokens rather than percentage-based gutters.

Grid & Container

• Max content width: 1440px (declared on <main> and <section> elements). This is wider than typical 1200px or 1280px systems, reflecting Cloudflare's preference for expansive, breathable layouts.
• Editorial vs marketplace density: The hero band is fully editorial — single column, centered text, no sidebar. Below-fold sections alternate between editorial center-column layouts and potential multi-column grid patterns (not fully visible in the hero screenshot but implied by the 1440px container width).
• Specific grid behaviors at desktop: The navigation bar uses a flex layout with logo left, menu center, utilities right — no CSS Grid declaration detected, suggesting a flexbox-first approach. Sections below the hero appear to use flex-column stacking with gap-section class for consistent vertical rhythm.
• Hero column splits: The visible hero is single-column centered text with the event banner positioned above the headline. No side-by-side text/illustration split is present in this viewport — the hero is purely typographic on orange ground.

Whitespace Philosophy

Cloudflare's whitespace strategy is editorial-airy with purposeful compression. The hero band breathes with 72px vertical padding on both sides of the headline block, while the headline itself uses aggressive negative letter-spacing to create visual density within that space. Below the fold, sections are separated by the same 72px rhythm, preventing the page from feeling cramped despite the amount of content implied by the 1440px container. Internal component padding (32px on cards, 40px on large blocks) reinforces generosity at the micro level. This is not minimal-whitespace enterprise density; it is confident spaciousness that lets the orange brand color command attention precisely because it isn't competing with visual noise.

Header Architecture

┌──────────────────────────────────────────────────────────────────────┐
│ [☁️ CLOUDFLARE]   Products ▾  Solutions ▾  Resources ▾  Pricing     │  ← 54px height, 1440px max-width
│                                    🛡 Under attack?  Login  [Contact sales]  🔍│
├──────────────────────────────────────────────────────────────────────┤
│                                                                      │
│                                                                      │
│              ┌─────────────────────────────────────────┐             │
│              │ Connect 2026 · The Agentic Conference  →│  ← pill, transparent bg
│              └─────────────────────────────────────────┘             │
│                                                                      │
│         Everything we learned from powering                         │
│         20% of the Internet—yours by default        ← display-lg    │
│                                                                      │
│            One platform for your apps, agents, and workforce.       │
│            Build, secure, and scale without managing infrastructure.│  ← body-md
│                                                                      │
│                   ┌──────────────────────┐                          │
│                   │ Start building for free│  ← hero-cta-primary    │
│                   └──────────────────────┘                          │
│                                                                      │
│                                                                      │
└──────────────────────────────────────────────────────────────────────┘
   ↑ orange hero-surface (#ff5e1f) fills full viewport width          ↑
   72px top padding           72px bottom padding                      ↓

Hero Section

The hero is a single-column centered composition on full-width orange ground:

1. Event banner pill ({component.event-banner}) — floats above the headline, transparent background with 1px border, white text, arrow icon on right.
2. Headline ({component.hero-headline}) — {typography.display-lg}, 56px, weight 500, white, centered, tight letter-spacing (-1.4px). Wraps across two lines in the visible viewport.
3. Subheadline ({component.hero-subheadline}) — {typography.body-md}, 19.2px, weight 400, white, centered, narrower max-width than headline.
4. CTA button ({component.hero-cta-primary}) — white pill button with dark ink text, centered below subheadline.

There is no illustration, product mockup, or image column in this hero — it is purely typographic brand statement. The orange background extends edge-to-edge with no container constraining its width.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | Flat (0) | No shadow, {colors.canvas} or transparent background | Navigation bar on white, static text, flat buttons | | Hairline outline | 1px {colors.hairline} border, no shadow | Outlined buttons ({component.button-outline}), input fields, event banner | | Inset highlight | {extensions.shadows.inset-highlight} — white inner glow + faint outer drop | Special button treatments (glassmorphism-adjacent) | | Soft elevation | {extensions.shadows.sm} — subtle neutral drop | Floating cards, dropdown panels, tooltips | | Medium elevation | {extensions.shadows.md} — warm orange-tinted diffusion (60px spread) | Featured cards, elevated surfaces on white | | Strong elevation | {extensions.shadows.lg} — intense orange-tinted glow (100px spread) | Modals, promotional callouts, hero-adjacent floating elements | | Focus ring | {extensions.shadows.focus-ring} — 1px orange inset | Keyboard focus state on interactive elements |

Philosophy: Cloudflare's depth system is warmly layered rather than neutrally graded. Where most systems apply cool-gray or blue-tinted shadows for elevation, Cloudflare diffuses orange into its drop shadows at medium and strong levels. This binds the depth vocabulary back to brand color, making elevated elements feel like they're glowing with ambient brand energy rather than floating in neutral space. The inset-highlight shadow adds a glass-like interior reflection to certain buttons, suggesting a frosted-glass material metaphor that complements the warm outer glow.

Flat surfaces dominate — the navigation, hero band, and most section backgrounds are shadow-free. Depth is reserved for components that must visually "lift" from their surroundings: cards, modals, and promotional elements.

Decorative Depth

The hero band features a gradient glow at the bottom edge — a soft yellow-orange radiance that fades upward, suggesting light emanating from below the viewport. This is implemented as a CSS gradient overlay (likely a linear-gradient or radial-gradient with orange-yellow stops at low opacity) positioned absolute at the bottom of the hero section with significant blur. It creates the impression that the orange hero surface is illuminated from beneath, adding atmospheric depth beyond what flat color alone can achieve.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 3px | Input fields, code inline blocks, subtle containers | | {rounded.DEFAULT} | 4px | Default radius (less common; pill dominates) | | {rounded.md} | 6px | Neutral cards, small containers | | {rounded.lg} | 8px | Primary cards, elevated containers | | {rounded.xl} | 12px | Large feature cards (potential) | | {rounded.pill} | 9999px | All buttons, badges, event banner, icon circles | | {rounded.full} | 9999px | Avatar circles, perfectly round elements |

The shape system is bimodal: nearly every interactive element uses {rounded.pill} (the extreme 9999px value that produces perfect capsule shapes), while container surfaces cluster in the 3–8px range. This creates a visual grammar where "you can press this = round" and "this holds content = gently rounded." There are no intermediate radii like 16px or 20px in the extracted data — the system commits to the pill/gentle dichotomy rather than offering a continuous spectrum.

Photography Geometry

No photography is visible in the hero screenshot — the hero is purely typographic on colored ground. Based on the component system, imagery (when present on other pages) would likely be contained within {component.card} or {component.card-elevated} surfaces with {rounded.lg} (8px) corner treatment, maintaining consistency with the container shape language. Full-bleed imagery would align with the 1440px max-width container and potentially use {rounded.xl} or no radius at all for edge-to-edge treatments.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The primary call-to-action button. Background {colors.primary} (full orange), text {colors.on-primary} (white), type {typography.button} at 16px/500, rounded {rounded.pill} (perfect capsule), padding {spacing.lg} {spacing.5xl} (10px vertical × 40px horizontal). This is the conversion button — used for "Start building for free" in the hero and any primary action site-wide. On active/press, it shifts to {component.button-primary-active} with {colors.primary-active} (darkened orange). Includes backdrop-blur-md and transition-[scale,translate] with 160ms duration for micro-interactions.

{component.button-primary-active} — Pressed state of the primary button. Background darkens to {colors.primary-active} (#e5521f). All other properties inherit from {component.button-primary}. Implement scale transform (typically scale(0.97)) on press per the transition-[scale,translate] declaration in extracted classes.

{component.button-secondary} — White-filled button for secondary actions. Background {colors.canvas}, text {colors.ink}, same type and rounding as primary. Used where a primary action exists nearby and this button should recede visually. Active state is {component.button-secondary-active} with {colors.surface-neutral} background.

{component.button-outline} — Transparent button with 1px {colors.hairline} border. Background transparent, text {colors.ink}, rounded {rounded.pill}, padding 10px all sides. Appears in the navigation area as a bordered option alongside ghost buttons. Active state {component.button-outline-active} fills with {colors.surface-neutral}.

{component.button-ghost} — Borderless transparent button. Background transparent, text {colors.ink}, rounded {rounded.pill}, padding {spacing.md} {spacing.xl} (8px × 16px). Used for "Login" and lightweight navigation actions. Active state {component.button-ghost-active} shows {colors.surface-soft} background.

{component.button-ghost-active} — Pressed ghost button state. Gains {colors.surface-soft} background fill while retaining rounded pill shape.

{component.button-icon-only} — Square icon button (40×40px). Background transparent, text/color inherits from context (typically {colors.ink}), rounded {rounded.pill} (produces a circle). Used for the search trigger (🔍) in the navigation bar.

{component.hero-cta-primary} — Specialized white CTA button for the hero band. Background {colors.canvas} (white), text {colors.ink} (charcoal), distinguishing it from the generic {component.button-secondary} by its semantic role as the hero's conversion point. Same pill shape and proportions as primary button but inverted color relationship — it "pops" against the orange hero ground specifically.

{component.nav-button-outline} — Navigation-specific outlined button. Appears as "Contact sales" in the top nav — bordered pill with transparent background, {colors.ink} text, {typography.nav-link} sizing (14px).

{component.nav-button-ghost} — Navigation-specific ghost button. Appears as "Login" — borderless, transparent, smaller padding than general-purpose ghost buttons.

Cards & Containers

{component.card} — Standard content card. Background {colors.surface-soft} (#fdfdfc), text {colors.ink}, type {typography.body-sm}, rounded {rounded.lg} (8px), padding {spacing.5xl} (32px). The workhorse container for feature descriptions, pricing tiers, and content blocks below the hero.

{component.card-elevated} — Elevated card with shadow treatment. Background {colors.surface-elevated} (white), same typography and padding as {component.card}, but carries {extensions.shadows.md} or {extensions.shadows.lg} for visual lift. Used for featured content, promotional cards, or elements that need to stand out from the page flow.

{component.card-neutral} — Gray-background card for de-emphasized content. Background {colors.surface-neutral} (#f0f0f0), rounded {rounded.md} (6px), padding {spacing.4xl} (24px). Slightly tighter radius and padding signal lower visual priority.

{component.event-banner} — Transparent pill-shaped announcement banner floating above the hero headline. Background transparent, text {colors.body} (white), type {typography.caption} (14px/400), rounded {rounded.pill}, padding {spacing.lg} {spacing.4xl} (10px × 24px). Contains event title, date range, and an arrow icon ({component.event-banner-icon}). Has a 1px border (visible in screenshot as subtle white/clear outline).

{component.event-banner-icon} — Arrow icon inside the event banner. Size 20px, color {colors.body} (white). Positioned at the right end of the event banner pill.

{component.label-badge} — Small pill label for categorization. Background {colors.primary-soft} (15% orange), text {colors.primary} (orange), type {typography.label-sm} (13px/500), rounded {rounded.pill}, padding {spacing.xs} {spacing.lg} (4px × 10px). Used for "New", "Beta", or category tags.

{component.code-inline} — Inline code/technical reference styling. Background {colors.primary-subtle} (5% orange tint), text {colors.ink}, type {typography.mono} (13px Apercu Mono Pro), rounded {rounded.sm} (3px), padding 2px 6px. Wraps short code tokens, variable names, or CLI commands within prose.

Inputs & Forms

{component.text-input} — Standard text input field. Background {colors.canvas}, text {colors.ink}, type {typography.body-sm} (16px/400), rounded {rounded.sm} (3px), padding {spacing.md} {spacing.lg} (8px × 10px), height 44px. Bordered with 1px {colors.hairline}. Used for search fields, email captures, and form entries.

{component.text-input-focus} — Focused input state. Background remains {colors.canvas}, gains {extensions.shadows.focus-ring} (1px orange inset) as focus indicator. Border may shift to {colors.border-focus} orange.

Navigation

{component.top-nav} — Main navigation bar on white/canvas pages. Background {colors.canvas}, text {colors.ink}, type {typography.nav-link} (14px/500), fixed height 54px. Contains logo (left), menu items (center), utility actions (right). Max-width 1440px, horizontally centered.

{component.top-nav-transparent} — Navigation variant when overlaid on the orange hero. Background transparent, text {colors.on-primary} (white) for readability against {colors.hero-surface}. Same height and structure as {component.top-nav}.

{component.nav-logo} — Cloudflare logo (cloud icon + wordmark) in the navigation bar. Text color matches nav context ({colors.ink} on white, {colors.on-primary} on orange).

{component.nav-link} — Standard navigation menu item. Background transparent, text {colors.ink}, type {typography.nav-link}, padding {spacing.md} {spacing.lg}. Includes chevron/down-arrow indicator for dropdown items ("Products ▾", "Solutions ▾", "Resources ▾").

{component.nav-link-dark} — Navigation link variant for transparent/nav-on-hero context. Text {colors.on-primary} (white) instead of ink.

{component.nav-link-underline} — Special navigation link with red underline/accent color. Used for "Under attack?" — text color {colors.under-attack} (#ed1641), making it the only chromatic nav item.

{component.search-trigger} — Search icon button in the navigation bar. 40×40px square (renders as circle due to {rounded.pill}), transparent background, {colors.ink} icon color. Triggers search overlay/modal.

Section Bands

{component.hero-band} — Full-viewport hero section. Background {colors.hero-surface} (orange), text {colors.body} (white), padding 72px vertical × 8px horizontal. Contains event banner, headline, subheadline, and CTA. Spans full browser width beyond the 1440px content container.

{component.section-white} — Standard content section on white. Background {colors.canvas}, text {colors.ink}, padding {spacing.section} (72px) vertical. Used for primary content bands below the hero.

{component.section-soft} — Alternating content section on off-white. Background {colors.surface-soft}, text {colors.ink}, padding {spacing.section} vertical. Creates zebra rhythm with {component.section-white}.

{component.footer-band} — Page footer. Background {colors.canvas}, text {colors.muted} (gray), type {typography.caption}, padding {spacing.7xl} (48px) vertical. Contains legal links, copyright, and secondary navigation.

Typography Components

{component.link-inline} — Inline text link within prose. Background transparent, text {colors.link} (orange), type {typography.body-sm}. Hover state (not documented) would use {colors.link-hover}.

Do's and Don'ts

Do

• Do use {colors.primary} (#ff5e1f) as the single brand color for all CTAs, links, focus indicators, and the hero background — never substitute grays or blues for brand moments.
• Do apply {typography.display-lg} (56px/500/-1.4px letter-spacing) to the hero headline and reserve {typography.title-md} (48px/500/-1.2px) for section headlines below the fold.
• Do use {rounded.pill} (9999px) for every button, badge, and icon circle — the capsule shape is the universal interactive signal in this system.
• Do set hero text to {colors.body} (pure white #ffffff) when rendering on {colors.hero-surface} — dark text on orange fails accessibility and violates the design intent.
• Do alternate between {component.section-white} and {component.section-soft} for below-the-fold content bands to create rhythmic visual separation without heavy dividers.
• Do apply warm-toned shadows ({extensions.shadows.md} or {extensions.shadows.lg} with orange diffusion) to elevated cards rather than neutral gray drops.
• Do use {typography.mono} (Apercu Mono Pro, 13px) with {component.code-inline} background styling for any code, CLI commands, or technical tokens within prose.
• Do maintain 72px ({spacing.section}) vertical padding between major sections — this is the system's breathing room constant.
• Do render the "Under attack?" navigation link in {colors.under-attack} (red #ed1641) to preserve its semantic urgency distinct from normal navigation links.
• Do use {typography.body-md} (19.2px/400) for lead/subheadline text — it is intentionally larger than standard body to carry emphasis without weight change.
• Do constrain page content to 1440px max-width centered, with 8px lateral padding on the container for mobile-edge safety.

Don't

• Don't use weight 700 (bold) anywhere in the type system — the hierarchy peaks at weight 500, and going heavier breaks the designed voice.
• Don't apply {colors.primary} as a background to more than one major band per page — the hero owns the orange saturation; elsewhere it is an accent, not a surface.
• Don't mix radius values arbitrarily — commit to {rounded.pill} for interactives and {rounded.lg}/{rounded.sm} for containers; intermediate values like 16px or 20px don't exist in this system.
• Don't replace STK Bureau Sans with system sans-serif without adjusting letter-spacing values — the negative spacing is calibrated to this typeface's metrics.
• Don't add gradient overlays to the hero band beyond the existing bottom-edge glow — the orange surface is meant to read as flat, confident color, not a complex gradient composition.
• Don't use {colors.muted-strong} (#cccccc) for body text — it is reserved for disabled states and placeholders; readable body text must be {colors.ink} or darker.
• Don't make buttons rectangular or squircle-shaped — the pill ({rounded.pill}) is non-negotiable for all clickable actions in this design language.
• Don't apply cool-gray shadows to elevated elements — the orange-tinted shadow tokens ({extensions.shadows.md}, {extensions.shadows.lg}) are intentional brand-binding choices, not accidents.
• Don't reduce the hero headline below 48px ({typography.title-md}) on any viewport — the typographic impact depends on scale; if space is constrained, allow line-wrapping rather than size reduction.
• Don't use {colors.error} (#ed1641) for anything other than the "Under attack?" indicator and actual error states — it is a semantic alarm color, not a decorative accent.
• Don't implement hover states as color-only changes — the extracted CSS includes transition-[scale,translate] on buttons, indicating micro-scale transforms are part of the interaction model.

Motion & Animation

Transition Tokens

--transition-color: color 0.2s cubic-bezier(0.19, 1, 0.22, 1),
                    background-color 0.2s cubic-bezier(0.19, 1, 0.22, 1),
                    border-color 0.2s cubic-bezier(0.19, 1, 0.22, 1),
                    outline-color 0.2s cubic-bezier(0.19, 1, 0.22, 1);
--transition-all: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
--transform: transform 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--opacity: opacity 0.15s ease-out,
           opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1);
--fade-in-slow: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;

Keyframe Animations

• float — Gentle vertical oscillation for decorative elements (hero background accents, illustration components).
• bounce-in — Elastic entrance animation for toast notifications and modal appearances.
• shimmer — Horizontal sheen sweep for loading skeleton placeholders.
• scroll-fade-x-left / scroll-fade-x-right — Directional fade-in triggered on scroll-into-view for content reveals.
• marquee / infinite-scroll — Continuous horizontal scrolling for ticker-style content (partner logos, testimonial bars).
• canvas-fade-in — Full-section opacity fade for hero and band entrances.
• success-check-pop — Scale-bounce animation for confirmation checkmarks.
• skeleton — Pulsing opacity for loading placeholder blocks.
• rdp-slide_in_left/right, rdp-fade_in/out — Date-picker panel transitions (react-day-picker library animations).
• refresh — Rotation animation for refresh/spinner indicators.
• right — Directional slide (name suggests left-to-right motion).
• toast-bump / clipboard-toast-bump — Micro-bounce for toast notification entrance.

Interaction Patterns

• Button press: Scale-down transform (scale(0.97) or similar) over 160ms with cubic-bezier(0.25, 0.46, 0.45, 0.94) easing, combined with color transition to active state. Extracted classes show active:scale-90 on some icon buttons.
• Scroll-triggered reveal: Sections below the hero animate in with fade-in class and duration-2000 ease-out timing (2 seconds), with staggered delay-100ms between sequential sections. This creates a cascading entrance as the user scrolls.
• Focus rings: Interactive elements gain a 1px orange inset shadow ({extensions.shadows.focus-ring}) on keyboard focus, transitioning over 200ms.
• Hover lift: Cards and elevated elements likely gain shadow intensification on hover (inferred from shadow token progression, though explicit hover CSS was not captured).
• Navigation transparency switch: The top nav transitions from {component.top-nav-transparent} (over hero) to {component.top-nav} (white, scrolled) with a 200ms background-color transition.
• Group-reveal icon buttons: Some icon-only buttons are opacity-0 group-hover:opacity-100 — they appear only when parent container is hovered, fading in over 200ms.

Imagery Style

• Hero imagery: The visible hero is purely typographic — no illustration, photography, or 3D render. The entire visual impact comes from the orange color field, white type hierarchy, and the bottom-edge gradient glow.
• Brand mark: The Cloudflare logo (visible in the nav) is a simplified cloud shape in orange paired with "CLOUDFLARE" wordmark in {colors.ink} — flat, vector, no gradients or effects.
• Icon style: Icons (Lucide library) are stroke-based, 1.5–2px stroke width, rendered in currentColor. They are geometric, slightly rounded at terminals, and aligned to a 24px grid (with 16px and 20px variants for compact contexts).
• Event banner icon: The arrow icon inside the event banner pill is a simple right-facing chevron/arrow in white stroke.
• Decorative elements: The hero contains an SVG-based background pattern (detected in the DOM as an absolutely-positioned <svg>) — likely a dot-grid or subtle geometric texture overlaid on the orange at very low opacity, adding tactile depth without visual noise.
• Photography inference: While not visible in the hero, Cloudflare's broader design language typically uses product interface screenshots with {rounded.lg} corners, subtle drop shadows, and occasionally isometric 3D illustrations for infrastructure diagrams. These would be contained within {component.card-elevated} surfaces.
• Gradient treatment: The hero bottom-edge glow is the only gradient in view — a warm yellow-to-transparent radial or linear fade suggesting upward light emission. Gradients are used sparingly as atmospheric accents, not as primary surface treatments.

Icon System

• Library: Lucide (detected via iconLibs: ["lucide"] in framework analysis and class naming conventions).
• Specific icons observed:
  • Cloud (brand logo mark)
  • Chevron down (navigation dropdowns: Products ▾, Solutions ▾, Resources ▾)
  • Shield with heartbeat/signal ("Under attack?" indicator)
  • Search magnifying glass (search trigger button)
  • Arrow right (event banner CTA arrow)
  • Additional Lucide icons inferred for sub-pages: external-link, check, x, menu/hamburger, user, mail
• Treatment: Stroke-based (not filled), currentColor inheritance, 1.5–2px stroke weight, geometric construction with slightly rounded joints and caps. No solid/fill variants in the extracted UI.
• Size alignment: Navigation icons (search, etc.) render at 16–20px; the event banner arrow is ~20px; icon-only buttons ({component.button-icon-only}) contain 20–24px icons centered in 40×40px circular hit areas.
• Text proximity: Icons adjacent to text (nav links with chevrons, event banner with arrow) use {spacing.md} (8px) gap between icon edge and text baseline.

Recommended Frontend Stack

- Framework:      Next.js (App Router) or Remix — Cloudflare's production stack leans modern React
                 with SSR/SSG; Tailwind detection confirms utility-class approach
- Styling:        Tailwind v3/v4 (confirmed by extracted class names: `flex-col`, `gap-section`,
                 `animate-in`, `fade-in`, `backdrop-blur-md`, `max-w-full`, `pointer-events-none`)
- Fonts:          Self-hosted OTF/WOFF2 files (STKBureauSans-Book.otf, STKBureauSans-Regular.otf,
                 Apercu Mono Pro.woff2, Kunst Grotesk.woff2) served from /fonts/ path;
                 fallback to Inter (Google Fonts) + JetBrains Mono for development
- Animation:      Tailwind-built-in transitions + CSS keyframes (no GSAP/Framer Motion required
                 based on extracted transitions; all animations are CSS-native)
- Icons:          Lucide React (@lucide/react) — confirmed by framework detection
- Component lib:  Custom components (no shadcn/radix detected in class patterns);
                 headless UI primitives likely for dropdowns/date-pickers (react-day-picker
                 classes present in keyframe names)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Nav collapses to hamburger; hero headline scales down; single-column everything; padding reduces | | Tablet (sm) | 640–768px | Nav may show partial menu; hero headline wraps more; 2-column grids possible | | Tablet (md) | 768–1024px | Full nav visible; hero maintains 56px headline but with more wrap; 2–3 column content grids | | Desktop (lg) | 1024–1280px | Optimal nav layout; hero headline near-full 56px impact; 3–4 column grids | | Wide (xl) | > 1280px | 1440px container max-width engaged; full design as shown in screenshot |

Touch Targets

• {component.button-primary} / {component.hero-cta-primary}: Padding 10px × 40px yields minimum 44px height (passes WCAG AAA); actual rendered height ~44–48px with text — compliant.
• {component.button-ghost} (Login): Padding 8px × 16px — may fall slightly below 44px; recommend increasing vertical padding to 12px for mobile touch compliance.
• {component.search-trigger}: 40×40px — meets WCAG AAA 44×44 minimum exactly.
• {component.nav-link}: Padding 8px × 10px — text-only, relies on line-height for touch area; recommend wrapping in larger tap target or increasing padding to 12px 16px on mobile.
• {component.text-input}: Height 44px — meets WCAG AAA minimum.

Collapsing Strategy

• Navigation bar: At md: breakpoint and below, the full horizontal nav (Products/Solutions/Resources/Pricing) collapses behind a hamburger menu. The "Under attack?", Login, Contact Sales, and Search utilities may remain visible or move into the menu. The 54px height is maintained across breakpoints.
• Hero headline: {typography.display-lg} (56px) on desktop scales down to {typography.title-md} (48px) or {typography.title-sm} (32px) on mobile via responsive type classes. Letter-spacing scales proportionally. Line count increases from 2 to 3–4 lines.
• Event banner: May hide or truncate on narrow viewports, or reduce padding from 10px × 24px to 8px 16px.
• CTA button: Maintains pill shape but may reduce horizontal padding from 40px to 24px on mobile. Stays full-width or centers with max-width constraint.
• Section padding: {spacing.section} (72px) reduces to 48px or 36px on mobile via responsive padding utilities (pt-[72px] md:pt-[72px] pattern suggests desktop-first with mobile overrides).
• Grid columns: Any multi-column content grids (feature cards, pricing tiers) collapse to single-column stack on mobile with flex-col direction (detected in the gap-section flex flex-col class on main content wrapper).

Image Behavior

• Hero gradient glow: The bottom-edge orange-yellow glow is position: absolute with full-width coverage; it scales with viewport width and maintains position relative to hero band bottom edge. No srcset or art direction needed — it's a CSS gradient, not a raster image.
• Background SVG pattern: The hero's decorative dot-grid/geometric SVG is absolutely positioned, w-[1480px] wide, centered with -translate-x-1/2. On mobile, it may be hidden (hidden class detected on parent) or reduced in scale to avoid performance overhead on small screens.
• Product screenshots (sub-pages): Would use object-cover or object-contain within {component.card-elevated} containers, scaling down proportionally while maintaining {rounded.lg} corner clipping.

Iteration Guide

1. Initialize with Tailwind — Set up a Tailwind v3/v4 project and extend the theme with every token from the YAML frontmatter. Map {colors.primary} to --color-primary, {typography.display-lg} to fontSize: '56px', etc. Never hard-code a hex or pixel value that has a corresponding token.
2. Build the hero first — Implement {component.hero-band} as a full-viewport <section> with {colors.hero-surface} background. Add the {component.event-banner} pill (absolute or flow positioned above), {component.hero-headline} in {typography.display-lg}, {component.hero-subheadline} in {typography.body-md}, and {component.hero-cta-primary} white button. Center everything horizontally with mx-auto and constrain text max-width to ~800px for readability.
3. Implement the navigation dual-state — Build {component.top-nav} (white background, ink text) and {component.top-nav-transparent} (transparent, white text). Use JavaScript intersection observer or scroll listener to swap classes when the hero scrolls out of view. Include the "Under attack?" link in {colors.under-attack} red.
4. Create the button system — Generate {component.button-primary}, {component.button-secondary}, {component.button-outline}, and {component.button-ghost} as reusable components. Each accepts as="a" or as="button" prop. Apply transition-[scale,transform,color,background-color] with the extracted 200ms/160ms timings. Add -active state variants as separate style objects (not nested).
5. Build the section alternation pattern — After the hero, stack {component.section-white} and {component.section-soft} alternating sections using the 72px ({spacing.section}) vertical padding constant. Wrap each in a max-w-[1440px] mx-auto container.
6. Implement cards with warm shadows — Create {component.card}, {component.card-elevated}, and {component.card-neutral}. Apply {extensions.shadows.md} (orange-tinted) to elevated variant. Ensure {rounded.lg} (8px) corners and 32px internal padding.
7. Add scroll-triggered animations — Use the Intersection Observer API (or a library like framer-motion's useInView) to trigger fade-in class addition on sections as they enter viewport. Apply duration-2000 ease-out with delay-100ms staggers between consecutive sections, matching the extracted animate-in fade-in transition-opacity delay-100 duration-2000 ease-out classes.
8. Set up fonts correctly — Self-host the OTF/WOFF2 files in /fonts/ directory (or use the CDN paths if available). Declare @font-face for STK Bureau Sans (400 Book, 500 Regular, 400 Italic) and Apercu Mono Pro (400). Set font-display: swap for performance. Define CSS variables --font-sans and --font-mono pointing to these families.
9. Add the keyframe animations — Copy the extracted @keyframes declarations for float, shimmer, marquee, scroll-fade-x-left/right, canvas-fade-in, bounce-in, and skeleton into your global CSS. Attach them via Tailwind's animate- prefix or arbitrary values (animate-[float_3s_ease-in-out_infinite]).
10. Run linting — After implementation, run npx @google/design.md lint DESIGN.md (or equivalent validator) to catch broken token references ({colors.nonexistent}), orphaned tokens (defined but never referenced in body prose), and contrast-ratio warnings (especially {colors.primary} on {colors.primary}, or {colors.muted} on {colors.canvas}).

Font Setup for Development:

If you cannot access Cloudflare's proprietary font files, substitute in your tailwind.config.js or global CSS:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --font-sans: 'Inter', 'STK Bureau Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Apercu Mono Pro', ui-monospace, monospace;
}

Note: Inter has slightly different metrics than STK Bureau Sans — you may need to reduce negative letter-spacing values by 10–15% to avoid Overlap with the substitute font. Test at {typography.display-lg} (56px) specifically.

Known Gaps

• Hover state styling: Per the no-hover policy, all :hover pseudo-class styles (background color shifts, shadow elevation changes, border color darkening) are inferred from -active states and transition declarations but not explicitly extractable from a static screenshot.
• Loading/skeleton states: The shimmer and skeleton keyframes exist in the CSS, but the full skeleton component (pulse animation + placeholder geometry) is not visible in the hero viewport and could not be fully specified.
• Form validation states: Beyond {component.text-input-focus}, error state (red border, error icon, helper text) and disabled state (reduced opacity, pointer-events-none) are not represented in the visible UI.
• Dropdown/menu panels: Navigation dropdowns (Products ▾, Solutions ▾, Resources ▾) are present in the nav but their expanded panel styling (background, shadow, item hover, keyboard navigation) is not visible.
• Date picker component: The rdp-slide_* and rdp-fade_* keyframes indicate a react-day-picker date selection component exists somewhere on the site, but it does not appear in the hero screenshot.
• Mobile navigation: The collapsed/hamburger navigation state, slide-out drawer, and mobile menu styling are completely absent from the desktop-focused screenshot.
• Dark mode tokens: The entire specification describes the light mode (extensions.mode: "light"). Cloudflare may have a dark mode (common for developer tools), but no dark-mode color values, surface inversions, or text-color swaps were extractable from this page.
• FT Kunst Grotesk usage: This font family is declared in @font-face rules (weights 400, 500) but does not appear in any extracted typography role for the visible page. It may serve a sub-domain (docs.cloudflare.com, dash.cloudflare.com) or a page section not captured here.
• Exact oklab color conversions: Several colors in the extracted CSS use oklab() color function (e.g., oklab(0.686959 0.161794 0.130017 / 0.3) for muted white text). These were converted to approximate hex values for the design token system, but the exact perceptual intent of the oklab values (especially the alpha-channel variants) may differ slightly from the sRGB hex approximations provided.
• Pixel-exact gradient glow: The hero bottom-edge glow gradient's exact color stops, angle, and blur radius are implemented as an SVG or CSS gradient in the DOM but the precise values (which appear to involve yellow-orange interpolation at low opacity) were not fully decomposable from the extracted data structure.