Hugging Face Design System

Hugging Face's homepage is a research dashboard that pretends to be a marketing page. The fold opens on a near-black canvas ("#0b0f19") with a single 48px Source Sans Pro wordmark headline — "The AI community building the future." — over a wall of IBM Plex Mono code samples showing actual `transformers` API calls. There is no hero illustration, no gradient mesh, no product mockup card. The page leans on the type and the code, and that is the entire brand voice. The dark band only runs for one viewport; below the fold the canvas inverts to pure white ("#ffffff") and stays there for the remainder of the page, populated with model cards, dataset rows, and Spaces grids that read like a notebook index rather than a SaaS landing template.

This DESIGN.md packages the whole surface into one machine-readable file. Inside: 22 color tokens grouped into hero-dark, workspace-light, and category-signal layers, 12 typography roles split between Source Sans Pro (display through caption) and IBM Plex Mono (repo IDs and code), 6 radii anchored at 8px, 9 spacing values pivoting on 8px and 16px, and 17 components covering the dark hero band, white workspace cards, category pills, repo rows, and the model carousel. The schema follows the Google Labs DESIGN.md specification — every token quotes its hex and every numeric component value is a string.

Pipe the file into Claude, Cursor, or Copilot when you need a build that looks like Hugging Face rather than a generic AI startup. The agent reproduces the dark-to-white surface flip, the wordmark-headline-over-code-block hero, the multi-hue repo pills used only as signal, and the 8px card rhythm — without inventing gradient washes or oversized hero illustrations. Or treat it as an audit reference: any drift from the two-surface rule or the Source-Sans-only display ladder shows up immediately against the token list.