Pages Design System Deep Dive

1. Brand Overview

Pages is part of the Cloudflare ecosystem, aimed at developers who want to deploy fast, secure static sites without fiddling with infrastructure. The vibe is very much “developer-first but design-conscious.” You can tell the target audience is technical—the typography sticks to system fonts, the palette is restrained, and the UI is built with Vuetify components (there’s v- evidence all over). But they’ve avoided the “terminal green on black” stereotype. Instead, it’s a polished, minimal interface with just enough warmth from Cloudflare’s signature orange to feel approachable.

The design philosophy here seems to be: keep it functional, keep it legible, keep it fast. No ornamental gradients, no gratuitous animations. Even the shadows are utilitarian—subtle to the point of disappearing in some contexts. This is a UI that prioritizes clarity over personality, but the personality still leaks through in small ways: the tiger-stripe section backgrounds, the orange focus outlines, the pill-shaped elements.

This is for people who care about deploy times and build pipelines more than fancy buttons, but still appreciate when those buttons don’t look like they were drawn in MS Paint. The system font stack is a tell—by using -apple-system and equivalents, Pages gets OS-level rendering optimizations and a native feel on every platform. It’s the same approach Apple, GitHub, and other developer tools use.

If you’re building in this ecosystem, you’ll want to respect its restrained palette, precise spacing scale, and mostly flat aesthetic. Over-designing here would break trust with the audience. The design system is quiet, but confident.

2. Color System

2.1 Primary Colors

