Skip to content
Browse
Library

Cloudflare. Sunrise on a blueprint.

  • Developer tools
  • Light theme
  • 12 colors
  • 2 typefaces

Cloudflare is a white-canvas infrastructure site drawn like a technical blueprint: a 1200px content column is fenced by 1px #f0f0f0 hairlines and dashed gutter rails, and almost everything inside is flat Paper with Graphite Ink #262626 type. That restraint lets Cloudflare Orange #ff5e1f land hard, as a 16px-rounded hero slab with a pale sunrise glow at its base, a solid orange feature panel, a pricing tab, and a closing call-to-action band. STK Bureau Sans runs the whole page at only 400 and 500, with tight -0.025em tracking on the 56px and 48px headlines, so statements read calm and engineered rather than loud; Apercu Mono Pro appears only inside agent and terminal demos. Buttons are 9999px pills, cards are near-square 3–4px boxes, and depth comes from borders, not shadows.

Visit cloudflare.com
Screenshot of Cloudflare
Captured from cloudflare.com on October 23, 2026

Cloudflare design system

Cloudflare

Brand1

  • Hero slab, call-to-action band, sticky Start building pill, active pricing tab and the solid feature panel — one saturated orange carries the whole identity

Accent3

  • Globe dot-map points and the View docs pill inside the orange band — a half-step lighter so it reads as orange on orange

  • Muted orange status text and loading dots in deploy and agent demos, where full orange would shout

  • Tinted version rows in the deploy list and mono agent-name chips — the 10% orange tint of the brand on Paper

Neutrals6

  • Headlines, navigation, body copy, footer links and line icons — a soft near-black instead of pure #000

  • Label text on the white Start building for free pill inside orange panels

  • Section subheads, card descriptions and pricing subtitles; measured as Graphite Ink at 70% opacity

  • Footer column headings, legal links and small helper text under prices

  • Every 1px solid and dashed rule: grid cells, card frames, pill outlines, gutter rails and divider lines

  • Page canvas, cards and grid cells, the hero CTA pill, and all text set on orange

semantic2

  • P0 incident pills in the problem collage, set on a 10% red tint

  • The Under attack? link and its shield icon in the header — the only red in the chrome

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Pill Black on Cloudflare Orange

5.39 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.