Skip to content
cloudflare.com logo

Cloudflare

cloudflare.com

“Cloudflare projects a highly professional, infrastructure-grade aesthetic that balances technical authority with modern clarity. The design is clean and functional, utilizing a stark monochrome base punctuated by a vibrant orange accent to signify energy and security without sacrificing readability or seriousness.”

infrastructure
developer-first
authoritative
clean
secure
modern
functional
enterprise

Color Palette

Colors

#ffffff

background

#ffffff

surface

#000000

text

#222222

secondaryText

#222222

muted

Typography

Fonts

Inter

body
400
self-hosted

sans-serif

Inter

heading
510
600
self-hosted

sans-serif

ui-sans-serif

body
400
699
system

system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

h4

The quick brown fox

h5

The quick brown fox

h6

The quick brown fox

Components

Design System

Log in
outline
8px
#000000
card
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px

card
box-shadow

rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.05) 0px 2px 4px -2px

element
box-shadow

rgba(31, 26, 23, 0.18) 0px 10px 25px 0px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px 0px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.05) 0px 2px 4px -2px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

gradient

linear-gradient(to right, rgb(246, 130, 31), rgb(251, 173, 65))...

gradient

linear-gradient(to right, rgb(251, 173, 65), rgb(255, 102, 51))...

Voice & Tone

Personality

Visual Energy

6/10

Design Era

contemporary-minimal

Emotional Tone

reliable-empowering

Target Audience

CTOs, DevOps engineers, security architects, and enterprise decision-makers looking for robust, scalable infrastructure solutions.

Comparable Brands

Vercel
Stripe
Linear
GitHub

Brand Rules

Dos & Don'ts

Do

  • Use Inter font family exclusively: 400 weight for body text and 510/600 weights for headings.
  • Apply sentence-case capitalization to all headings and titles; never use Title Case.
  • Set body text line-height to exactly 24px for optimal readability on light backgrounds.
  • Style primary action buttons as outlines with #ff6633 border, #000000 text, 8px border-radius, and 12px 16px padding.
  • Utilize the orange gradient (linear-gradient to right, #f6821f to #fbad41) sparingly for key highlights or active states, not as a background.
  • Apply subtle, multi-layer shadows to cards (rgba(0,0,0,0.1) 0 4px 6px -1px, rgba(0,0,0,0.05) 0 2px 4px -2px) to create depth without clutter.
  • Maintain a high-contrast monochrome base (#ffffff background, #000000 text) to ensure accessibility and focus.
  • Use imperative, action-oriented verbs in CTAs (e.g., 'Log in', 'Get started') and avoid exclamations or emojis.

Don't

  • Do not use serif fonts or system fallbacks like ui-sans-serif for primary brand typography; stick to self-hosted Inter.
  • Do not use Title Case or ALL CAPS for headings; strictly enforce sentence case.
  • Do not apply heavy drop shadows or blur effects; keep shadows subtle and flat.
  • Do not use emoji in marketing copy or UI elements; the tone is serious and professional.
  • Do not use solid orange backgrounds for primary buttons; the brand prefers outlined styles with orange borders.
  • Do not use playful or casual language; avoid slang, humor, or excessive enthusiasm.
  • Do not mix multiple font families; the brand relies on the versatility of Inter across weights.
  • Do not use rounded corners larger than 8px; keep UI elements compact and precise.

Design Assets

Visual Elements

Cloudflare Color Logo
svg239×54
cloudflare-zero-trust
svg44×43
innovation-intelligence
svg44×43
Deploy Severless Code Icon
svg44×43
Deploy AI on the Edge Icon
svg44×43
Stop DDoS attacks
svg44×43
Block bot traffic
svg44×43
Security Shield Protection Icon
svg71×70
Constellation Icon
svg71×70
Innovation Thinking Icon
svg71×70

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

Download
DESIGN.md not yet generated for this brand.
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md
Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/cloudflare.com \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.

Get started free