<!-- Generated by ExtractVibe — https://extractvibe.com/brand/cloudflare.com -->
<!-- Extracted: 2026-05-03T16:49:18.888Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Cloudflare"
description: "Cloudflare projects a highly professional, infrastructure-grade aesthetic that balances technical authority with modern clarity. The design is clean and functional, utilizing a stark monochrome base punctuated by a vibrant orange accent to signify energy and security without sacrificing readability or seriousness."
colors:
  neutral: "#222222"
  surface: "#ffffff"
  on-surface: "#000000"
  on-surface-secondary: "#222222"
typography:
  display-lg:
    fontFamily: "Inter"
    fontSize: "70.4px"
    fontWeight: "600"
    lineHeight: "70.4px"
  headline-lg:
    fontFamily: "Inter"
    fontSize: "48px"
    fontWeight: "600"
    lineHeight: "48px"
  headline-md:
    fontFamily: "Inter"
    fontSize: "36px"
    fontWeight: "600"
    lineHeight: "39.6px"
  headline-sm:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "510"
    lineHeight: "16px"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  md: "8px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#000000"
    rounded: "8px"
    padding: "12px 16px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#ff6633"
    borderWidth: "1px"
---

# Cloudflare — Design System

## Overview

Cloudflare's design system embodies the archetypes of The Sage and The Ruler, projecting an infrastructure-grade aesthetic that is both authoritative and modern. It aligns with the visual language of comparable brands such as Vercel, Stripe, Linear, and GitHub, emphasizing clarity, functionality, and developer-first principles. The emotional register is one of unwavering reliability and technical sophistication, ensuring users perceive a secure and highly performant digital environment. This design system prioritizes directness and efficiency, eschewing decorative elements or superfluous visual noise. It is not playful, whimsical, or overtly consumer-oriented. Instead, it is engineered for precision and performance, reflecting the critical nature of the services Cloudflare provides. The visual vocabulary is intentionally stark, focusing on clear information hierarchy and immediate utility over aesthetic indulgence, thereby reinforcing its role as a foundational technology provider. The absence of a primary color reinforces a neutral, foundational stance, allowing content and data to take precedence.

**Key characteristics:**

- Vibe — infrastructure, developer-first, authoritative, clean, secure, modern
- Archetypes — The Sage, The Ruler
- Comparable to — Vercel, Stripe, Linear, GitHub
- Design era — contemporary-minimal
- Emotional tone — reliable-empowering
- Target audience — CTOs, DevOps engineers, security architects, and enterprise decision-makers looking for robust, scalable infrastructure solutions.
- Visual energy — 6/10 (moderate)

## Colors

The color philosophy is rooted in a monochrome base, signaling a serious and infrastructure-grade foundation. The absence of a primary color emphasizes neutrality and stability, allowing the vibrant orange accent to serve as a precise indicator of energy, security, and critical interaction points. This restrained palette communicates authority and professionalism, preventing visual distraction and reinforcing the brand's focus on robust, high-performance solutions. The limited color set ensures consistency and immediate recognition of interactive or important elements.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#ffffff` | White |
| background | `#ffffff` | White |
| text | `#000000` | Black |
| secondary text | `#222222` | Near-Black |
| muted | `#222222` | Near-Black |

## Typography

The type system utilizes Inter, a highly legible sans-serif typeface, complemented by `ui-sans-serif` for system-level consistency. This choice prioritizes clarity and readability across all digital interfaces, essential for a developer-first and infrastructure-focused brand. The hierarchy is established through precise variations in weight and size, ensuring information is consumed efficiently and logically. This systematic approach to typography communicates precision, technical expertise, and a commitment to accessible and unambiguous information delivery.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Inter | body | self-hosted | 400 |
| Inter | heading | self-hosted | 510, 600 |
| ui-sans-serif | body | system | 400, 699 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Inter | 70.4px | 600 | 70.4px | — |
| Heading 2 | Inter | 48px | 600 | 48px | — |
| Heading 3 | Inter | 36px | 600 | 39.6px | — |
| Heading 4 | Inter | 16px | 510 | 16px | — |
| Body | Inter | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` |
| card | `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.05) 0px 2px 4px -2px` |
| element | `rgba(31, 26, 23, 0.18) 0px 10px 25px 0px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px 0px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.05) 0px 2px 4px -2px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` |

### Gradients

- `linear-gradient(to right, rgb(246, 130, 31), rgb(251, 173, 65))`
- `linear-gradient(to right, rgb(251, 173, 65), rgb(255, 102, 51))`

## Shapes

Border-radius scale:

- `md` — 8px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Text — `#000000`
- Radius — `8px`
- Padding — `12px 16px`
- Font size — `16px`
- Font weight — `400`
- Border — `1px solid #ff6633`
- Sample copy — "Log in"

