# Cloudflare

> `cloudflare@1.0.0`

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** · `cloudflare@1.0.0` · 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** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | 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: `cloudflare@1.0.0` from the encyclopedia.*