What is Cloudflare's primary brand color?

Cloudflare's brand voltage is Kumo Brand orange #ff5e1f — a saturated, warm orange wired into the CSS as --color-kumo-brand, --color-accent-100, and --color-multiplayer-orange. Unlike the dev-infra convention of holding the brand color for CTAs and link accents, Cloudflare fills the entire above-fold hero canvas with it; the cream CTA pill #fffbf5 sits on top and inverts the contrast. Across the captured page the brand orange appears 79 times — 52 as text, 12 as border, 10 as background fill, 3 inside gradients.

What typeface does Cloudflare use, and what should I use as a substitute?

Cloudflare's marketing site runs FT Kunst Grotesk for every display, heading, body, and button surface, with Apercu Mono Pro as the second voice for labels, code, and metadata strips. Display headlines sit at 48–56px in weight 500 with tight -1.4px letter-spacing, body at 16px / 400, and monospace at 12–16px / 400. The closest open-source substitute for FT Kunst Grotesk is Inter at 95% line-height; for Apercu Mono Pro use JetBrains Mono or IBM Plex Mono. The display weight of 500 — not 700 — is the move to preserve.

Why does Cloudflare have so many secondary colors if the brand is orange?

The structural-tier colors are not secondary brand accents — they are product-domain identifiers. Compute is blue #0a95ff (--color-compute-100/200), Storage is pink #ee0ddb (--color-storage-100/200), AI is green #00bd7d (--color-ai-200), SASE is teal #0d9488 (--color-sase-100/200). Each appears on the product-platform diagram in section 2 as the color of its respective node category, letting a Compute card sit beside a Storage card without either competing with the brand orange. Outside the diagram these colors are rare; the brand voltage is still singular.

Why is Cloudflare's white not actually white?

Cloudflare's off-white surfaces — the CTA pill in the hero, the body canvas below the fold, the cream text on the orange block — all render as #fffbf5, a warm cream wired into --color-light-foreground, --color-yellow-50, and --color-kumo-neutral-50. The difference from pure #ffffff is small enough that most viewers won't read it as a separate color, but it is consistent across the entire system; the cream signals warmth and softens the saturated orange canvas. The only pure #ffffff in the page is the small set of card surfaces below the fold.

What corner-radius scale does Cloudflare use?

The radius scale is small-step plus pill. 3px appears 60 times on inputs and small chips, 4px 59 times on cards and dropdowns, 6px 35 times on icon buttons, 8px 23 times on larger cards. The hero CTA and the product-category tabs use a fully-rounded pill (rendered in CSS as the maximum representable radius). There is no ladder of 12 / 16 / 20px — the system is binary: small-step rounding everywhere except the two pill surfaces.

Can I use this DESIGN.md to build my own React infra marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Cloudflare's specific moves: full-bleed brand-canvas hero, cream-not-white surfaces, editorial display weight 500, monospace metadata strips, and the product-domain color split. The tokens resolve cleanly without invention. You can also reference values directly: every hex, font name, radius, and spacing value is a quoted value you can paste into Tailwind config or CSS variables. The one move worth borrowing only if you have a strong single brand color is the voltage-as-canvas hero.

Cloudflare Design System

Cloudflare's marketing-site design system as a DESIGN.md file.

About Cloudflare DESIGN.md

Curated by Dov AzencotUpdated May 16, 2026Source cloudflare.com

Web Infrastructure & Hosting
Backend, Database & DevOps

Cloudflare's marketing site does something almost no other dev-infrastructure brand does: it gives the single brand voltage the entire above-fold canvas. The hero on cloudflare.com is a flat block of Kumo Brand orange #ff5e1f, with a 56px FT Kunst Grotesk display headline rendered in cream #fffbf5 (never pure white), and a fully-rounded cream CTA pill centered below. Where Vercel keeps its hero on matte black and Linear leans on a violet-graphite surface ladder, Cloudflare paints the page with the brand color and trusts a single editorial sentence to do the work. The display weight is 500, not 700 — the same restraint Airbnb uses on Rausch, only here the voltage owns the floor instead of accenting it.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 22 color tokens drawn from the 421 CSS custom properties Cloudflare exposes on `:root`, organized into a brand-voltage tier, a product-domain tier (Compute blue, Storage pink, AI green, SASE teal — each wired into its own var family like `--color-compute-100`), a structural tier of cream / ink / hairline tones, and a small semantic set. Ten typography tokens span FT Kunst Grotesk in three display sizes plus body and label tiers, and Apercu Mono Pro in two mono tiers — the latter appearing 138+ times in extracted samples across small-caps labels, footnotes, and code blocks. 18 components cover the hero, the cream-pill CTA, hairline-bordered cards, the orange-fill split panel, the monospace caption strip, the category-tab pill set, and the top-nav.

Feed this file to Claude or Cursor and it will reproduce Cloudflare's specific moves: full-bleed brand canvas instead of held-in-reserve accent, cream-not-white off-canvas, editorial display weight 500, monospace metadata, and the product-domain color split that lets a Compute card sit beside a Storage card without either compromising on the single brand orange. The token references resolve cleanly — `{colors.kumo-brand}` for the voltage, `{colors.cream}` for any "white" surface, `{typography.display-xl}` for the hero — so the AI never has to invent a value. Treat it as a reference rather than a clone target: the one disciplined move worth stealing is the voltage-as-canvas inversion, which only works when you have a brand color this saturated and one sentence this confident.

What makes it distinct

Voltage as canvasKumo Brand #ff5e1f fills the entire above-fold hero rather than appearing as a scarce CTA accent, inverting the dev-infra convention
Editorial display in sans56px FT Kunst Grotesk at weight 500 with -1.4px tracking reads like a magazine dek, not a SaaS hero
Monospace as supporting voiceApercu Mono Pro appears 138+ times for small-caps labels, code, and metadata strips
Five product-domain colorsCompute #0a95ff, Storage #ee0ddb, AI #00bd7d, SASE #0d9488, plus the brand orange, each scoped to its own CSS custom-property family
Cream over pure whitethe off-white canvas and CTA fill is #fffbf5, not #ffffff; a quiet warmth move that runs the entire system

Live at cloudflare.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

cloudflare.com

Explore Cloudflare

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Cloudflare design system FAQ

Common questions about Cloudflare's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Cloudflare — official site

Cloudflare's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.