The visual approach
Cloudflare's design system centers on a single accent: Orange Primary (#FF6633). That orange appears in CTAs, active states, and key metrics, but nowhere else. The rest of the interface is built on a six-step grayscale that runs from Gray 50 (#F9FAFB) through Gray 900 (#1F2937), with black anchored at #1F1F1F. The palette is narrow by choice. When every surface, border, and text element pulls from the same gray ladder, the orange becomes an event rather than decoration.
Typography handles the heavy lifting. The custom typeface CF Sans runs across the entire type scale, from Hero at 72px/700 down to Body Small at 14px/400. The scale uses weight to establish hierarchy: 700 for the hero and large display text, 600 for medium display and large headings, and 400 for all body copy. There are no italics, no script fonts, no typographic flourishes. The result feels engineered, which suits a product that describes itself as infrastructure.
Motion is minimal and consistent. Buttons and links share the same easing curve—cubic-bezier(0.19, 1, 0.22, 1)—with opacity shifts over 200ms. Buttons fade in on hover (opacity 0 to 1), links fade out slightly (opacity 1 to 0.8). The effect is subtle enough that it registers as polish rather than animation.
The stack reflects the brand's technical positioning: Next.js 14+, TypeScript, Tailwind CSS with custom design tokens, and Cloudflare Pages for hosting. The site is a demonstration of the platform it sells.
What works
The orange accent stays disciplined. When a single color has to carry brand recognition, interactive feedback, and visual weight, it cannot afford to leak into decorative roles. Cloudflare keeps #FF6633 tightly scoped. You see it on primary buttons, in chart highlights, and as underlines on active navigation items. You do not see it as background fills, illustration accents, or icon tints. That restraint gives the orange semantic weight—it means action or emphasis, and nothing else.
The grayscale does more than fill space. Gray 50 and Gray 100 create surface separation without borders. Gray 300 works for dividers and inactive borders. Gray 500 and Gray 700 handle secondary and primary text. Gray 900 appears in headers and high-contrast zones. The six-step ladder is narrow enough to memorize and broad enough to handle information density. When a design system limits itself to six grays, every shade has to justify its inclusion.
The type scale avoids ambiguity. Hero at 72px/700 is reserved for above-the-fold headlines. Display Large at 48px/700 marks section starts. Heading Large at 24px/600 structures card titles and subsection breaks. Body Medium at 16px/400 is the default for readable text. The scale does not include 20px, 22px, or intermediate sizes that invite inconsistency. If a designer reaches for a size that is not on the list, the system pushes back.
What a builder can borrow
Start with a single accent and a disciplined grayscale. Cloudflare's palette proves that six grays and one brand color can carry a platform with thousands of screens. The trick is to define each shade's role before you start designing. Gray 100 for card backgrounds, Gray 300 for borders, Gray 500 for secondary text—lock those assignments early and enforce them everywhere.
Use weight to build hierarchy instead of reaching for new sizes or colors. Cloudflare's type scale shows how far you can get with a single typeface and three weights. When you limit your options, each choice becomes more legible. A 600-weight heading next to 400-weight body text creates rhythm without requiring color or decoration.
Keep motion consistent and purposeful. Cloudflare uses one easing curve for interactive elements: cubic-bezier(0.19, 1, 0.22, 1). That curve appears on buttons, links, and state transitions, always over 200ms. When every hover and click shares the same timing and easing, the interface feels coherent even if the user cannot articulate why. Pick one curve, one duration, and apply it everywhere interactive feedback appears.
Limit your palette before you start building components. Cloudflare's orange-and-gray approach works because the constraints are structural, not cosmetic. The color rules are not suggestions—they are boundaries that force clarity. A design system that starts with six grays will produce a more consistent product than one that starts with thirty.