Skip to main content
ai2.design
Back to Gallery

Cloudflare · Full Page

Cloudflare

Open-web infra'nın enterprise eyaleti — cream-white canvas, FT Kunst Grotesk + Apercu Mono Pro duet, scarce orange brand accent, hairline-bordered editorial plates. Premium grotesque on cream.

cloudflare.com/Added
Cloudflare Full Page — desktop screenshot

Editorial disclaimer

Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.

Curator verdict

Why we catalogued it?

Cloudflare is the rare open-web infrastructure landing that decided enterprise authority and indie craft could share the same canvas. We catalogued it because most internet-infra companies default to one of two playbooks: corporate navy or developer brutalism. Cloudflare picked a third path — FT Kunst Grotesk as the body typeface, Apercu Mono Pro for technical inline moments, and a saturated brand orange #ff7038 deployed against a near-white #f0f0f0 ground with deliberate restraint. The result reads as the rare brand that thinks both about RFC implementations and about the readability of a body paragraph at 16px. If you are shipping technical infrastructure and want to be respected by both the network engineer and the design director, this is the lodestar.

Design decisions observed

  • FT Kunst Grotesk as primary typeface (~6 weights catalogued) — Klim Type Foundry's grotesque, signals serious typography culture without industry-default Inter.
  • Apercu Mono Pro for technical/code moments — paired with Kunst Grotesk creates a clean grotesque + mono duet.
  • Orange brand accent #ff7038 deployed scarcely — appears just enough to anchor the identity without overwhelming the neutral palette.
  • #f0f0f0 cream-grey hairline border (~2,127 surface refs) as primary structural device — the page is fundamentally a grid of hairlined plates, not a flowing composition.
  • Light primary canvas (#fffbf5 warm cream) with dark inversion zones (#000000) used for hero anchors — black is punctuation, not the default.
  • Container ladder 320/512/700/1080/1200/1480 — multiple nested widths for editorial sidebar-and-body layouts.
  • Framer Motion + 6 catalogued gradients — restrained, signature timing.

What to study

  • How a typeface choice signals brand maturity — FT Kunst Grotesk is licensed, deliberate, premium. The page reads as expensive software because it refused the free-font shortcut.
  • Hairline borders as primary structural device — Cloudflare uses 2,127 surface references to #f0f0f0 borders, meaning the layout is a grid of plates rather than a flowing column. Steal the discipline of treating borders as content, not chrome.
  • Mono + grotesque duet (Apercu Mono Pro + Kunst Grotesk) — most tech brands ship one family. The duet signals taste without ostentation.

What to avoid

  • Don't lift FT Kunst Grotesk without licensing — Klim foundry, not free, and the cohesion depends on owning multiple weights.
  • Don't paint surfaces in #ff7038 — orange's power is in its rarity. Filling buttons collapses the brand into 'generic orange tech'.
  • Don't drop the mono pairing — Apercu Mono is part of the duet; replacing with a humanist mono breaks the editorial tension.

Taste notes

The page feels like the inside of a beautifully constructed legal contract that also happens to ship network-edge functions — every hairline border is intentional, every paragraph is letter-spaced for screen reading, every accent is scarce enough to feel like a citation rather than a decoration. Cloudflare understood that infrastructure is invisible by definition, and the brand can only make itself visible through typographic discipline. The black hero zones punctuate without dominating.

Lineage & references

  • Direct heir to the Klim Type Foundry typographic wave that includes parts of Stripe (Sohne), Mailchimp, and the broader 2024+ premium-grotesque-on-cream aesthetic — Cloudflare is the infrastructure-tier entrant.
  • Standing shoulder-to-shoulder with the modern open-web infra peer cohort (Vercel, Fastly, Akamai's recent rebrand) — but Cloudflare's mono-grotesque duet is the most premium-feeling.
  • Part of the IBM Plex / premium-mono editorial revival that runs through MoMA digital, Tufte's quantitative-display heirs, and the broader print-influenced web aesthetic.

Design language brief

Paste-ready for your agent.

A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.

Philosophy

Cloudflare's design language is hairline-grid structural confidence with editorial typographic discipline. Cream-white ground (#fffbf5/#f0f0f0) carries the brand; FT Kunst Grotesk handles body and display; Apercu Mono Pro handles code and metadata; a single saturated orange #ff7038 provides scarce signal; black inversion zones punctuate. The page reads like a beautifully bound contract for the open internet.

Main prompt

Use this capture as a design language transfer brief for my project. Adopt the palette (#f0f0f0 cream-grey hairline borders as primary structural element, #262626 primary ink text, #000000 inversion zone background, #ff7038 orange brand accent used scarcely, #fffbf5 warm cream secondary text/surface, #fdfdfc near-white elevated, #727272 muted grey, #9616ff purple secondary accent rare, #b52831 deep red rare accent, #326dec deep blue rare accent), typography stack (FT Kunst Grotesk for body 14-19.2px and display, Apercu Mono Pro 12-16px for code/metadata), spacing scale 2/4/6/8/10/12/14/16, container ladder 320/512/700/1080/1200/1480 (multiple nested widths for editorial sidebar-and-body layouts), custom breakpoints sm=400 md=768 lg=1024 xl=1280 (note: sm=400), Framer Motion + 6 catalogued gradients at cubic-bezier(0.4, 0, 0.2, 1) easings. Treat orange #ff7038 as scarce signal. Apply the language, not the source brand's copy.

Overview

Layout
Hairline-plate editorial flow — cream canvas with #f0f0f0 borders threading every layout cell; multiple container widths for sidebar-and-body nests.
Content width
Container ladder 320/512/700/1080/1200/1480 — nested editorial widths.
Framing
Beautifully bound contract — cream canvas, scarce orange, mono+grotesque duet.
Grid strength
Explicit hairline grid — borders are layout, not decoration.

Color philosophy

Cream-white canvas with #f0f0f0 hairline borders threading the layout; #262626 ink primary text; #ff7038 orange brand accent scarce; black inversion zones for punctuation.

Mode strategyLight-first canvas with black inversion zones; potential dark variant compatible.
  • #fffbf5 warm cream primary surface
  • #f0f0f0 cream-grey hairline border (~2,127 surface refs)
  • #262626 primary ink text
  • #000000 inversion zones (hero anchors, key callouts)
  • #ff7038 orange brand accent — scarce signal
  • #fdfdfc near-white elevated surface
  • #727272 muted grey for tertiary text
  • #9616ff #b52831 #326dec — rare secondary accents (purple/red/blue)

Gradients (paste-ready)

6 gradients catalogued — atmospheric depth zones, never decorative chromatic

Typography rules

  • FT Kunst Grotesk for body 14-19.2px and all display moments
  • Apercu Mono Pro for code, inline mono, metadata 12-16px
  • Weight ladder 400 body, 500 emphasis
  • Letter-spacing 0 — Kunst Grotesk's optical defaults
  • Line-height 1.5 body, 1.05-1.1 display

Spacing rules

  • 4px base unit, scale 2/4/6/8/10/12/14/16
  • Section vertical rhythm 80-120px
  • Card padding 24-32px, CTA 12-14px vertical / 16-20px horizontal

Design tokens

Palette, type, and space — all agent-readable.

12 colors · hex / rgb / hsl / oklch

Save PNG
  • backgroundcolor-border-100
    40%
    • HEX#F0F0F0
    • RGBrgb(240, 240, 240)
    • HSLhsl(0, 0%, 94%)
    • OKLCHoklch(95.51% 0.0000 89.76)
  • foregroundcolor-foreground-200
    28%
    • HEX#262626
    • RGBrgb(38, 38, 38)
    • HSLhsl(0, 0%, 15%)
    • OKLCHoklch(26.86% 0.0000 89.76)
  • foregroundcolor-black
    14%
    • HEX#000000
    • RGBrgb(0, 0, 0)
    • HSLhsl(0, 0%, 0%)
    • OKLCHoklch(0.00% 0.0000 0.00)
  • accentcolor-accent-200
    11%
    • HEX#FF7038
    • RGBrgb(255, 112, 56)
    • HSLhsl(17, 100%, 61%)
    • OKLCHoklch(71.14% 0.1877 40.38)
  • backgroundcolor-node-bg
    4%
    • HEX#FFFBF5
    • RGBrgb(255, 251, 245)
    • HSLhsl(36, 100%, 98%)
    • OKLCHoklch(98.95% 0.0090 78.28)
  • backgroundcolor-background-200
    1%
    • HEX#FDFDFC
    • RGBrgb(253, 253, 252)
    • HSLhsl(60, 20%, 99%)
    • OKLCHoklch(99.38% 0.0013 106.42)
  • foregroundcolor-text-tertiary
    1%
    • HEX#727272
    • RGBrgb(114, 114, 114)
    • HSLhsl(0, 0%, 45%)
    • OKLCHoklch(55.21% 0.0000 89.76)
  • accentcolor-media-100
    0%
    • HEX#9616FF
    • RGBrgb(150, 22, 255)
    • HSLhsl(273, 100%, 54%)
    • OKLCHoklch(56.16% 0.2894 300.57)
  • accentcolor-security-200
    0%
    • HEX#B52831
    • RGBrgb(181, 40, 49)
    • HSLhsl(356, 64%, 43%)
    • OKLCHoklch(50.88% 0.1766 23.21)

Inspector

Tab through the captured artifacts.

Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.

Page structure

Semantic hierarchy at a glance.

Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 8 nodes captured; depth capped at 6 for readability.

  • body
  • ├─ div (×2)
  • ├─ Main
  • │ └─ div
  • │ ├─ Section (×10)
  • │ └─ [+5 more]
  • └─ div (×2)
  • └─ Footer

Accessibility

WCAG contrast matrix.

108 combinations · 48 pass AA · 24 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.

PreviewfgbgRatioNormalLargeAPCA LcContext
Aa
#000000#FDFDFC20.63AAAAAA+105foreground on background
Aa
#FDFDFC#00000020.63AAAAAA-107background on foreground
Aa
#000000#FFFBF520.37AAAAAA+104foreground on background
Aa
#FFFBF5#00000020.37AAAAAA-106background on foreground
Aa
#F0F0F0#00000018.43AAAAAA-98background on foreground
Aa
#000000#F0F0F018.43AAAAAA+97foreground on background
Aa
#262626#FDFDFC14.87AAAAAA+101foreground on background
Aa
#FDFDFC#26262614.87AAAAAA-103background on foreground
Aa
#262626#FFFBF514.68AAAAAA+100foreground on background
Aa
#FFFBF5#26262614.68AAAAAA-102background on foreground

Image strategy

Asset loading & format policy.

Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.

Total12Lazy loaded100%png12
Page type
  • Full Page
Industry
  • developer-tools
  • saas
Theme
  • light
Tags
Added
  • 2026-05-17

Editorial credit

Featured Sponsor slot — your brand here

Dedicated logo placement — no rotation, on every export.

Become a sponsor

COMPARE THIS WITH

Side-by-side reads sharing this design signal.

See also

Adjacent patterns worth studying.

AI2 Design counts anonymous traffic always — no cookies, no identifiers, no fingerprinting. For optional session insights (PostHog, EU region) — page funnel, performance — turn on opt-in analytics below. Cookie policy.