Cloudflare Design System — Technical Deep Dive

1. Brand Overview

Cloudflare’s site design comes across as unapologetically utilitarian with a splash of brand warmth. This is not a luxury brand aesthetic. It’s built for engineers, CTOs, and product managers who need to trust the infrastructure behind their internet-facing assets. The visual language is a blend of clean neutrality and bold accents — mostly orange — that signal energy, activity, and a certain brand confidence.

There’s no heavy ornamentation. Tailwind CSS and Vuetify are working under the hood, so there’s a strong utility-class backbone. That means predictable spacing, consistent responsive behavior, and a lot of pre-defined component logic. This is a site that cares more about readability, clear hierarchy, and fast load times than about pushing experimental visuals.

When you land on the homepage, you get the white space + bold orange CTA pattern instantly. The orange (#ff6633) is used sparingly — mostly for primary actions — so it pops without overwhelming. Neutral greys keep the tone serious, while black and blue are reserved for functional accents (hover states, focus styles).

Typography is almost entirely Inter, which is a modern, open-source sans-serif. It’s a safe choice: legible at small sizes, clean at large, and works well in both marketing and technical contexts. They mix it occasionally with system-ui stacks for UI elements. The type scale is big on headings — 70.4px for hero titles — and keeps body text in the 14–16px range for easy reading.

Spacing is on an 8px-based scale. That’s a design system hallmark: everything lines up on the grid. Border radii are small-to-medium (4px, 8px) for most components, which keeps things looking approachable but still sharp.

Overall: Cloudflare’s design is functional-first with a strong brand accent color. It’s engineered for clarity, speed, and trust — exactly what you’d expect from a company selling internet infrastructure. The system is clean, modular, and consistent, which makes it easy to keep accessible and scalable.

2. Color System

2.1 Primary Colors

The standout primary is #ffffff (white) for backgrounds and core surfaces — paired with #ff6633 (a saturated orange) for CTAs and primary actions. Orange signals energy, urgency, and warmth. It’s a contrast to the otherwise monochrome palette, giving Cloudflare’s brand a human, energetic edge.

Comparatively, competitors like AWS lean into blues and neutrals; Fastly goes heavier on reds. Cloudflare’s orange is unique in this space — it’s instantly identifiable.

2.2 Complete Palette

2.3 Color Relationships

White and black (#ffffff / #222222) give the base contrast. Orange (#ff6633) against white is high-contrast, meeting WCAG AA easily for large text and UI elements. Blue (#005fcc) is used for interactive states — against white it’s also accessible.

The palette is minimal — fewer than 6 core colors — which means fewer combinations to manage. The transparency in black (#222222 at 0.6 opacity) softens text on white, making it less stark.

Dark mode is not explicit in this dataset, but the palette could invert easily: orange stays, white becomes background for text, and black becomes surface.

2.4 Usage Guide

• CTAs: Always use #ff6633 for primary actions. Keep text on them dark or white depending on state.
• Text: Default text is #222222 (soft black). On dark backgrounds, switch to #ffffff.
• Hover: Use #005fcc or a tint of orange for interactive hover states.
• Borders: Use #dfdfdf for subtle dividers. Avoid using pure black borders — too harsh.
• Avoid: Mixing multiple saturated accents. One accent per view is enough.

3. Typography

3.1 Font Families

• Inter — primary brand font. No Google/Adobe font loading detected — likely self-hosted.
• ui-sans-serif — fallback stack: system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji.

3.2 Type Scale

3.3 Hierarchy

Headings are large and heavy — they command attention. The jump from 70.4px hero to 48px section heading is big, which works for clear visual breaks. Body text sits at 16–20px with generous line height for readability.

Captions and labels drop to 12–14px, often uppercase with letter spacing, signaling metadata or UI labels.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Common values:

4.2 Layout

Breakpoints:

375px, 400px, 426px, 530px, 550px, 600px, 640px, 768px, 896px, 1000px, 1023px, 1024px, 1200px, 1280px, 1360px, 1440px, 1920px.

They’re covering everything from small phones to large desktops. The grid likely adapts fluidly with utility classes from Tailwind.

5. Visual Elements

Border Radius

Values range from sharp (0px) to fully rounded (9999px):

• 0px — divs, flat edges
• 2px — list items
• 4px — images, inputs
• 6px — divs, listboxes
• 8px — divs, buttons, cards, dialogs
• 8px top corners — images
• 9999px — pills (rare)

Rounded corners are mostly modest — 8px standard.

Shadows

Mostly subtle, layered shadows:

• rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.05) 0px 2px 4px -2px — default elevation
• Heavier for modals, lighter for cards.
• Some components are flat — using borders for separation.

Borders & Dividers

• 1px solid #e5e7eb — common dividers.
• Subtle color differences for inputs (#b3b3b3, #222222).
• Active accents in brand orange or blue for interactive borders.

6. Components

6.1 Buttons

Variant 1 — Transparent Outline

• Default: bg transparent, color #ffffff, padding 12px 16px, radius 8px, border 1px solid #ffffff.
• Hover: bg #ffffff, opacity 0.9, transform rotateY(180deg) (odd choice — could be an animation flourish).
• Active: bg #2c6415, border rgba(162,192,169,0.5).
• Focus: bg #fafafa, outline 2px solid (browser default), color #122124.

Variant 2 — Solid White

• Default: bg #ffffff, color #000000, padding 12px 16px, radius 8px.
• Hover: same as above, but hover color turns #ffffff — potential bug.
• Active/Focus similar to Variant 1.

Variant 3 — Brand Orange

• Default: bg #ff6633, color #000000, padding 12px 40px, radius 8px.
• Hover: bg #1eaedb, text #ffffff.
• Focus: bg #1eaedb, outline 2px solid #000000.

6.2 Links

Two styles:

• Black text: default underline, hover color #565656, no underline.
• White text: same underline behavior, hover color #565656.

6.3 Forms

Inputs have small radii (4px or 2.752px), borders in greys (#b3b3b3, #222222). Focus rings use rgb(59 130 246 / .5) — a translucent blue.

6.4 Cards

Likely divs with 8px radius, subtle shadow, padding from spacing scale (16–24px). Borders in #e5e7eb.

7. Design Tokens

:root {
  /* Colors */
  --color-neutral-black: #222222;
  --color-white: #ffffff;
  --color-brand-orange: #ff6633;
  --color-light-grey: #dfdfdf;
  --color-accent-blue: #005fcc;
  --color-ring: rgba(59,130,246,0.5);
  --color-ring-offset: #ffffff;

  /* Typography */
  --font-primary: 'Inter', sans-serif;
  --font-ui: ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --text-h1-hero-size: 4.40rem;
  --text-h1-hero-weight: 600;
  --text-h1-large-size: 3.00rem;
  --text-h1-large-weight: 600;
  --text-h1-large-bold-weight: 700;
  --text-body-size: 1.00rem;
  --text-body-weight: 400;
  --text-caption-size: 0.88rem;
  --text-caption-weight: 400;
  --text-caption-bold-weight: 600;
  --text-small-caption-size: 0.75rem;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-144: 144px;
  --space-154: 154px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-default: rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.05) 0px 2px 4px -2px;
}

8. AI Coding Assistant Prompt

# Cloudflare Design System Specification

System Prompt:
You are a Cloudflare design expert. Build UIs matching their visual language exactly.

Brand Context:
Cloudflare's design is functional-first with bold orange accents. It's engineered for clarity, trust, and speed. Typography is clean and modern, spacing is on an 8px grid, and components are utilitarian with subtle styling.

Color Palette:
- Neutral Black: #222222 — body text, overlays
- Pure White: #ffffff — backgrounds, text on dark
- Brand Orange: #ff6633 — primary CTAs, highlight elements
- Light Grey: #dfdfdf — borders, dividers
- Accent Blue: #005fcc — hover/focus states
- Ring Color: rgba(59,130,246,0.5) — focus outlines
- Ring Offset: #ffffff — focus ring offset

Typography:
Font Families:
- Primary: Inter
- UI: ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

Sizes:
| Level | Size | Weight | Line Height | Use |
| Hero H1 | 70.4px | 600 | 1.00 | Homepage hero |
| H1 Large | 48px | 600 | 1.00 | Section titles |
| H1 Large Bold | 48px | 700 | 1.00 | Emphasis headings |
| H1 Medium | 40px | 600 | 1.00 | Sub-section headings |
| H1 Small | 36px | 600 | 1.10 | Compact headers |
| Body Large | 20px | 400 | 1.60 | Long-form text |
| Body Medium Bold | 18px | 600 | 1.10 | Emphasis inline |
| Body Medium | 16px | 400 | 1.50 | Body text |
| Caption | 14px | 400 | 1.50 | Metadata |
| Caption Bold | 14px | 600 | 1.43 | Labels |
| Small Caption | 12px | 400 | 1.33 | UI labels |

Spacing & Grid:
Base: 8px. Scale: 1px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 144px, 154px.

Border Radius:
- none: 0px — flat elements
- sm: 2px — list items
- md: 4px — inputs, images
- lg: 8px — buttons, cards, dialogs
- full: 9999px — pills

Shadows & Depth:
- Default: rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.05) 0px 2px 4px -2px

Component Specifications:

Primary Button:
Default: bg #ff6633, color #000000, padding 12px 40px, radius 8px, border none.
Hover: bg #1eaedb, color #ffffff.
Focus: bg #1eaedb, outline 2px solid #000000.
Active: same as hover.
Disabled: opacity 0.5.

Secondary Button (Transparent Outline):
Default: bg transparent, color #ffffff, padding 12px 16px, radius 8px, border 1px solid #ffffff.
Hover: bg #ffffff, opacity 0.9, transform rotateY(180deg).
Focus: bg #fafafa, outline 2px solid browser default blue, color #122124.
Active: bg #2c6415, border rgba(162,192,169,0.5).

Navigation Links:
Default: underline, color #222222 or #ffffff.
Hover: color #565656, no underline.

Input Fields:
Border: 1px solid #b3b3b3, radius 4px.
Focus: border-color #005fcc, outline: none.

Cards:
Radius: 8px, padding 16–24px, shadow default.

Layout & Responsive Rules:
Max content width: fluid to breakpoint.
Page padding: multiples of 8px.
Breakpoints: 375px → 1920px.

Interaction Rules:
Transition timing: 150ms ease for state changes.
Focus indicators: 2px solid ring color.
Loading states: opacity animation.

DO List:
- Use ONLY colors from palette.
- Maintain 8px grid spacing.
- Use Inter for headings and body.
- Keep border radius consistent.
- Use shadows defined in tokens.
- Apply hover/focus states exactly.

DON'T List:
- Don't invent new colors.
- Don't mix rounded and sharp corners.
- Don't remove focus outlines.
- Don't stretch images.

Code Examples:

Primary Button:
```css
.btn-primary {
  background: #ff6633;
  color: #000000;
  padding: 12px 40px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #1eaedb; color: #ffffff; }
.btn-primary:focus { outline: 2px solid #000000; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

Secondary Button:
```css
.btn-secondary {
  background: transparent;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #ffffff;
}
.btn-secondary:hover { background: #ffffff; opacity: 0.9; transform: rotateY(180deg); }
```

Input Field:
```css
.input {
  border: 1px solid #b3b3b3;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 16px;
}
.input:focus { border-color: #005fcc; outline: none; }
```

9. Summary

TL;DR — Cloudflare’s design system is minimal, functional, and brand-forward. Orange drives action, Inter keeps text clean, and an 8px grid ensures order. Buttons are straightforward, shadows are subtle, and everything feels engineered for clarity.

Brand Keywords:

• infrastructure-trust
• bold-functional
• grid-disciplined
• orange-accented