The main brand color here isn’t a saturated orange as in Cloudflare’s marketing—it’s actually white (#ffffff) as the semantic primary. That’s unusual, but it makes sense: Pages is a product interface, not a marketing site. White is the base canvas. The secondary semantic color is an ultra-light orange tint (rgba(248, 173, 76, 0.12)), used for highlights or section backgrounds.

The “real” accent color comes from the palette: #f38020 (rgb(243, 128, 32)), pure Cloudflare orange, used in focus states and hovers. In psychological terms, orange here signals energy and attention, but it’s deployed sparingly so it doesn’t overwhelm the utilitarian feel. Compared to competitors like Netlify (who lean into blues), Cloudflare Pages’ accent color feels warmer and more human.

2.2 Complete Palette

Color Name	Hex	Role	Usage
Secondary Semantic	rgba(248, 173, 76, 0.12)	Secondary highlight	Background tint for emphasis areas
Primary Semantic	#ffffff	Primary canvas	Page background
Dark Base	#1d1f20	Primary text/UI	Header, nav links, logo
White	#ffffff	Canvas, text	Buttons, captions
Dark Grey	#404242	Secondary text	Category headers
Medium Grey	#555555	Icon/text	Close icon, links, host boxes
Light Grey	#bdc2c7	Neutral	Backgrounds, borders
Link Blue (default)	#0000ee	Link text	Underlined links
Medium Blue	#3860be	Link hover, privacy links	Hover state color
Deep Blue	#276d9b	Secondary buttons	Refuse-all handler, save preference
Lightest Grey	#e7eaed	Neutral background	Panels, dividers
Mid-light Grey	#cfd3d6	Neutral background	Panels, dividers
Transparent Dark	rgba(29, 31, 32, 0.05)	Hover/focus overlay	Subtle overlays
Cloudflare Orange	#f38020	Accent	Focus rings, hover states
CSS var — orange selection	#ef9530	Selection color	Text selection highlight
CSS var — tiger stripe bg	rgb(243,243,244)	Background	Section striping
CSS var — selection text	#fff	Selection text color	Text selection
CSS var — focus color	rgba(243,128,32,.5)	Focus outline	Inputs/buttons focus
CSS var — code scrollbar	hsla(0,0%,100%,.25)	Scrollbar	Code blocks
CSS var — deemphasized text	rgb(54,57,58)	Secondary text	Muted text

2.3 Color Relationships

The palette is mostly high-contrast. Dark base #1d1f20 on white easily passes WCAG AAA for body text. Orange #f38020 on white is borderline for small text (contrast ratio ~3:1), so they reserve it for larger UI elements or outlines, not fine text. The blues (#3860be, #276d9b) are safely contrasted against white, but on dark backgrounds they’re less legible—probably why link hover changes to blue only on light backgrounds.

No explicit dark mode here—the palette is skewed for light UI. Transparent overlays (rgba(29, 31, 32, 0.05)) suggest hover states rely on subtle changes rather than high-color shifts.

2.4 Usage Guide

Works well: Dark base text (#1d1f20) on white canvas; orange focus rings against light backgrounds; medium blue hover states for links.
Avoid: Orange text on white in small sizes—it’s not accessible. Blue link hover on dark backgrounds—it loses contrast.
Best combo for CTAs: White text on deep blue #276d9b or orange backgrounds—high contrast, clear affordance.
Highlight areas: Use secondary semantic rgba(248, 173, 76, 0.12) for soft emphasis without stealing attention.

3. Typography

3.1 Font Families

Headings, body, links, buttons—all use the same system stack:

-apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue

Code and monospaced elements use:

Menlo, SF Mono, Andale Mono, Roboto Mono, Monaco

No Google Fonts, no Adobe Fonts—pure native rendering. This keeps load times minimal and aligns with developer tools aesthetics.

3.2 Type Scale

Element	Font	Size	Weight	Line Height
Heading-1	System stack	63.75px	700	1.05
Heading-1	System stack	55.25px	700	1.00
Heading-1	System stack	46.75px	700	1.20
Heading-1	System stack	34px	700	1.50
Heading-1	System stack	27.2px	700	1.50
Heading-1	System stack	25.5px	400	1.50
Heading-1	System stack	25.5px	700	1.00
Heading-1	System stack	24px	400	—
Link	System stack	22.661px	400	1.30
Heading-1	System stack	20.4px	700	1.50
Heading-1	System stack	19.125px	700	1.00
Link	System stack	17px	400	1.50
Button	System stack	17px	400	1.30
Heading-1	System stack	17px	900	1.30
Heading-1	System stack	17px	500	1.50
Link	System stack	16.15px	400	1.50
Heading-1	System stack	16px	700	1.50
Button	System stack	16px	400	—
Code	Menlo stack	15.3px	400	1.50
Heading-1	System stack	14.45px	400	—
Button	System stack	14.4px	700	1.00
Caption	System stack	14px	700	1.50
Caption	System stack	14px	600	1.50
Caption	Menlo stack	13.6px	400	1.50
Link	System stack	13.6px	400	1.50
Button	System stack	13.6px	400	1.50
Caption	System stack	13.6px	400	—
Caption	System stack	13.12px	700	1.30
Button	System stack	13.008px	400	—
Link	System stack	12.992px	400	1.50
Caption	System stack	12.992px	400	1.50
Caption	System stack	12.75px	500	1.50
Button	System stack	12px	700	1.00
Link	System stack	12px	400	—
Caption	System stack	11.52px	400	—
Caption	System stack	11.008px	400	1.40

3.3 Hierarchy

They use size jumps to signal hierarchy—63.75px down to mid-20s for headings, then into the teens for body and UI text. Weight is a major differentiator: 700 for headings, 400 for body, occasional 900 for emphasis. The consistent font family across contexts keeps it cohesive, but the monospaced Menlo stack for code blocks is a nice break in rhythm.

4. Spacing & Layout

4.1 Spacing Scale

The base scale is 4px—values are mostly multiples or near-multiples of it.

px	rem	Count
1	0.06rem	5
5	0.31rem	9
6.8	0.42rem	10
8.5	0.53rem	67
9.35	0.58rem	4
10	0.63rem	19
11.05	0.69rem	4
12	0.75rem	16
12.1125	0.76rem	3
12.4635	0.78rem	5
12.75	0.80rem	15
13	0.81rem	20
14.7296	0.92rem	5
15	0.94rem	4
17	1.06rem	15
19.125	1.20rem	5
34	2.13rem	6
46.75	2.92rem	3
51	3.19rem	14
102	6.38rem	4

Heavy usage of 8.5px spacing—this is their “magic number” for padding inside components.

4.2 Layout

Breakpoints span from 400px up to 1300px, covering mobile, tablet, and large desktop. They’re not sticking to standard Bootstrap points—there are odd ones like 897px and 961px, probably driven by Vuetify’s grid logic or specific component needs.

5. Visual Elements

Border Radius

They mix small radii (2px for buttons/inputs) with medium (8.5px for cards) and full (50% for avatars/pills). Some huge values like 170px for certain links—probably decorative pills.

Full list includes: 1px, 2px, 2.5px, 2.55px, 3px, 3.4px, 6.375px, 8.49788px, 8.5px, 17px, 20px, 50px, 170px, 50%, 100%.

Shadows

Mostly subtle: rgba(0,0,0,0.07) 0px 0px 0px 1px is common for borders-as-shadows. Orange shadows (rgba(243,128,32,0.5)) appear in focus states. Some multi-layer shadows for cards, but nothing heavy—this isn’t Material Design’s deep elevation.

Borders

Thin 1px solids in various colors (#276d9b, #3860be, greys), used for inputs and buttons. Inset borders for iframes. No thick borders anywhere.

6. Components

6.1 Buttons

No full button dataset in extraction, but borders show 1px solid #276d9b for some secondary actions. Radius often 2px or 8.5px. Focus color is rgba(243,128,32,0.5).

6.2 Links

Four link styles:

Dark base (#1d1f20) underlined by default, hover to #3860be no underline.
White (#ffffff) no underline default, hover to #3860be.
Pure blue (#0000ee) underlined default, hover to #3860be no underline.
Brownish (#a24f0b) no underline, hover to #3860be.

Underline removal on hover is consistent—signals “interactive” via color change instead.

6.3 Forms

Text inputs default: white background, black text, no border, 0px radius. Focus: 1px solid black border, black outline, blue background (rgb(30, 174, 219)), white text.

6.4 Cards

From shadows: likely 8.5px radius, subtle border shadow combo. Spacing inside probably 8.5px or 12px.

7. Design Tokens

:root {
  /* Colors */
  --color-secondary-semantic: rgba(248, 173, 76, 0.12);
  --color-primary-semantic: #ffffff;
  --color-dark-base: #1d1f20;
  --color-white: #ffffff;
  --color-dark-grey: #404242;
  --color-medium-grey: #555555;
  --color-light-grey: #bdc2c7;
  --color-link-blue: #0000ee;
  --color-medium-blue: #3860be;
  --color-deep-blue: #276d9b;
  --color-lightest-grey: #e7eaed;
  --color-midlight-grey: #cfd3d6;
  --color-transparent-dark: rgba(29, 31, 32, 0.05);
  --color-orange: #f38020;
  --orange-for-use-as-selection-color: #ef9530;
  --section-tiger-stripe-background-color: rgb(243,243,244);
  --selection-color: #fff;
  --focus-color: rgba(243,128,32,.5);
  --code-block-scrollbar-color: hsla(0,0%,100%,.25);
  --deemphasized-color: rgb(54,57,58);

  /* Typography */
  --font-system: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue";
  --font-mono: Menlo, "SF Mono", "Andale Mono", "Roboto Mono", Monaco;

  /* Spacing */
  --space-1: 1px;
  --space-5: 5px;
  --space-6_8: 6.8px;
  --space-8_5: 8.5px;
  --space-9_35: 9.35px;
  --space-10: 10px;
  --space-11_05: 11.05px;
  --space-12: 12px;
  --space-12_1125: 12.1125px;
  --space-12_4635: 12.4635px;
  --space-12_75: 12.75px;
  --space-13: 13px;
  --space-14_7296: 14.7296px;
  --space-15: 15px;
  --space-17: 17px;
  --space-19_125: 19.125px;
  --space-34: 34px;
  --space-46_75: 46.75px;
  --space-51: 51px;
  --space-102: 102px;

  /* Border Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-2_5: 2.5px;
  --radius-2_55: 2.55px;
  --radius-3: 3px;
  --radius-3_4: 3.4px;
  --radius-6_375: 6.375px;
  --radius-8_49788: 8.49788px;
  --radius-8_5: 8.5px;
  --radius-17: 17px;
  --radius-20: 20px;
  --radius-50: 50px;
  --radius-170: 170px;
  --radius-full: 50%;
  --radius-max: 100%;

  /* Shadows */
  --shadow-orange-focus: rgba(243, 128, 32, 0.5) 0px 0px 0px 0px, rgb(243, 128, 32) 0px 0px 0px 0px inset;
  --shadow-subtle-border: rgba(0, 0, 0, 0.07) 0px 0px 0px 1px;
}

8. AI Coding Assistant Prompt

# Pages Design System Specification

You are a Pages design expert. Build UIs matching their visual language exactly.

## Brand Context
Pages is a developer-focused product within Cloudflare. The design is minimal, functional, and OS-native. It uses a restrained palette with Cloudflare orange as an accent, system fonts for speed and familiarity, and precise spacing multiples.

## Color Palette
- Secondary Semantic: rgba(248, 173, 76, 0.12) — Soft background highlight
- Primary Semantic: #ffffff — Page background
- Dark Base: #1d1f20 — Primary text, nav links
- White: #ffffff — Buttons, captions
- Dark Grey: #404242 — Secondary text, category headers
- Medium Grey: #555555 — Icons, secondary UI
- Light Grey: #bdc2c7 — Borders, subtle backgrounds
- Link Blue: #0000ee — Default link text
- Medium Blue: #3860be — Link hover, privacy links
- Deep Blue: #276d9b — Secondary actions
- Lightest Grey: #e7eaed — Panel backgrounds
- Mid-light Grey: #cfd3d6 — Neutral surfaces
- Transparent Dark: rgba(29, 31, 32, 0.05) — Hover overlays
- Cloudflare Orange: #f38020 — Focus, hover accents
- CSS var orange selection: #ef9530 — Text selection highlight
- Tiger stripe bg: rgb(243,243,244) — Section background
- Selection text: #fff — Text selection
- Focus color: rgba(243,128,32,.5) — Focus ring
- Code scrollbar: hsla(0,0%,100%,.25) — Scrollbars in code blocks
- Deemphasized text: rgb(54,57,58) — Muted text

## Typography
Fonts:
- UI: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue"
- Code: Menlo, "SF Mono", "Andale Mono", "Roboto Mono", Monaco

Sizes:
| Level | Size | Weight | Line Height | Use |
| H1 | 63.75px | 700 | 1.05 | Page titles |
| H1 alt | 55.25px | 700 | 1.00 | Large headings |
| H2 | 46.75px | 700 | 1.20 | Section headings |
| ... include all extracted sizes ... |

## Spacing & Grid
Base: 4px scale.
Values: 1px, 5px, 6.8px, 8.5px, 9.35px, 10px, 11.05px, 12px, 12.1125px, 12.4635px, 12.75px, 13px, 14.7296px, 15px, 17px, 19.125px, 34px, 46.75px, 51px, 102px.
Use 8.5px inside buttons/cards, larger for section gaps.

## Border Radius
- xs: 1px — tags
- sm: 2px — buttons, inputs
- md: 8.5px — cards
- lg: 17px — larger components
- full: 50% — avatars, pills
- special: 170px — decorative pills

## Shadows & Depth
Use subtle border-like shadows (`rgba(0,0,0,0.07) 0px 0px 0px 1px`). Orange focus shadow for active states.

## Component Specifications

### Primary Button
Default:
- Background: Deep Blue #276d9b
- Color: White #ffffff
- Radius: 2px
- Border: 1px solid #276d9b
- Padding: 8.5px horizontal
Focus: Outline 2px solid rgba(243,128,32,.5)
Hover: Background shift to Medium Blue #3860be
Disabled: Opacity 0.5

### Secondary Button
Default:
- Background: transparent
- Color: Deep Blue #276d9b
- Border: 1px solid #276d9b
Hover: Color shift to Medium Blue

### Navigation Links
Default: Color #1d1f20, underline
Hover: Color #3860be, no underline

### Input Fields
Default: Background #ffffff, border none, radius 0
Focus: Border 1px solid #000000, outline 1px solid #000000, background rgb(30, 174, 219), text #ffffff

### Cards
Background: #ffffff
Radius: 8.5px
Shadow: rgba(0,0,0,0.07) 0px 0px 0px 1px
Padding: 12px

## Layout & Responsive Rules
Breakpoints: 400px, 768px, 1024px, 1280px, 1300px plus intermediates.
Max content width: 1300px
Mobile padding: 12px
Desktop padding: 34px

## Interaction Rules
Transitions: 150ms ease for hover/focus
Focus indicators: Orange focus color
No motion-heavy animations

## DO List
- Use only provided palette colors
- Maintain 4px base spacing
- Keep font families consistent
- Use 8.5px padding for buttons/cards
- Apply focus outlines for accessibility

## DON'T List
- Don’t invent new colors
- Don’t mix corner radii
- Don’t use heavy shadows
- Don’t remove hover states

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #276d9b;
  color: #ffffff;
  padding: 8.5px 17px;
  border-radius: 2px;
  border: 1px solid #276d9b;
  font-family: var(--font-system);
  font-size: 17px;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #3860be; }
.btn-primary:focus { outline: 2px solid rgba(243,128,32,.5); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 8.5px;
  padding: 12px;
  box-shadow: rgba(0,0,0,0.07) 0px 0px 0px 1px;
}
```

Input:
```css
.input {
  background: #ffffff;
  border: none;
  border-radius: 0;
  padding: 1px 2px;
}
.input:focus {
  border: 1px solid #000000;
  outline: 1px solid #000000;
  background: rgb(30, 174, 219);
  color: #ffffff;
}
```

9. Summary

TL;DR — Pages’ design system is minimal, functional, and built for speed. System fonts, restrained palette, precise spacing, subtle shadows. Orange accents are the only loud note, used sparingly for focus.

Brand Keywords:

developer-minimalist
functional-clean
warm-accent
OS-native
precision-spacing

Pages Design System: Minimalist Developer-First UI

Brand Identity

Color Palette

Typography

Design Style

Full Analysis