W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Cloudflare
Cloudflare, Inc. is a global edge-network and security company whose products span CDN, DNS, DDoS protection, zero-trust networking, and developer-platform services (Workers, R2, D1). The visual identity is built around a single signature color — Cloudflare Orange (#F38020) — paired with a dual-orange gradient and a restrained neutral palette that keeps technical density legible. The voice is engineering-first: measured, technical, optimistic about the open web, and quietly insistent on speed and security as table stakes rather than features.
1 palette 3 fonts 0 assets 6 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/cloudflare/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/cloudflare/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Cloudflare
Cloudflare, Inc. is a global edge-network and security company whose products span CDN, DNS, DDoS protection, zero-trust networking, and developer-platform services (Workers, R2, D1). The visual identity is built around a single signature color — Cloudflare Orange (#F38020) — paired with a dual-orange gradient and a restrained neutral palette that keeps technical density legible. The voice is engineering-first: measured, technical, optimistic about the open web, and quietly insistent on speed and security as table stakes rather than features.
Tags: tech, edge-network, security, infrastructure, cloudflare
Atoms
Palette
Cloudflare · [email protected] · Proprietary — All Rights Reserved
Cloudflare corporate palette anchored on Cloudflare Orange (#F38020) — the signature mark color used across the corporate logo, the marketing site, and the dashboard. Pairs Cloudflare Orange with a deeper Marketing Orange (#FBAD41) for gradients, a near-black for surfaces, and a small set of neutrals used as backgrounds, dividers, and body text.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
cloudflare-orange |
Cloudflare Orange | #F38020 |
marketing-orange |
Marketing Orange | #FBAD41 |
cloudflare-black |
Cloudflare Black | #222222 |
cloudflare-dark-gray |
Cloudflare Dark Gray | #404041 |
cloudflare-gray |
Cloudflare Gray | #808080 |
cloudflare-light-gray |
Cloudflare Light Gray | #D9D9D9 |
cloudflare-off-white |
Cloudflare Off-White | #F6F6F6 |
cloudflare-white |
Cloudflare White | #FFFFFF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
cloudflare-white |
#FFFFFF |
surface |
cloudflare-off-white |
#F6F6F6 |
surface-elevated |
cloudflare-white |
#FFFFFF |
text-primary |
cloudflare-black |
#222222 |
text-secondary |
cloudflare-dark-gray |
#404041 |
text-tertiary |
cloudflare-gray |
#808080 |
primary |
cloudflare-orange |
#F38020 |
primary-hover |
marketing-orange |
#FBAD41 |
accent |
marketing-orange |
#FBAD41 |
accent-hover |
cloudflare-orange |
#F38020 |
warning |
marketing-orange |
#FBAD41 |
warning-hover |
cloudflare-orange |
#F38020 |
error |
cloudflare-orange |
#F38020 |
success |
cloudflare-gray |
#808080 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
cloudflare-black |
#222222 |
surface |
cloudflare-dark-gray |
#404041 |
surface-elevated |
cloudflare-gray |
#808080 |
text-primary |
cloudflare-white |
#FFFFFF |
text-secondary |
cloudflare-light-gray |
#D9D9D9 |
text-tertiary |
cloudflare-gray |
#808080 |
primary |
cloudflare-orange |
#F38020 |
primary-hover |
marketing-orange |
#FBAD41 |
accent |
marketing-orange |
#FBAD41 |
accent-hover |
cloudflare-orange |
#F38020 |
warning |
marketing-orange |
#FBAD41 |
warning-hover |
cloudflare-orange |
#F38020 |
error |
cloudflare-orange |
#F38020 |
success |
cloudflare-light-gray |
#D9D9D9 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
cloudflare-orange |
#F38020 |
on-identity |
cloudflare-white |
#FFFFFF |
primary |
cloudflare-orange |
#F38020 |
primary-hover |
marketing-orange |
#FBAD41 |
accent |
marketing-orange |
#FBAD41 |
background |
cloudflare-white |
#FFFFFF |
surface |
cloudflare-off-white |
#F6F6F6 |
text-primary |
cloudflare-black |
#222222 |
text-secondary |
cloudflare-dark-gray |
#404041 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (3)
colorChoice → logo.mark.fill
- allowed: cloudflare-orange
- forbidden: marketing-orange, cloudflare-black, cloudflare-white
Cloudflare's brand guidelines reserve Cloudflare Orange (#F38020) as the canonical mark color. Marketing Orange is a supporting tone for gradients and illustrations, not the primary mark fill.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo
Cloudflare's brand guidelines explicitly prohibit altering the proportions, color, or orientation of the corporate mark. Use only approved variants on backgrounds with sufficient contrast.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast requirement for body text. Cloudflare Black (#222222) on Cloudflare White satisfies this with ~16:1.
⚠️ warning (1)
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Cloudflare Orange on white is around 3.1:1 — it clears AA-large for headlines and large interactive text but falls short of the AA 4.5 threshold for body-sized text. Use the orange as a headline / CTA color, not for body copy on white.
💡 recommendation (2)
compositionConstraint → roles.colors.primary
- pairsWith: roles.colors.accent
Cloudflare Orange + Marketing Orange is the canonical dual-orange gradient seen across cloudflare.com hero compositions. Pairing them is consistent with the brand's established voice.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.5
Cloudflare's marketing surfaces use Inter for both heading and body, with a clear size differential. Keep headings at least 1.5× body to preserve hierarchy when one family does both jobs.
Provenance
- Source: https://www.cloudflare.com/brand/
- License:
Proprietary — All Rights Reserved - Attribution: Cloudflare and the Cloudflare logo are trademarks of Cloudflare, Inc. All brand colors and identity guidance documented here are derived from Cloudflare's public brand-resource page at cloudflare.com/brand/ and the Cloudflare Brand Guidelines PDF distributed from it.
- Imported:
2026-05-17 - Notes: Brand-atoms' read of Cloudflare's public guidelines. This file is not an official Cloudflare brand document. No assets (logos, wordmarks) are bundled here — Cloudflare's marks are trademarked and must be retrieved directly from cloudflare.com/brand/ under Cloudflare's stated terms.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Cloudflare
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Cloudflare
A clear hierarchy in Cloudflare's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Cloudflare
[email protected]font · heading
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ marketing-orange #FBAD41 background
→ cloudflare-white #FFFFFF identity
→ cloudflare-orange #F38020 on-identity
→ cloudflare-white #FFFFFF primary
→ cloudflare-orange #F38020 primary-hover
→ marketing-orange #FBAD41 surface
→ cloudflare-off-white #F6F6F6 text-primary
→ cloudflare-black #222222 text-secondary
→ cloudflare-dark-gray #404041 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from cloudflare)
Light mode (14 roles)
accent
→ marketing-orange accent-hover
→ cloudflare-orange background
→ cloudflare-white error
→ cloudflare-orange primary
→ cloudflare-orange primary-hover
→ marketing-orange success
→ cloudflare-gray surface
→ cloudflare-off-white surface-elevated
→ cloudflare-white text-primary
→ cloudflare-black text-secondary
→ cloudflare-dark-gray text-tertiary
→ cloudflare-gray warning
→ marketing-orange warning-hover
→ cloudflare-orange Dark mode (14 roles)
accent
→ marketing-orange accent-hover
→ cloudflare-orange background
→ cloudflare-black error
→ cloudflare-orange primary
→ cloudflare-orange primary-hover
→ marketing-orange success
→ cloudflare-light-gray surface
→ cloudflare-dark-gray surface-elevated
→ cloudflare-gray text-primary
→ cloudflare-white text-secondary
→ cloudflare-light-gray text-tertiary
→ cloudflare-gray warning
→ marketing-orange warning-hover
→ cloudflare-orange Rules (6 typed constraints)
error · 3 rules
colorChoice logo.mark.fill allowed cloudflare-orange forbidden marketing-orange, cloudflare-black, cloudflare-white Cloudflare's brand guidelines reserve Cloudflare Orange (#F38020) as the canonical mark color. Marketing Orange is a supporting tone for gradients and illustrations, not the primary mark fill.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo Cloudflare's brand guidelines explicitly prohibit altering the proportions, color, or orientation of the corporate mark. Use only approved variants on backgrounds with sufficient contrast.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast requirement for body text. Cloudflare Black (#222222) on Cloudflare White satisfies this with ~16:1.
warning · 1 rule
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Cloudflare Orange on white is around 3.1:1 — it clears AA-large for headlines and large interactive text but falls short of the AA 4.5 threshold for body-sized text. Use the orange as a headline / CTA color, not for body copy on white.
recommendation · 2 rules
compositionConstraint roles.colors.primary pairsWith roles.colors.accent Cloudflare Orange + Marketing Orange is the canonical dual-orange gradient seen across cloudflare.com hero compositions. Pairing them is consistent with the brand's established voice.
fontPairing typography.heading requires body minSizeRatio 1.5 Cloudflare's marketing surfaces use Inter for both heading and body, with a clear size differential. Keep headings at least 1.5× body to preserve hierarchy when one family does both jobs.
Provenance
- Source
- https://www.cloudflare.com/brand/
- License
Proprietary — All Rights Reserved- Attribution
- Cloudflare and the Cloudflare logo are trademarks of Cloudflare, Inc. All brand colors and identity guidance documented here are derived from Cloudflare's public brand-resource page at cloudflare.com/brand/ and the Cloudflare Brand Guidelines PDF distributed from it.
- Imported
2026-05-17- Notes
- Brand-atoms' read of Cloudflare's public guidelines. This file is not an official Cloudflare brand document. No assets (logos, wordmarks) are bundled here — Cloudflare's marks are trademarked and must be retrieved directly from cloudflare.com/brand/ under Cloudflare's stated terms.