Design teardown
Cloudflare
A white page opened by a large orange stage, with pill actions, tight grotesk headlines, and short support lines.
cloudflare.com
Design character
Orange stage, quiet type
The first view is a rounded orange panel on a white page, with a pale warm glow along its lower edge. After that, the page is mostly white: a centered section title, one support line, then a diagram, a hairline feature row, a logo strip, a quote, a pricing grid, and a closing orange band. Copy is sentence case. Titles are long and tight; support copy is one or two short sentences. Feature names are a few words. Prices lead with a number and a short qualifier. Parenthetical asides sit under titles. The tone is direct, technical, and slightly wry, in the second person, with short clauses rather than long paragraphs.
Typography
One grotesk carries the interface at 400 and 500. Display sizes are large, almost solid leading, and slightly tightened. Body copy is 16px with roomy 24px leading. A mono face appears only in a small live ticker.
Color system
The page is white, near-black, and one orange. Orange fills the large stages and the sticky action. On those stages the main action flips to white. Muted text is a gray mixed from the ink. Hairlines are barely darker than the page.
Spacing and geometry
Spacing follows a 4px rhythm with generous section gaps. Controls are compact. Cards and price cells use 32px padding. The header is 72px tall.
Layout
A centered column on a wide white page. The orange stage is inset and rounded. Later sections alternate a centered title with a full-width diagram, a three-up row, a logo marquee, a four-up price grid, and a footer of text columns.
Motion
Motion is slow and linear for proof, and short for controls. Sections fade in. Logos drift in a long loop. A dotted globe fades in. A headline phrase shimmers. Buttons scale briefly.
UI fingerprint
- Orange stage The first screen is a 16px-radius orange panel, #ff5e1f, with white type and a pale glow at the bottom.
- Inverse pill On that orange, the main action is a white pill with #1f1f1f type. On white, the same role becomes an orange pill.
- Tight grotesk FT Kunst Grotesk at 500, 56px, with -1.4px tracking and leading just under the size.
- Living proof A dotted globe, a slow logo marquee, and a mono ticker keep the middle of the page moving.