## Do's and Don'ts

### Do

- Use Inter font family exclusively: 400 weight for body text and 510/600 weights for headings.
- Apply sentence-case capitalization to all headings and titles; never use Title Case.
- Set body text line-height to exactly 24px for optimal readability on light backgrounds.
- Style primary action buttons as outlines with #ff6633 border, #000000 text, 8px border-radius, and 12px 16px padding.
- Utilize the orange gradient (linear-gradient to right, #f6821f to #fbad41) sparingly for key highlights or active states, not as a background.
- Apply subtle, multi-layer shadows to cards (rgba(0,0,0,0.1) 0 4px 6px -1px, rgba(0,0,0,0.05) 0 2px 4px -2px) to create depth without clutter.
- Maintain a high-contrast monochrome base (#ffffff background, #000000 text) to ensure accessibility and focus.
- Use imperative, action-oriented verbs in CTAs (e.g., 'Log in', 'Get started') and avoid exclamations or emojis.

### Don't

- Do not use serif fonts or system fallbacks like ui-sans-serif for primary brand typography; stick to self-hosted Inter.
- Do not use Title Case or ALL CAPS for headings; strictly enforce sentence case.
- Do not apply heavy drop shadows or blur effects; keep shadows subtle and flat.
- Do not use emoji in marketing copy or UI elements; the tone is serious and professional.
- Do not use solid orange backgrounds for primary buttons; the brand prefers outlined styles with orange borders.
- Do not use playful or casual language; avoid slang, humor, or excessive enthusiasm.
- Do not mix multiple font families; the brand relies on the versatility of Inter across weights.
- Do not use rounded corners larger than 8px; keep UI elements compact and precise.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 4/10 | formal |
| Playful ↔ Serious | 3/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 6/10 | balanced |
| Respectful ↔ Irreverent | 5/10 | balanced |
| Technical ↔ Accessible | 3/10 | technical |

### Copywriting style

- Avg. sentence length — 14 words
- Vocabulary — advanced
- Jargon — heavy
- CTA style — action-oriented imperative verbs
- Rhetorical devices — imperative, parallelism, tricolon

### Sample copy

> Connect, protect, and build everywhere

> Don't watch the future happen. Shape it.

> Our agile SASE platform accelerates safe AI adoption

> One global cloud network unlike any other

> Make employees, applications and networks faster and more secure everywhere

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/cloudflare.com) | 100% |
| primary | — | svg | [link](https://extractvibe.com/api/assets/brands/cloudflare.com/logo-svg-17.svg) | 84% |
| primary | color | svg | [link](https://extractvibe.com/api/assets/brands/cloudflare.com/logo-11.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/cloudflare.com/logo-1.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/cloudflare.com/logo-8.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/cloudflare.com/logo-7.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/cloudflare.com/logo-15.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/cloudflare.com/logo-6.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/cloudflare.com/logo-2.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/cloudflare.com/logo-10.svg) | 80% |
| wordmark | color | png | [link](https://extractvibe.com/api/assets/brands/cloudflare.com/logo-5.png) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/cloudflare.com/logo-13.svg) | 80% |

## Sources

- Live brand page — https://extractvibe.com/brand/cloudflare.com
- Raw JSON — https://extractvibe.com/api/brand/cloudflare.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/cloudflare.com/design.md
- Extracted — 2026-05-03T16:49:18.888Z
- Generator — ExtractVibe vv1
- Quality score — 90/100