Meta Design System

Meta's design system reads like a hardware merchandiser that learned restraint. Across meta.com, the Quest 3S configurator, the Ray-Ban Meta product detail page, and the prescription-lens upsell, the same playbook holds: a stark white canvas, full-bleed product photography on 32px-rounded cards, and a confident Optimistic VF wordmark anchoring every heading. The brand voice is photography-first — large images take 50 to 70 percent of the viewport height above the fold, and the type tucks underneath at modest weights rather than fighting for attention.

This DESIGN.md captures the spec across 24 color tokens, 16 typography styles, 10 corner radii, 13 spacing values, and 33 components — every primary surface from `button-buy-cta` to `tech-specs-table`. The most distinctive token is the dual-primary system: a black pill (`#000000`) for marketing CTAs that flips to saturated cobalt (`#0064e0`) the moment the user enters the buy-now flow. The file follows the Google Labs DESIGN.md format, so every value is machine-readable and references the same token names Meta's own engineering teams would use.

Feed this file to Claude, Cursor, or GitHub Copilot and the agent produces React components that look like a Meta commerce surface rather than a generic e-commerce theme. The pill buttons stay at `rounded.full` (100px), the photographic feature cards skip the border-and-shadow chrome, and the 300-weight editorial subheads slot in between the 500-weight displays. The discipline worth studying here is the cobalt-versus-black split — Meta uses color scarcity as a navigational signal, telling the user exactly which surface they're standing on without saying a word.