Not the white-and-orange Cloudflare of previous years: the site is now a warm near-black canvas where every neutral is browned — #151414 page, #191817 cells, #2a2927 hover — and the text is a warm off-white #f0e3de rather than pure white. Colour arrives as one large architectural block: a full-bleed #ff5e1f panel with a 16px radius and a fine dot-matrix texture, carrying the entire hero. FT Kunst Grotesk is capped at weight 500 and set with line-height below 1.0 at -2.5% tracking, every control is a 9999px pill, and structure is drawn entirely with 1px 12.5%-alpha hairlines, corner tick marks and dotted vertical rail gutters. There are no drop shadows anywhere — the computed census returns only transparent values — and motion is a 200ms expo-out on colour with slow 2s opacity scroll reveals.
Browse Cloudflare in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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: Tailwindmd:breakpoint observed only. Dashboard: not captured (needs login).
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.
| 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 |
| 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 |
| 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 |
| 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 |
| 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.
--font-sans: "FT Kunst Grotesk", sans-serif--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).
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.