# Cloudflare — Marketing site Design Spec

> Source: cloudflare.com (live DOM, computed styles), 2026-07-20.
> Coverage: home ("Build for the agent era"). Two token layers observed: the page's own
> warm `--color-background-*/foreground-*/accent-*` set, and a shared **kumo** semantic
> layer (`--color-kumo-*`, ~305 vars) used for link/status colours. Responsive: Tailwind
> `md:` breakpoint observed only. Dashboard: not captured (needs login).

## 1. Visual Theme & Atmosphere

A **warm near-black** engineering canvas, not the white-and-orange Cloudflare of previous
years and not a cool blue-black either — every neutral is browned (`#151414`, `#191817`,
`#2a2927`) and the text is a warm off-white `#f0e3de` rather than pure white. The single
signature move is a **full-bleed orange panel** (`#ff5e1f`, `border-radius:16px`, inset
from the page edge on all four sides) that carries the hero — colour arrives as a large
architectural block, never as scattered accents. Structure is drawn with **1px hairlines
at 12.5% foreground alpha** and dotted rail gutters running the full page height, with
corner tick marks where cells meet; there are **no drop shadows anywhere**. Type is FT
Kunst Grotesk at a hard weight ceiling of 500, set very tight (-2.5% at 56px) with
line-height *below* font size on the hero. Controls are all full pills.

Feels: warm-technical, architectural, quietly confident, infrastructural.

## 2. Color Palette & Roles

### Text

| Token | Hex | Role / usage |
|---|---|---|
| `--color-foreground-100/200` | `#f0e3de` | Primary text — warm off-white, body + headings |
| `--color-light-foreground` | `#fffbf5` | Hero headline + text on the orange panel (warmer, brighter) |
| `--color-foreground-300` | `#737373` | Muted / secondary copy, placeholders |
| (on-accent ink) | `#1f1f1f` | Text inside the white hero CTA pill |

### Surfaces

| Token | Hex | Role / usage |
|---|---|---|
| `--color-background-100` | `#151414` | Page canvas (warm near-black) |
| `--color-background-200` | `#191817` | Raised cells, nav bar, fade-out gradients |
| `--color-background-300` | `#2a2927` | Hover fill, chips, inset wells |
| `--color-background-content` | `#1a1a1a` | Content panels |

### Borders

| Token | Value | Role / usage |
|---|---|---|
| `--color-border-100` | `#f0e3de20` → composites `#1e1c1c` | Every hairline, control border, cell divider |
| `--color-border-200` | `#f0e3de` | Full-strength border, hover/active state on controls |

### Accent

| Token | Hex | Role / usage |
|---|---|---|
| `--color-accent-100` | `#ff5e1f` | The brand orange — hero panel fill, primary CTA, logo |
| `--color-accent-200` | `#ff7038` | Accent hover (lighter, never darker) |
| `--color-dark-accent` | `#d63c01` | Pressed / deep orange |

### Semantic (shared kumo layer)

| Token | Hex | Role |
|---|---|---|
| `--text-color-kumo-link` / `-info` | `#50a2ff` | Links, info |
| `--text-color-kumo-success` | `#a4f4cf` | Success |
| `--text-color-kumo-warning` | `#fdc700` | Warning |
| `--text-color-kumo-danger` | `#ff6467` | Danger |

**Rules.** Orange is allowed in exactly three places — the logo, the primary CTA pill and
the hero panel fill — never on text, borders, or as a gradient stop against another hue.
Every neutral is warm-cast; never substitute a grey with equal RGB channels.

## 3. Typography Rules

- Sans: `--font-sans: "FT Kunst Grotesk", sans-serif`
- Mono: `--font-mono: "Apercu Mono Pro", monospace`

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero h1 | 56/55.44px (0.99) | 500 | -1.4px (-0.025em) |
| Section h2 | 48/48px (1.0) | 500 | -1.2px (-0.025em) |
| Card h3 | 18/21.6px (1.2) | 500 | normal |
| Body | 16/24px | 400 | normal |
| UI / nav | 16px | 500 | normal |
| Mono stat | 14px | 400 | -1.4px |

