Cloudflare

Overview

Cloudflare is a global platform that powers 20% of the Internet, enabling developers to build, secure, and scale applications without managing infrastructure. The design system embodies "Confident Minimalism"—a bold, direct aesthetic that transforms complex cloud infrastructure into accessible, human-centered experiences. The brand personality is authoritative yet approachable, speaking to both technical architects and business leaders with clarity and precision. The UI employs a vibrant orange accent (#ff5e1f) as the signature brand color, paired with a clean white canvas and supporting blue (#3b82f6) and cyan (#00c3d0) accents for status and secondary actions. The emotional response is one of empowerment: users feel capable, informed, and in control of their infrastructure. Voice: direct, confident, never condescending. Example sentence: "Deploy globally in seconds—Cloudflare handles the complexity."

Colors

The color system is built on a foundation of high contrast and intentional accent usage. Primary (#ff5e1f) is Cloudflare's signature orange, used exclusively for call-to-action buttons, key interactive elements, and brand-critical highlights. It appears at full saturation on white backgrounds and maintains 100% contrast with white text (rgb(255, 255, 255)). Secondary blue (#3b82f6) supports data visualization, informational badges, and secondary navigation; it is never used for primary CTAs. Tertiary cyan (#00c3d0) signals status, success states, and tertiary actions. The surface stack uses pure white (#ffffff) as the primary canvas with a carefully calibrated gray scale: surface-container-low (#f0f0f0) for subtle backgrounds, surface-container (#e8e8e8) for card containers, and surface-co

Typography

The type system uses FT Kunst Grotesk as the primary typeface, a geometric sans-serif that communicates technical sophistication while remaining approachable. Display (56px, 500 weight, -0.02em tracking) is reserved for hero headlines and major section breaks; it uses a slightly lighter weight (500 instead of 700) to maintain elegance at large sizes. Headline-lg (40px, 600 weight) anchors section introductions and card titles. Body-md (16px, 400 weight, 24px line-height) is the workhorse for paragraph text and UI labels, set at a comfortable 1.5 line-height ratio for readability. Label-md (14px, 600 weight) is applied to button text, form labels, and badge content with 0.01em tracking to add subtle emphasis. All display and headline sizes use negative letter-spacing (-0.02em to -0.01em) to

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, allowing for flexible content arrangements across desktop, tablet, and mobile viewports. The hero section spans full width with 80px vertical padding and centered content; section spacing uses the lg token (40px) between major content blocks. The gutter (24px) is applied consistently to left/right margins on all container-bound content, creating a breathing room that scales down to 12px (sm token) on tablets and 8px (xs token) on mobile. Card layouts use md spacing (24px) for internal padding, with lg spacing (40px) between card groups. The grid maintains a 12-column structure on desktop, collapses to 6 columns on tablet, and 1 column on mobile. White space is treated as a first-class design element: negative

Elevation & Depth

Depth is conveyed through a three-tier shadow system that creates clear visual hierarchy without relying on color shifts. Level 1 (sm elevation: 0 1px 2px rgba(0, 0, 0, 0.06)) is applied to subtle interactive elements like form inputs and small cards, creating a barely-perceptible lift. Level 2 (md elevation: 0 3px 8px rgba(0, 0, 0, 0.15)) is the standard for primary cards, modals, and navigation dropdowns—this shadow is visible but not aggressive, suggesting a 4-8px vertical offset. Level 3 (lg elevation: 0 4px 24px rgba(0, 0, 0, 0.3)) is reserved for floating action buttons, hero overlays, a

Shapes

The shape philosophy is "Technical Precision"—a blend of sharp and rounded corners that reflects Cloudflare's role as both a technical platform and a user-friendly service. Buttons use full border-radius (9999px) to create pill-shaped CTAs that feel modern and approachable; this applies to both primary and secondary buttons at 48px and 36px heights respectively. Cards and containers use lg radius (8px) to soften corners without appearing overly rounded, maintaining a professional appearance. Form inputs use the DEFAULT radius (4px) for a subtle, technical feel that aligns with developer expect

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants: primary (orange background, white text, 48px height, 12px 24px padding, full radius), secondary (white background with orange border, orange text, 36px height, 6px 12px padding), and ghost (transparent background, orange text, 8px 16px padding). Primary buttons use fontWeight 500 and transition to #ff7a3d on hover (200ms ease-in-out) and #e64a0a on active. Secondary buttons transition to the primary-container background (#ffe8d9) on hover. All buttons use label-md typography (14px, 600 weight) and maintain a minimum touch target of 44px height on mobile. Focus states apply a 3px outline at rgba(255, 94, 31, 0.3) (primary orange at 30% opacity) with a 2px offset.

Containers & Surfaces Cards us

Do's and Don'ts

**Do**

• Do use primary orange (#ff5e1f) exclusively for primary CTAs, key interactive elements, and brand-critical highlights—never use it for decorative or secondary elements.
• Do maintain a minimum 44px touch target for all interactive elements on mobile devices, with 12px minimum padding inside buttons.
• Do apply the full border-radius (9999px) to all buttons to create the signature pill-shaped appearance that distinguishes Cloudflare's UI.
• Do use FT Kunst Grotesk at 400 weight for body text, 500 for display, and 600 for headlines and labels—no intermediate weights.
• Do apply negative letter-spacing (-0.02em to -0.01em) to display and headline sizes to tighten the visual rhythm and convey confidence.
• Do use the three-tier shadow system (sm/md/lg elevation) consistently; never use custom shadows outside this system.
• Do enforce a maximum container width of 1280px to maintain optimal line-length (80 characters) for body text readability.
• Do transition all hover states over 200ms using ease-in-out timing to provide smooth, predictable feedback.

**Don't**

• Don't use primary orange for secondary actions, backgrounds, or decorative elements—reserve it exclusively for primary CTAs and brand-critical highlights.
• Don't mix typefaces; FT Kunst Grotesk is the sole typeface family for all UI text, including headings, body, and labels.
• Don't apply sharp corners (0px radius) to any UI elements; the minimum radius is 2px for small interactive elements.
• Don't use custom shadows outside the three-tier elevation system (sm: 0 1px 2px, md: 0 3px 8px, lg: 0 4px 24px).
• Don't use pure black (#000000) or pure white (#ffffff) for text; use on-surface (#262626) for dark text and on-primary (#ffffff) only on primary-colored backgrounds.
• Don't apply letter-spacing greater than 0.02em to body text; use only on labels and display sizes for emphasis.
• Don't create interactive elements smaller than 44px in height on mobile; this violates accessibility guidelines and creates poor touch targets.
• Don't use secondary blue (#3b82f6) for primary CTAs; it is reserved for secondary actions, data visualization, and informational elements.