Fastly Design System

Fastly's marketing site does something the CDN category does not expect. The brand is famous for a saturated red voltage — the same red that runs on the wordmark, the dashboard, the developer docs — and the page should, by every dev-infra convention, paint that red somewhere above the fold. It does not. The hero canvas is a warm near-white floor with a 48px ES Rebond Grotesque headline ("Build, Secure, and Deliver. Instantly.") in pure ink-black, a single dark-fill pill CTA labeled "Talk to an Expert", and a giant red protractor-shaped illustration that runs as a decorative arc across the band above. The red is there — it just renders as ornament rather than as voltage. Where Cloudflare gives Kumo Brand orange the full hero canvas and Vercel commits to matte black, Fastly holds the brand red back and lets a lime-yellow chip carry the actual chromatic accent.

The DESIGN.md file packages the system into a machine-readable spec. Inside: 18 color tokens drawn from a 300-plus CSS root that exposes three legacy palettes side-by-side (`--legacy-*`, `--color-v3-*`, `--color-*`). The brand voltage is the red hex #ff282d (wired as `--red`, `--color-red-60`, `--legacy-red`, `--color-industry-publishing`) but it appears 0 times painted in the captured render — the CSS variable is declared as the brand identifier without being used as a surface fill. The chromatic work falls instead to a saturated lime-yellow #e7ff7a (25 occurrences) and a brighter neon-lime #d0ff00 (6 background fills), both used for security-product status accents. A deep purple-eggplant #4d1935 carries the single in-body emphasis-block fill — the security-product spotlight band on the lower half of the page.

Sixteen typography tokens span two typefaces: ES Rebond Grotesque (the display sans, weight 300-700, used at 16-48px) and Inter Variable (the body sans, weight 400-700, used at 12-36px). Fifteen components cover the ink-pill primary CTA, the hairline-cream feature cards, the lime-yellow status chip, the eggplant emphasis block, and the two distinct sub-grid layouts ("Customer logo wall" and "Product feature grid"). Feed this file to Claude or Cursor and it will reproduce Fastly's specific moves: the held-back red voltage, the lime-yellow as actual accent, the warm-cream hairlines, the 48px display in ES Rebond Grotesque weight 500, and the 8px dominant radius that commits to one round step rather than a tiered ladder. One thing worth borrowing only if your brand has a strong saturated color it does not want to use as chrome: the willingness to declare the voltage in the CSS while letting a quieter accent carry the actual page.