Expo Design System

Expo's marketing site reads like a quietly-confident React Native developer platform. The canvas is pure white with a soft sky-blue gradient wash behind the hero band — the only atmospheric decoration on the page. Near-black ink at #171717 carries both display and body, and the single brand voltage is pure black at #000000, reserved for primary CTAs. A small blue text-link accent at #0d74ce shows up inside body copy, never on a button. The brand's strongest signature is the device-mockup hero: a centered MacBook plus iPhone composite showing real Expo dev surfaces — Expo Studio, the EAS Build dashboard, the Expo Go simulator — sitting over the sky gradient. The composite is the page chrome instead of an illustration, and it tells you what the product does without a single bullet point.

This page packages all of that into a single DESIGN.md file using the Google Labs spec format. Inside: 24 color tokens grouped into brand, surface, atmospheric, hairline, text, and semantic; 15 type styles all running Inter except for the JetBrains Mono code style; 9 corner radii from 4px hairlines to a 9999px pill reserved for badges only; a 4px-based spacing scale that tops out at a 96px section rhythm; and 24 component recipes covering top nav, three button tiers, hero band, device mockup, feature cards in light and dark, workflow steps, code blocks, IDE mockups, two pricing tiers, text input, badge pill, ecosystem tile, CTA band, and footer.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Expo's editorial restraint — pure black CTAs at 8px radius, Inter 600 for display, JetBrains Mono on every code surface — instead of inventing a saturated brand color the page doesn't have. Reference the tokens directly inside Tailwind config or CSS variables when you want a developer-tool surface that earns trust through neutrality rather than chrome. The discipline of refusing a saturated action color and trusting Inter at weight 600 is what makes this system worth studying.