Skip to content

Now in the official shadcn registry directory.

Start free
ai2v0.7
Back to gallery
developer tools · saas

Cloudflare

Open-web infrastructure in its enterprise register — cream-white canvas, FT Kunst Grotesk + Apercu Mono Pro duet, a scarce orange brand accent, hairline-bordered editorial plates. Premium grotesque on cream.

cloudflare.comAdded 2026-05-17
Cloudflare - Desktop

Editorial disclaimer

Editorial note

This 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.

Fair Use & Gallery Policy
FreePrompt kit

Copy the full design language into your agent

A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Cloudflare’s language, not just a screenshot.

Paste into your agent. No signup, no cost.
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.
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.

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
  • 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
  • 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
Surface styleHairline-bordered plates. Every card and section uses #f0f0f0 1px border.
  • 0 drop shadow on marketing chrome
  • 1px #f0f0f0 hairline on every plate
  • Inversion zones (#000) flush, no border
  • Hover deepens border tone, no lift

Techniques

Hairline plate

bg #fffbf5 or white, 1px #f0f0f0 border, 8-12px radius, padding 24-32px.

Inversion plate

Pure #000000 surface, white text, no border, used for hero + key callouts.

Radii4 / 8 / 12Icon treatmentStroke 1.5px monoline, baseline-aligned to Kunst Grotesk.Icon setsCustom monoline set
  • Buttons 6-10px radius
  • Cards 8-12px radius
  • Primary CTA (sign up / contact)
    background
    #262626
    textColor
    #fffbf5
    fontFamily
    FT Kunst Grotesk, sans-serif
    fontWeight
    500
    fontSize
    14px
    padding
    12px 20px
    borderRadius
    8px
    shadow
    none
    hover
    background shifts to #000000

    Tailwind

    inline-flex items-center gap-2 rounded-lg bg-[#262626] px-5 py-3 text-sm font-medium text-[#fffbf5] transition-colors hover:bg-black
  • Hairline plate card
    background
    #fffbf5
    border
    1px solid #f0f0f0
    borderRadius
    10px
    padding
    24px
    textColor
    #262626

    Tailwind

    rounded-[10px] border border-[#f0f0f0] bg-[#fffbf5] p-6 text-[#262626]
  • Orange brand accent (callout text)
    color
    #ff7038
    fontFamily
    FT Kunst Grotesk
    fontWeight
    500
    fontSize
    14px

    Tailwind

    text-sm font-medium text-[#ff7038]
  • Mono code inline
    fontFamily
    Apercu Mono Pro, ui-monospace, monospace
    fontSize
    13px
    background
    #f0f0f0
    color
    #262626
    padding
    2px 6px
    borderRadius
    4px

    Tailwind

    rounded bg-[#f0f0f0] px-1.5 py-0.5 font-mono text-[13px] text-[#262626]
LevelsubtleDurations150ms / 300ms

Easings

cubic-bezier(0.4, 0, 0.2, 1)
HoverBackground colour shift on CTAs, Border tone deepens

Scroll patterns

  • Framer Motion fade-in + 12px translate on section entry
  • Motion is editorial pacing, not feature spectacle
  • Hover shifts colour, never position
  • Focus rings: 2px orange ring with 2px offset
  • Active state 95% opacity
Approachmobile-first

Custom: sm=400 md=768 lg=1024 xl=1280 (sm lowered to 400).

  • <400: 16px gutters, single column
  • 400-768: 512px content rail
  • 768-1024: 700px content rail
  • ≥1024: full ladder 1080/1200/1480 nested
  • Body #262626 on #fffbf5 passes WCAG AAA
  • Orange #ff7038 on cream passes AA at 14px+
  • Inversion white on black passes AAA
  • Focus visible always
Next.js (assumed)FT Kunst Grotesk webfontApercu Mono Pro webfontFramer Motion

Typography + hairline grid + scarce orange = identity. No 3D, no Lottie heavy.

  • FT Kunst Grotesk preloaded woff2 (regular + medium)
  • Apercu Mono Pro subsetted for ASCII + operators
  • Framer Motion scoped to section reveals
  • Use FT Kunst Grotesk (or licensed equivalent) for every body moment
  • Pair with Apercu Mono Pro for code/metadata
  • Reserve orange #ff7038 for scarce accent signals
  • Use #f0f0f0 hairline borders to structure every layout cell
  • Don't paint surfaces in orange
  • Don't substitute Inter for Kunst Grotesk
  • Don't remove hairline borders — they are the brand's structural identity
  • Don't lighten the inversion zones to charcoal
  • Light-first canvas with black inversion zones
  • Type stack: FT Kunst Grotesk + Apercu Mono Pro
  • Orange coverage under 5% of pixels per viewport
  • Background dominant: #fffbf5/#f0f0f0 across >60% of surface
  • Font-family grep: FT Kunst Grotesk + Apercu Mono Pro present
  • Hairline border #f0f0f0 frequency: high (>1000 surface refs)
  • Orange #ff7038 usage: text/CTA accent, never as fill backgrounds
  • Container widths: ladder 320/512/700/1080/1200/1480 preserved

Design tokens

Observed token system

Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.

Inspector

Observable layers

Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.

Depth-first walk of the meaningful sections. 8 nodes across 4 levels, shallow to deep by color.

  • body3
    • div (×2)
    • Main1
      • div2
        • Section (×10)
        • [+5 more]
    • div (×2)1
      • Footer

Accessibility

Contrast matrix

108 combinations - 48 pass AA - 24 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.

Normal text passes AAALarge text passes AAA
fg
#000000
bg
#FDFDFC
APCA Lc
+105
Use
foreground on background
Normal text passes AAALarge text passes AAA
fg
#FDFDFC
bg
#000000
APCA Lc
-107
Use
background on foreground
Normal text passes AAALarge text passes AAA
fg
#000000
bg
#FFFBF5
APCA Lc
+104
Use
foreground on background
Normal text passes AAALarge text passes AAA
fg
#FFFBF5
bg
#000000
APCA Lc
-106
Use
background on foreground
Normal text passes AAALarge text passes AAA
fg
#F0F0F0
bg
#000000
APCA Lc
-98
Use
background on foreground
Normal text passes AAALarge text passes AAA
fg
#000000
bg
#F0F0F0
APCA Lc
+97
Use
foreground on background
Normal text passes AAALarge text passes AAA
fg
#262626
bg
#FDFDFC
APCA Lc
+101
Use
foreground on background
Normal text passes AAALarge text passes AAA
fg
#FDFDFC
bg
#262626
APCA Lc
-103
Use
background on foreground
Normal text passes AAALarge text passes AAA
fg
#262626
bg
#FFFBF5
APCA Lc
+100
Use
foreground on background

Images

Image strategy

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

Total images
12
Lazy loaded
100%
Format mix
  • png12 · 100%
Industry
developer-tools
Industry
saas
Theme
Light
Added
2026-05-17
cloudflare.com

FAQ

Questions people ask about Cloudflare

3questions

Answers are pulled from the curator verdict and design brief - the same text your AI agent sees when it paste-reads this page.

Compare this with

Side-by-side reads sharing this design signal.