**Patterns.** Weight ceiling is **500** — nothing on the page is 600 or 700; emphasis
comes from size and colour. Display line-height sits at or *below* 1.0. Negative tracking
is applied as a constant -2.5% ratio across the display sizes. No uppercase eyebrows —
labels are sentence case at body size. Tailwind's own scale tokens are re-based small
(`--text-xs:12px · --text-sm:13px · --text-base:14px · --text-lg:16px`).

## 4. Component Stylings

**Primary CTA (nav)** — `background:#ff5e1f; color:#fffbf5; border:1px solid #ff5e1f;
border-radius:9999px; height:35px; padding:6px 12px; font:500 16px;`
hover raises fill to `#ff7038`; `transition:opacity .06s ease-out, transform .06s ease-out`.

**Hero CTA (inverted)** — `background:#fffbf5; color:#1f1f1f; border:1px solid #fffbf5;
border-radius:9999px; height:46px; padding:12px 24px; font:500 16px;`
`transition:scale .16s cubic-bezier(.25,.46,.45,.94)` — it scales, it does not recolour.

**Secondary / outline (Login, Contact sales)** — `background:transparent; color:#f0e3de;
border:1px solid #f0e3de20; border-radius:9999px; height:38px; padding:6px 12px;`
hover promotes the border toward `--color-border-200`.
`transition:color,background-color,border-color .2s ease-out`.

**Nav** — 76px tall, `background:#151414`, wordmark left, centre link cluster with chevron
disclosures, right cluster = "Under attack?" alert link + two outline pills. On scroll it
collapses to a floating minimal bar: logo only + one orange pill.

**Feature cells** — no card background and no shadow: a 3-up grid separated by 1px
`#f0e3de20` hairlines, each cell 24px padded with a 20px stroked outline icon, an 18/500
title and 16/24 `#737373` body; square corner ticks mark the grid intersections.

**Rail gutters** — the left and right page margins are filled with a dotted vertical rail
built from `linear-gradient(rgba(240,227,222,.125) 50%, rgba(0,0,0,0) 50%)`, a
blueprint/technical-drawing edge to the whole page. **Announcement pill** — outline pill
centred on the orange panel, 1px light border, inline underlined "Register" link.

## 5. Layout Principles

Outer frame `max-width:1480px`; content column `1200px`; hero headline capped at `1080px`.
Section padding `64px 32px` (`px-section`). Spacing is Tailwind's 4px base; common gaps
8/12/24/64. Hero anatomy: full-width orange panel inset 8px top / 12px bottom with 16px
radius, announcement pill → 2-line 56px headline → 2-line 16px sub → single centred white
pill CTA. Below the fold the page becomes a hairline grid of equal cells inside the dotted
rails; sections are divided by hairlines rather than by whitespace alone.

## 6. Depth & Elevation

Radius scale (Tailwind v4 tokens): `--radius-xs 2px · sm 4px · md 6px · lg 8px · xl 12px ·
2xl 16px`, plus a full `9999px` pill for every control. Observed radii census: pill (61),
3px, 6px, 4px, 8px, 12px, 16px.

**Shadows: none.** The census returned only transparent shadow values plus one transparent
inset ring (`rgba(255,72,1,0) 0 0 0 1px inset`, an orange focus ring that animates in).
Elevation is fill change plus hairline: `#151414` → `#191817` → `#2a2927`.

## 7. Motion

House transition: `color, background-color, border-color .2s cubic-bezier(.19,1,.22,1)`
(expo-out) — 61 elements. Scroll reveals fade `opacity 2s cubic-bezier(.19,1,.22,1)`, a
deliberately long, soft entrance. The hero CTA uses `scale .16s
cubic-bezier(.25,.46,.45,.94)`. Tailwind default duration is re-based to `.1s`. Nothing
translates far, nothing bounces; the only "fast" motion is the 60ms opacity/transform on
the nav CTA.

