Reddit Design System

Reddit's chrome is the chrome of a 19-year-old forum that grew up — every text role on the page renders in the native operating-system sans (`-apple-system`, `BlinkMacSystemFont`, `'Segoe UI'`, Roboto, `'Helvetica Neue'`, Arial) with no proprietary face anywhere on the marketing surface, and the voting palette is split across two opposing hues that neither blend nor share a button. Orangered (`#d93a00`) carries the upvote arrow, the admin label, and the live-stream identity dot; Periwinkle (`#7193ff`) carries the downvote arrow alone. Between them sits a sober Alien Blue (`#0079d3`) for links and switch-on states, a brighter Action Primary (`#24a0ed`) for the primary CTA hover, and an Action Secondary (`#006cbf`) for tertiary-button text and outline borders. The grey ladder runs seven steps from `#1a1a1b` ink down through `#878a8c`, `#d3d6da`, `#eaedef`, `#f6f7f8` to pure `#ffffff`, and the entire structural chrome — hairlines, surface fills, helper text, disabled states — resolves through one of those seven tones.

This file packages the Reddit marketing chrome as a single Google Labs DESIGN.md spec, sourced from the 221 `:root` CSS custom properties the page declares. Inside: 20 color tokens covering the split-voltage voting pair, the four-stop blue stack, the seven-step tone ladder, plus identity colors (`#46d160` moderator green, `#660099` visited purple, `#0dd3bb` self-teal, `#ddbd37` coin yellow, `#ff3881` NSFW pink, `#ea0027` negative-alert red, `#ffb000` caution amber); 12 typography roles all set in the native system stack with six title levels h0-h5 stepping from 26px to 12px at weight 500, four button registers from 18px down to 12px at weight 700, plus body, label, code, and small; a four-step radius scale where every CTA pill resolves to `9999px` and every card snaps to `0.25rem`; eight spacing steps tuned to a 4-8-16-24-32-48px rhythm; and 20 component recipes covering primary, secondary, tertiary, and plain button variants, the dark-blue top nav, the modal scrim, the focus ring, and the text input.

Feed this file to Claude, Cursor, or GitHub Copilot and the agent will produce React components that read as Reddit chrome — a native-sans stack, the orange-vs-periwinkle voting split, the seven-tone grey ladder, the pill-or-card binary on every interactive surface — instead of a generic social-feed theme. Or reference the tokens directly when wiring a community-driven UI: every hex is quoted, every component recipe is wired through `{token.path}` references ready to paste into Tailwind config or CSS custom properties. The system is worth studying because it argues a community network can carry a 19-year-old brand on operating-system fonts and a two-hue voting split — restraint at the chrome level, opinion at the voltage level, no proprietary type required.