Home
DESIGN.mdStar on GitHub
Copied!

Cloudflare

Build for the agent era — one platform for your apps, agents, and workforce.

Colors
Brand primary
Tangerine#F6821FPrimary brand, CTAs, accents
Ruby#FF6633Dawn gradient start
Mango#FBAD41Dawn gradient end
Secondary — diagrams & illustrations only
Lemon#FFD43CDiagrams only
Blueberry#3E74FFDiagrams only
Raspberry#CE2F55Diagrams only
Logomark
Cloud body#FF5F08Main cloud shape
Cloud puff#FF9910Upper puff shape
Firewall action colors
Allow#16a34aPermitted traffic
Block#9f1239Denied traffic
Challenge#92400eCAPTCHA / managed
Skip#1e40afSkip / JS challenge
Typography — Inter
eyebrow
Region: Earth
11px600+5% lsALL CAPS
headline
Build for the agent era
32px600−3% ls
h1-live
Everything we learned from powering 20% of the Internet—yours by default
22px600−3% ls
body
One platform for your apps, agents, and workforce.
15px400−2% ls
label
workers.cloudflare.com
13px500−3% lsaccent
code
ip.src eq 203.0.113.0/24 and cf.threat_score gt 30
13pxmono400
Components
Buttons
Inputs
Firewall Action Badges
Allow Block Challenge JS Challenge Managed Challenge Skip
Toggles
Block OWASP Top 10 threats
Rate limiting rules
Bot score < 10 → Challenge
Signature Component — Firewall Rules Manager
example.com
Active zone · Cloudflare One · Pay-as-you-go
Security rules
WAF
DDoS
Bots
Rate limiting
Exposed credentials
Custom rules
# Rule name Expression Action Requests Enabled
No rules match your search
Try a different name or expression, or add a new rule.
New custom rule
Guardrails
DO
Use Tangerine (#F6821F) in every layout — even a small hit anchors the brand
Pair orange generously with white space to create Cloudflare's bold, simple impression
Use Inter as the only typeface for all brand communications
Apply the Eyebrow style (all caps, 600, +5% tracking) to introduce section topics
Use the Dawn gradient (Ruby → Tangerine → Mango) on hero and marketing backgrounds
DON'T
Use secondary colors (Lemon, Blueberry, Raspberry) as primary graphics or button fills
Use black as a background color — reserved for type only
Stretch, recolor, or modify the cloud logomark shape or proportions
Use any typeface other than Inter for brand communications
Use orange text on white for small body copy — contrast is insufficient at small sizes