## 8. Backgrounds, Effects & WebGL

Flat warm-black fills plus three real effects: (1) the dotted rail gradient
`linear-gradient(rgba(240,227,222,.125) 50%, rgba(0,0,0,0) 50%)` tiled down both gutters;
(2) edge fades `linear-gradient(to left in oklab, rgb(25,24,23) 0%, rgba(0,0,0,0) 100%)`
masking scrolling marquees; (3) a `conic-gradient` sweep used as a rotating ring accent.
The orange hero panel is a **solid fill with a fine dot-matrix texture**, not a gradient.
No WebGL canvas, no background video, no backdrop-filter blur observed.

## 9. Do's and Don'ts

### Do
- Put orange down as one large architectural block (a rounded 16px panel), not as scattered accents.
- Keep every neutral warm-cast (`#151414`/`#191817`/`#2a2927`, text `#f0e3de`).
- Cap font weight at 500 and set display type at line-height ≤ 1.0 with -2.5% tracking.
- Separate everything with 1px `#f0e3de20` hairlines and dotted rail gutters.
- Make every control a full pill; use fill/border change for state, not shadow.
- Use `#fffbf5` (not `#f0e3de`) for text sitting on the orange panel.

### Don't
- Don't render the site light/white — that is the retired Cloudflare marketing look.
- Don't use the legacy orange `#f6821f`; the brand accent is `#ff5e1f`.
- Don't add drop shadows — there are none anywhere on the page.
- Don't use weight 600/700, uppercase eyebrows, or neutral (equal-RGB) greys.
- Don't mix orange with a second accent hue; blue/green/yellow are status colours only.

## 10. Responsive Behavior

Tailwind `md:` (768px) is the load-bearing breakpoint: below it the hero panel loses its
vertical inset (`mt-14 mx-1 px-2` instead of `m-0 p-0`), the 3-up feature grid collapses to
one column, and the centre nav cluster becomes a drawer. Full map: not captured.

## 11. Agent Prompt Guide

- Canvas `#151414` · Text `#f0e3de` · Muted `#737373` · Border `#f0e3de20` · Accent `#ff5e1f`
- Font: "FT Kunst Grotesk", sans-serif · Body: 16/24px · Radius: 9999px control / 16px panel · Control height: 35–46px · Focus: 1px inset ring `#ff4801` · Hover fill: `#ff7038` / `#2a2927`

<cloudflare_design_language>
A warm near-black infrastructure canvas: page `#151414`, panels `#191817`, hover `#2a2927`,
text a warm off-white `#f0e3de` (`#fffbf5` on colour), muted `#737373`. One accent, orange
`#ff5e1f` (hover `#ff7038`), deployed as a single large 16px-radius full-bleed panel behind
the hero plus the primary pill and the logo — never as scattered highlights. Type is FT Kunst
Grotesk with a hard weight ceiling of 500: hero 56px at line-height 0.99 and -1.4px tracking,
h2 48/48, body 16/24, mono Apercu Mono Pro. All controls are 9999px pills, 35–46px tall, 6-12px
padding; secondary is a transparent pill with a 1px `#f0e3de20` border. Structure comes from 1px
12.5%-alpha hairlines, corner tick marks and dotted vertical rail gutters — there are zero drop
shadows; elevation is a fill change. Motion is 200ms expo-out `cubic-bezier(.19,1,.22,1)` on
colour, a 160ms scale on the hero CTA, and slow 2s opacity scroll reveals. Layout: 1480px frame,
1200px content, 64px/32px section padding, 4px spacing base.
Feels: warm-technical, architectural, quietly confident.
Avoid: a white/light canvas, the retired `#f6821f` orange, drop shadows, weight 600+, uppercase
letter-spaced eyebrows, neutral (cool) greys, or a second accent hue.
</cloudflare_design_language>