--- version: alpha name: Reddit website: "https://www.reddit.com" description: >- A community-feed system anchored on Reddit Orangered ("#d93a00") for upvote and admin identity, a cooler Alien Blue ("#0079d3") and Action Primary ("#24a0ed") for links and primary CTAs, and a Periwinkle ("#7193ff") downvote that splits the voting voltage across two opposing hues; every chrome surface runs the native -apple-system / Segoe UI / Roboto stack at modest weights, with a "9999px" full-pill button geometry, a "0.25rem" card radius, an uppercase 10px label register, and a tone-1 through tone-7 grey ladder that carries every text, hairline, and surface color across the captured marketing chrome. seo: title: "Reddit Design System for React — Orangered #d93a00, Alien Blue #0079d3, 20 components" metaDescription: "Reddit's design system as a DESIGN.md file. Orangered #d93a00, Alien Blue #0079d3, system-font stack, 20 colors, 20 components. For React, Next.js, and AI tools." highlights: - "Split-voltage voting palette — Orangered '#d93a00' carries upvote and admin identity, Periwinkle '#7193ff' carries downvote, the two never share a button" - "Native font stack as type signature — every text role runs the OS sans (-apple-system, Segoe UI, Roboto) with no proprietary face on the chrome" - "Pill-or-card binary — interactive elements collapse to a '9999px' full-pill while every surface card snaps to a tight '0.25rem' corner" - "Tone-1 through tone-7 grey ladder — '#1a1a1b' ink steps through '#878a8c', '#d3d6da', '#eaedef', '#f6f7f8' to '#ffffff' across every neutral on the page" - "Uppercase 10px label register — section labels render at 0.625rem weight 700 with '0.5px' tracking, the only typographic register on the chrome that shouts" tags: - "Social & Community" lastUpdated: "2026-05-13" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.reddit.com" title: "Reddit — official site" description: "The front page of the internet — community-driven discussion across 100,000+ subreddits." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Reddit's primary brand color?" answer: "Reddit Orangered is '#d93a00' — the signature voltage that carries the upvote arrow, the admin-tag label, and the live-stream identity dot. The system exposes it through four CSS variables: '--color-global-orangered', '--color-action-upvote', '--color-identity-admin', and '--color-category-live'. A second voting voltage sits opposite: Periwinkle '#7193ff' for the downvote arrow alone, declared as '--color-action-downvote'. Between them runs a four-stop blue stack — Alien Blue '#0079d3' for switch checked states, Action Primary '#24a0ed' for primary-button hover, Action Secondary '#006cbf' for tertiary text and outline-button borders, and a deep navy '#1d2535' for the dark canvas. The split-voltage system is the brand's defining move: Orangered and Periwinkle never share a button surface." - id: "typography" title: "What typography does Reddit use, and what fallbacks ship?" answer: "Reddit ships no proprietary typeface — every text role on the captured chrome runs the native operating-system sans stack: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", sans-serif'. The system declares six title registers (h0 26px / h1 22px / h2 20px / h3 18px / h4 16px / h5 14px / h6 12px) all at weight 500, four button registers (lg 18px / md 16px / sm 14px / xs 12px) at weight 700, plus a body register at 14px weight 400 and an uppercase label register at 10px weight 700 with '0.5px' tracking. The decision to lean on system fonts rather than ship a custom face is a load-bearing brand decision — Reddit reads as the operating-system's own forum, not a SaaS product." - id: "shape-language" title: "What does Reddit's shape vocabulary look like?" answer: "The radius scale is short and split: '0.25rem' (4px) for cards, accordions, and surface containers; '2rem' (32px) for the secondary card / accordion-large variant; and '9999px' for every interactive pill — buttons, switches, status chips, the language selector. Every CTA on the captured chrome — primary, secondary, tertiary, plain — resolves to the same full-pill geometry; the system never lets an interactive element render as a sharp corner. Card surfaces (subreddit cards, accordion panels, the modal interior) snap to the tight '0.25rem' tier, which keeps the layered feed-chrome reading as content rather than as a decorative artifact." - id: "voting-split" title: "Why does Reddit use Orangered for upvote and Periwinkle for downvote?" answer: "The split-voltage voting palette is the brand's most recognizable visual decision. Orangered '#d93a00' renders on every upvote arrow, every admin badge, and the live-stream dot — three semantic roles bound to the same hue, all of them positive. Periwinkle '#7193ff' renders exclusively on the downvote arrow, with no other semantic role assigned to it. The two never share a surface — Orangered never highlights a downvoted post, Periwinkle never highlights an upvoted post. Unlike the convention of using a single accent for both directions of a binary vote (a green vs. a grey, a saturated vs. a desaturated), Reddit splits the voltage across two opposing hues; the polarity of community sentiment is encoded as chromatic opposition." - id: "elevation" title: "How does Reddit handle elevation and depth?" answer: "The system declares four elevation levels through CSS custom properties: '--elevation-xs' (a 1-2px drop at 25% ink opacity), '--elevation-sm' (a 4px drop plus a 4px ambient at 15% opacity, two-layer fan), '--elevation-md' (an 8px primary plus 12px ambient stack at 10-25% opacity), and '--elevation-lg' (a 12px primary plus 32px ambient at 15-25% opacity — the heaviest shadow on the chrome). The boxshadow-navigation token uses 'rgba(0, 0, 0, 0.1)' at 14px blur for the sticky header, and the boxshadow-modal token uses 'rgba(26, 26, 27, 0.3)' tinted with the tone-1 ink color for the dialog elevation. The focus ring is a '0.25rem' offset of Alien Blue '#0079d3' — the only chromatic shadow on the chrome." - id: "use-in-project" title: "Can I use this DESIGN.md to build a Reddit-style React project?" answer: "Yes — feed it to Claude, Cursor, or Copilot and the agent will produce React components that match Reddit's chrome voice: the native-sans system stack, the split Orangered-vs-Periwinkle voting voltage, the four-stop blue stack for links and CTAs, the tone-1 through tone-7 grey ladder, and the pill-or-card '9999px' / '0.25rem' radius binary. Or reference tokens directly: every hex, every typography level, every radius and spacing step is a quoted value ready to paste into Tailwind config or CSS custom properties. The 20 component recipes cover the marketing chrome — four button variants, the dark-canvas nav, switches, status pills, focus rings, text inputs, the modal — not the full in-product feed timeline or the comment-thread shell." colors: orangered: "#d93a00" periwinkle: "#7193ff" alien-blue: "#0079d3" action-primary: "#24a0ed" action-secondary: "#006cbf" visited-purple: "#660099" mod-green: "#46d160" status-green: "#43b581" self-teal: "#0dd3bb" coin-yellow: "#ddbd37" alert-amber: "#ffb000" alert-red: "#ea0027" nsfw-pink: "#ff3881" navy-deep: "#1d2535" ink: "#1a1a1b" ink-mute: "#576f76" tone-3: "#878a8c" tone-4: "#d3d6da" tone-5: "#eaedef" tone-6: "#f6f7f8" canvas: "#ffffff" hairline: "#edeff1" scrim: "rgba(26,26,27,0.3)" typography: display-xl: fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" fontSize: 26px fontWeight: 500 lineHeight: 32px letterSpacing: "normal" display-lg: fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" fontSize: 22px fontWeight: 500 lineHeight: 26px letterSpacing: "normal" display-md: fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 24px letterSpacing: "normal" heading-md: fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 22px letterSpacing: "normal" heading-sm: fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 20px letterSpacing: "normal" heading-xs: fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px letterSpacing: "normal" body-md: fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: "normal" body-sm: fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: "normal" button-lg: fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 22px letterSpacing: "normal" button-md: fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 20px letterSpacing: "normal" button-sm: fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 18px letterSpacing: "normal" button-xs: fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 14px letterSpacing: "normal" label-uppercase: fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" fontSize: 10px fontWeight: 700 lineHeight: 15px letterSpacing: "0.5px" textTransform: uppercase code-md: fontFamily: "'Noto Mono', Menlo, Monaco, Consolas, monospace" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: "normal" rounded: none: "0px" sm: "4px" lg: "32px" full: "9999px" spacing: xxs: "2px" xs: "4px" sm: "8px" md: "12px" base: "16px" lg: "24px" xl: "32px" xxl: "48px" components: button-primary: backgroundColor: "{colors.alien-blue}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "0 24px" height: "44px" border: "0" button-primary-hover: backgroundColor: "{colors.action-primary}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "0 24px" height: "44px" button-primary-disabled: backgroundColor: "{colors.tone-6}" textColor: "{colors.ink-mute}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "0 24px" height: "44px" button-secondary: backgroundColor: "transparent" textColor: "{colors.action-secondary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "0 24px" height: "44px" border: "1px solid #006cbf" button-tertiary: backgroundColor: "{colors.tone-6}" textColor: "{colors.action-secondary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "0 16px" height: "34px" border: "0" button-plain: backgroundColor: "transparent" textColor: "{colors.action-secondary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "0 16px" height: "34px" border: "0" upvote-button: backgroundColor: "transparent" textColor: "{colors.orangered}" typography: "{typography.button-sm}" rounded: "{rounded.full}" padding: "4px 8px" height: "22px" border: "0" downvote-button: backgroundColor: "transparent" textColor: "{colors.periwinkle}" typography: "{typography.button-sm}" rounded: "{rounded.full}" padding: "4px 8px" height: "22px" border: "0" top-nav: backgroundColor: "{colors.navy-deep}" textColor: "{colors.canvas}" typography: "{typography.body-md}" padding: "8px 16px" height: "48px" border: "0" nav-link: backgroundColor: "transparent" textColor: "{colors.action-secondary}" typography: "{typography.body-md}" padding: "0" height: "20px" text-input: backgroundColor: "{colors.tone-6}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "0 12px" height: "40px" border: "1px solid #edeff1" text-input-focus: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "0 12px" height: "40px" border: "1px solid #006cbf" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "16px" border: "1px solid #edeff1" accordion-panel: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "8px 16px" border: "1px solid #edeff1" status-pill-mod: backgroundColor: "{colors.mod-green}" textColor: "{colors.canvas}" typography: "{typography.label-uppercase}" rounded: "{rounded.full}" padding: "2px 8px" height: "16px" status-pill-admin: backgroundColor: "{colors.orangered}" textColor: "{colors.canvas}" typography: "{typography.label-uppercase}" rounded: "{rounded.full}" padding: "2px 8px" height: "16px" status-pill-error: backgroundColor: "{colors.alert-red}" textColor: "{colors.canvas}" typography: "{typography.label-uppercase}" rounded: "{rounded.full}" padding: "2px 8px" height: "16px" status-pill-nsfw: backgroundColor: "{colors.nsfw-pink}" textColor: "{colors.canvas}" typography: "{typography.label-uppercase}" rounded: "{rounded.full}" padding: "2px 8px" height: "16px" switch-on: backgroundColor: "{colors.alien-blue}" textColor: "{colors.canvas}" typography: "{typography.body-sm}" rounded: "{rounded.full}" padding: "0" height: "20px" border: "0" switch-off: backgroundColor: "{colors.tone-3}" textColor: "{colors.canvas}" typography: "{typography.body-sm}" rounded: "{rounded.full}" padding: "0" height: "20px" border: "0" modal: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "24px" border: "0" focus-ring: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.full}" padding: "0" border: "4px solid #0079d3" --- ## Overview Reddit's chrome is the operating system's own forum, dressed for the public web — every text role on the page renders in the native `-apple-system` / `BlinkMacSystemFont` / `'Segoe UI'` / Roboto stack with no proprietary face shipped on the marketing surface, and the voting voltage is split across two opposing hues that never touch the same button. Orangered (`#d93a00`) carries the upvote arrow, the admin tag, the live-stream identity dot, and the category-live indicator — four semantic roles bound to one chromatic value. Periwinkle (`#7193ff`) carries the downvote arrow alone, no other role attached. Between the two extremes sits the four-stop blue stack — Alien Blue `#0079d3` for switch-checked surfaces, Action Primary `#24a0ed` for the primary-button hover, Action Secondary `#006cbf` for tertiary text and outline borders, and a deep navy `#1d2535` for the dark canvas region — and a tone-1 through tone-7 grey ladder that handles every non-chromatic ink, hairline, surface, and disabled state. **Split-voltage voting**: where most binary-vote interfaces (Stack Overflow, Hacker News, Twitter's heart) collapse positive and negative sentiment into a single accent that toggles on/off, Reddit splits the polarity across two opposing hues — Orangered for up, Periwinkle for down — and refuses to let the two cohabit. The upvote button can never render with Periwinkle text, the downvote arrow can never render with Orangered fill, and no chrome button in the catalog uses either color as its primary background. Both voltages live exclusively inside the voting widget; the rest of the chrome runs through the blue stack and the seven-tone grey ladder. The typography is the second voice signature. **System-sans as brand**: Reddit declares no proprietary face. The full CSS variable stack lists `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif` for every text role from h0 26px down to the 10px uppercase label — a deliberate decision that lets the platform's own letterforms carry the brand. Unlike the convention of shipping a custom display face for a 20-year-old consumer property (Airbnb Cereal, Stripe Sohne, Discord Ginto Nord), Reddit trusts San Francisco on iOS, Segoe on Windows, and Roboto on Android to render its 1.4 billion monthly headlines. The display tier runs six title sizes (h0 26 / h1 22 / h2 20 / h3 18 / h4 16 / h5 14 / h6 12px) all at weight 500, the button tier runs four sizes (18 / 16 / 14 / 12px) at weight 700, and the uppercase label register sits alone at 10px weight 700 with `0.5px` positive tracking — the only typographic register on the chrome that shouts. **Key Characteristics:** - Split-voltage voting palette — Orangered `{colors.orangered}` (`#d93a00`) for upvote/admin/live, Periwinkle `{colors.periwinkle}` (`#7193ff`) for downvote, the two never share a button - Native operating-system sans stack — `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto` renders every text role on the chrome with no proprietary face - Four-stop blue ladder — Alien Blue `#0079d3`, Action Primary `#24a0ed`, Action Secondary `#006cbf`, Navy-deep `#1d2535` handle links, CTAs, outlines, and dark canvas in that order - Tone-1 through tone-7 grey ladder — `#1a1a1b` ink, `#576f76` mute, `#878a8c` tone-3, `#d3d6da` tone-4, `#eaedef` tone-5, `#f6f7f8` tone-6, `#ffffff` canvas - Pill-or-card radius binary — every interactive surface resolves to `9999px`, every card snaps to `0.25rem` (4px), with one outlier `2rem` (32px) tier for the secondary accordion variant - Uppercase 10px label register — `0.5px` positive tracking, weight 700, the only typographic register that breaks lowercase - Four button-height tier — 22px, 34px, 44px, 54px (xs / sm / md / lg) all share the full-pill geometry ## Colors The palette splits along three function lines: a split-voltage **voting pair** (Orangered for up, Periwinkle for down), a four-stop **blue stack** for links, CTAs, switches, and outlines, and a tone-1 through tone-7 **grey ladder** that handles every neutral structural role. A small identity stack (moderator green, visited purple, self-teal, coin yellow, NSFW pink) and an alert stack (red, amber) sit outside the chrome and live only inside in-product semantic surfaces. - **Orangered (`#d93a00`)** — frequency 0 on the captured chrome, declared in 4 CSS variables: `--color-global-orangered`, `--color-action-upvote`, `--color-identity-admin`, `--color-category-live`. Reserved for upvote arrows, admin badges, the live-stream identity dot, and the category-live indicator. The singular brand voltage that gives Reddit its 19-year-old visual signature — never used as a button fill on the captured marketing chrome, exclusively the upvote arrow and identity-tag color. - **Periwinkle (`#7193ff`)** — frequency 0 on captured chrome, declared as `--color-action-downvote`. The downvote arrow voltage; one semantic role, one CSS variable. The split-voltage opposite of Orangered — the two never share a surface and never appear in the same component. - **Alien Blue (`#0079d3`)** — frequency 0 on captured chrome, declared in 3 variables: `--color-global-alienblue`, `--color-switch-input-background-checked`, `--color-switch-input-background-checked-hover`. Reserved for the switch-on surface and the focus-ring color; the structural blue that handles toggle states and accessibility outlines. - **Action Primary (`#24a0ed`)** — frequency 0 on captured chrome, declared as `--color-action-primary`, `--color-primary-background`, `--color-button-primary-background-hover`. The brighter blue used on primary-button hover surfaces and the primary background tier. - **Action Secondary (`#006cbf`)** — frequency 0 on captured chrome, declared in 19 variables including `--color-a-default`, `--color-button-secondary-text`, `--color-button-tertiary-text`, `--color-button-plain-text`, `--button-color-text-default`. The workhorse blue — link color, secondary-button text, tertiary-button text, plain-button text, outline-button border. The most-referenced blue token in the system. - **Visited Purple (`#660099`)** — declared as `--color-primary-visited`. The traditional visited-link color, a 1990s web convention preserved as a load-bearing token in Reddit's link chrome — the visual continuity with the early-web forum aesthetic the brand was born into. - **Mod Green (`#46d160`)** — declared in 3 variables: `--color-alert-positive`, `--color-identity-moderator`, `--color-success-content`. The moderator-identity color, also the success-state and positive-alert color — three semantic roles bound to one green. - **Self Teal (`#0dd3bb`)** — declared as `--color-identity-self`. The "you" indicator color inside threads; renders on the current-user's own comment-author label. - **Coin Yellow (`#ddbd37`)** — declared as `--color-identity-coins`. The Reddit Coins indicator color; renders on award badges and the coin-balance counter. - **Alert Amber (`#ffb000`)** — declared as `--color-alert-caution`. The caution-tier alert; renders on warning banners and form-validation cautions. - **Alert Red (`#ea0027`)** — declared in 2 variables: `--color-alert-negative`, `--color-danger-content`. The error-tier alert and destructive action color; renders on validation errors, delete-confirmation modals, and destructive-button fills. - **NSFW Pink (`#ff3881`)** — declared as `--color-category-nsfw`. The "not safe for work" category tag color; reserved for content-warning badges and adult-content pills. - **Navy Deep (`#1d2535`)** — declared as `--color-global-darkblue`. The dark canvas color; renders as the top-nav background and the dark-theme page surface. - **Ink (`#1a1a1b`)** — frequency 18 (text 9, border 9). Declared in 7 variables including `--color-tone-1`, `--color-input-text`, `--color-label-default`, `--color-scrim`, `--color-opacity-08`, `--color-category-spoiler`. The primary ink and the highest-frequency non-white color on the chrome — every body paragraph, every input label, every default text role resolves through this tone. - **Ink Mute (`#576f76`)** — frequency 6 (text 3, border 3). Declared in 7 variables, all `*-text-disabled` and `*-border-disabled` roles. The disabled-state ink — every dimmed label, every disabled button border. Tone-2 on the official ladder. - **Tone-3 (`#878a8c`)** — declared in 3 variables: `--color-tone-3`, `--color-switch-input-background-default`, `--color-switch-input-background-hover`. The off-state switch surface and the mid-grey label tone. - **Tone-4 (`#d3d6da`)** — declared as `--color-tone-4`. The light-grey divider and inactive-card border tone. - **Tone-5 (`#eaedef`)** — frequency 1 (bg 1). Declared in 5 variables including `--color-divider-default`, `--color-input-border`, `--color-ui-canvas`. The hairline border color and the UI canvas wash — the lightest visible grey on the chrome before the page collapses to pure white. - **Tone-6 (`#f6f7f8`)** — declared in many `--color-button-*-background` variants. The default surface fill for tertiary buttons, disabled-state surfaces, and the resting text-input background. - **Canvas (`#ffffff`)** — frequency 1 (bg 1). Declared in 16 variables across `--color-tone-7`, `--color-global-white`, `--color-ui-modalbackground`, `--color-input-default`, and most `*-background-disabled` roles. The page background, modal interior, and on-dark text color. - **Hairline (`#edeff1`)** — declared as `--color-tone-5` alternative and across `--misc-accordion-border`. The 1px border rendered on cards, accordions, and input chrome — the structural divider that handles every "card meets canvas" boundary. - **Scrim (`rgba(26,26,27,0.3)`)** — declared as `--color-scrim`. The ink color at 30% opacity, used as the modal overlay and the photo-darkening wash on hero illustrations. ## Typography Every text role on the chrome resolves to the same native font stack — `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif`. There is no proprietary face declared on the captured chrome. The CSS variables `--font-sans` (the body stack), `--font-mono` (`'Noto Mono', Menlo, Monaco, Consolas, monospace` for code), and `--font-body` (0.875rem / 14px base size) configure the entire typographic scale, and every higher-level token (`--font-title-h0` through `--font-title-h6`, `--font-button-lg` through `--font-button-xs`, `--font-label-default`) inherits from `--font-sans`. The display tier runs six title sizes — h0 26px, h1 22px, h2 20px, h3 18px, h4 16px, h5 14px, h6 12px — all at weight 500 with line-heights that step from 32px down to 16px in a tight 4-6px rhythm. Tracking stays at `normal` across every title register; the system does not deploy negative tracking even on the largest 26px hero. The button tier runs four sizes at weight 700 — lg 18px / 22px line-height, md 16px / 20px, sm 14px / 18px, xs 12px / 14px — and matches the four button height tokens (xs 22px, sm 34px, md 44px, lg 54px) one-to-one. The body register is 14px weight 400 with 20px line-height; the small register drops to 12px / 16px. The single typographic register that breaks the lowercase chrome is the label tier — 10px (0.625rem) weight 700 with `0.5px` positive tracking and `uppercase` text-transform, declared through `--misc-label-text-transform` and `--misc-label-letter-spacing`. The code-md register switches the stack to `'Noto Mono', Menlo, Monaco, Consolas, monospace` at 14px weight 400 for inline code and code-block content. ## Layout The marketing page composes a column-first vertical scroll on a 1440px-wide canvas, with the inner content held to a ~1100px max-width container and the outer page wash running edge-to-edge in the tone-5 `#eaedef` UI canvas color. The top-nav strip renders as a 48px-tall navy-deep `#1d2535` band that sticks to the viewport top with the `--boxshadow-navigation` (`0px 4px 14px rgba(0, 0, 0, 0.1)`) elevation. Subsequent feed cards stack vertically with a 16px gap (spacing-base token), each card rendering as a `0.25rem`-radius surface on the canvas with a 1px tone-5 `#edeff1` hairline border. The vertical rhythm leans on a 4-8-16-24-32-48px spacing scale exposed through `--spacer-4xs` (2px), `--spacer-2xs` (4px), `--spacer-xs` (8px), `--spacer-sm` (12px), `--spacer-md` (16px), `--spacer-lg` (24px), `--spacer-xl` (32px), and `--spacer-2xl` (48px). The button-internal padding tokens are split — `--spacer-button-sm-px` (16px), `--spacer-button-md-px` (24px), `--spacer-button-lg-px` (24px) — and the button heights step in a 22 / 34 / 44 / 54px ladder via `--size-button-xs-h` through `--size-button-lg-h`. The size scale runs from `--size-2xs` (4px) through `--size-xs` (8px), `--size-sm` (12px), `--size-md` (16px), `--size-lg` (24px), `--size-xl` (32px), `--size-2xl` (48px), `--size-3xl` (64px), `--size-4xl` (96px), and `--size-5xl` (128px) — a ten-step scale tuned to a 4-multiple base. ## Elevation & Depth Depth is encoded through four declared elevation tokens — `--elevation-xs`, `--elevation-sm`, `--elevation-md`, `--elevation-lg` — plus three named box-shadows for chrome features: `--boxshadow-navigation`, `--boxshadow-modal`, and `--boxshadow-tooltip`. The elevation-xs shadow is a tight 1-2px drop at 25% ink opacity; elevation-sm doubles the layer count to a 4px drop plus a 4px ambient layer at 15% opacity; elevation-md sits at an 8px primary plus 12px ambient stack at 10-25% opacity; and elevation-lg lifts to a 12px primary plus 32px ambient stack at 15-25% opacity — the heaviest shadow on the chrome, reserved for the dropdown panel and the floating action menu. The navigation shadow uses `rgba(0, 0, 0, 0.1)` at 14px blur — a 10% opacity drop reserved for the sticky top-nav strip. The modal shadow steps up to `rgba(26, 26, 27, 0.3)` at 15px blur and tints the shadow color with the ink tone-1 `#1a1a1b` rather than pure black — a chromatic-tinted shadow that pulls the modal-card surface closer to the page's grey ladder. The tooltip shadow combines two layers at 15% opacity — a 1px-blur primary plus a 4px-blur ambient — that reads as a soft hovering chip. The focus-ring elevation (`--elevation-focus-ring`) renders as a 4px offset of Alien Blue `#0079d3`, the only chromatic shadow on the chrome and the load-bearing accessibility signal for keyboard navigation. ## Shapes The radius scale is short and intentional: `0px` for sharp dividers, `0.25rem` (4px) for cards, accordions, inputs, and surface containers, `2rem` (32px) for the accordion-large variant (the outlier mid-tier), and `9999px` (declared as `--radius-full: 624.9375rem`) for every interactive pill — buttons, switches, status chips, badges, the focus ring. **Pill-or-card binary**: every interactive element on the chrome resolves to a full-pill, every card surface snaps to the tight 4px corner. Unlike the convention of running a single radius across an entire system (Bootstrap's 4px, Material's 4px or 8px), Reddit splits the geometry across two extremes — full-pill for click affordances, near-square for content surfaces — and the gap signals "interactive vs. canvas" at a glance. The accordion-size radius (`--radius-accordion-size`) sits at `0.25rem`, matching the card tier; the radius-sm token sits at `0.25rem`; the radius-lg token sits at `2rem` for the secondary accordion / panel-large surface. There is no 8px, 12px, or 16px radius declared anywhere on the chrome — the system skips the mid-tier entirely and runs only the 0 / 4 / 32 / 9999px steps. ## Components - **button-primary** — Alien Blue `{colors.alien-blue}` (`#0079d3`) fill, white text, button-md typography at 16px weight 700, 44px tall, 24px horizontal padding, `9999px` full-pill radius. The primary CTA shape, used for "Sign up", "Continue", and the in-product "Join community" actions. - **button-primary-hover** — Action Primary `{colors.action-primary}` (`#24a0ed`) fill, same geometry. The hover state lifts the saturation rather than darkening — inverts the typical hover-darkens convention but characteristic of Reddit's blue stack. - **button-primary-disabled** — Tone-6 `{colors.tone-6}` (`#f6f7f8`) fill with ink-mute `{colors.ink-mute}` (`#576f76`) text. The disabled register pulls the button fully into the grey ladder. - **button-secondary** — Transparent fill, Action Secondary `{colors.action-secondary}` (`#006cbf`) text, 1px Action Secondary border, 44px × 24px geometry. The outline-button variant — the only chrome surface that exposes a colored border. - **button-tertiary** — Tone-6 `{colors.tone-6}` (`#f6f7f8`) fill, Action Secondary `{colors.action-secondary}` (`#006cbf`) text, 34px tall, 16px horizontal padding, full-pill. The smaller utility CTA used for inline actions. - **button-plain** — Transparent fill, Action Secondary text, 34px × 16px geometry. The borderless plain-button variant for low-emphasis actions. - **upvote-button** — Transparent fill, Orangered `{colors.orangered}` (`#d93a00`) icon and text, 22px tall, 4px × 8px padding, full-pill. The signature upvote affordance — the only chrome surface that renders Orangered. - **downvote-button** — Transparent fill, Periwinkle `{colors.periwinkle}` (`#7193ff`) icon and text, same 22px × 4px × 8px geometry. The signature downvote affordance — the only chrome surface that renders Periwinkle. - **top-nav** — Navy-deep `{colors.navy-deep}` (`#1d2535`) fill, white text, body-md typography, 48px tall, 8px × 16px padding. The sticky header strip with the `--boxshadow-navigation` elevation. - **nav-link** — Transparent fill, Action Secondary text at body-md, 20px line-height. The top-nav link items. - **text-input** — Tone-6 `{colors.tone-6}` (`#f6f7f8`) fill, ink text, body-md typography, 40px tall, 12px horizontal padding, 4px corner radius, 1px tone-5 `#edeff1` hairline border. - **text-input-focus** — Canvas white fill, 1px Action Secondary `#006cbf` border, same geometry. Focus is signaled by the border-color shift plus the `0 0 0 0.25rem #0079d3` focus-ring elevation. - **card** — Canvas white fill, ink text, body-md typography, 4px corner radius, 16px padding, 1px tone-5 `#edeff1` border. The default subreddit-card and feed-item surface. - **accordion-panel** — Same surface chrome as card, with 8px × 16px padding for the lower-density accordion variant. - **status-pill-mod** — Mod Green `{colors.mod-green}` (`#46d160`) fill, white label-uppercase text at 10px weight 700 with `0.5px` tracking, full-pill, 2px × 8px padding, 16px tall. The moderator identity badge. - **status-pill-admin** — Orangered `{colors.orangered}` (`#d93a00`) fill, white label-uppercase text, same geometry. The admin identity badge — the second chrome surface (after the upvote arrow) that renders Orangered. - **status-pill-error** — Alert Red `{colors.alert-red}` (`#ea0027`) fill, white label-uppercase text, same geometry. The destructive / error-state pill. - **status-pill-nsfw** — NSFW Pink `{colors.nsfw-pink}` (`#ff3881`) fill, white label-uppercase text, same geometry. The "NSFW" content-warning tag. - **switch-on** — Alien Blue `{colors.alien-blue}` (`#0079d3`) fill, 20px tall full-pill. The switch checked-state surface. - **switch-off** — Tone-3 `{colors.tone-3}` (`#878a8c`) fill, 20px tall full-pill. The switch unchecked-state surface. - **modal** — Canvas white fill, ink text, body-md typography, 4px corner radius, 24px padding, `--boxshadow-modal` elevation tinted with ink tone-1. - **focus-ring** — Transparent fill, 4px Alien Blue `#0079d3` border. The accessibility-only outline that wraps any keyboard-focused interactive surface. ## Do's and Don'ts **Do** keep Orangered `#d93a00` to upvote arrows, admin badges, and the live-stream identity dot only. The Orangered budget is bound to four CSS variables (`--color-global-orangered`, `--color-action-upvote`, `--color-identity-admin`, `--color-category-live`) and each one is a fixed semantic role. Using Orangered as a primary CTA fill breaks the split-voltage discipline that defines the brand. **Do** render every interactive button as a `9999px` full-pill. The four button-height tiers (22px / 34px / 44px / 54px) all share the same pill geometry — switching any of them to a 4px or 8px radius collapses the pill-or-card binary the chrome relies on. **Do** keep the uppercase 10px label register at exactly `0.5px` letter-spacing. The `--misc-label-letter-spacing` variable hard-codes the tracking; dropping it to `0` or stretching it to `1px` breaks the label tier's role as the single typographic register that shouts. **Don't** sub the native operating-system sans stack for a proprietary face like Inter or Roboto Flex on the marketing chrome. The system font choice is load-bearing — Reddit reads as the OS's own forum precisely because the type is San Francisco on macOS, Segoe on Windows, and Roboto on Android. Pinning the stack to one face collapses the platform-native rendering the brand has trusted for 19 years. **Don't** use Periwinkle `#7193ff` as a primary-button fill or a link color. Periwinkle is bound exclusively to `--color-action-downvote` — assigning it any other role breaks the one-color-one-role discipline that splits the voting voltage in the first place. The natural temptation to use Periwinkle as a "secondary accent" because it's the only other saturated chrome color must be resisted. **Don't** drop the focus-ring offset from `0.25rem` to `0.0625rem` because "thinner looks lighter." The 4px ring at Alien Blue `#0079d3` is the system's load-bearing accessibility signal — the only chromatic shadow on the chrome, and the single visual cue that says "this element is keyboard-focused." **Don't** introduce a third radius between `0.25rem` (4px) and `9999px`. The system runs the pill-or-card binary intentionally; adding an 8px or 12px tier produces a third "kind of rounded" geometry that erases the chrome-vs-canvas boundary. The one exception is the `2rem` (32px) accordion-large variant — keep that as the only mid-tier and don't expand the radius vocabulary further. **Don't** tint shadow colors with pure black. The `--boxshadow-modal` token uses `rgba(26, 26, 27, 0.3)` — the tone-1 ink color, not pure-black `rgba(0,0,0,0.3)` — which pulls the modal elevation into the same grey ladder as the rest of the chrome. Substituting pure black flattens the chromatic harmony the system uses to keep depth and ink tied to one ladder. ## Known Gaps - **In-product feed shell** (subreddit sidebar, comment-tree indentation, vote-count animation) is out of scope — the captured surface is the public chrome only. The component recipes here cover marketing chrome, not the full timeline. - **Mobile breakpoint behavior** is not captured. The responsive collapse pattern (hamburger nav, single-column feed reflow, bottom-tab bar on iOS/Android web) is known but not extracted from this snapshot. - **Dark mode** — Reddit ships a full dark theme that inverts the tone ladder (canvas drops to the ink tone-1, body text lifts to a soft off-white near tone-7) and remaps the blue stack for legibility on dark surfaces. The captured snapshot is the light theme only. - **Motion** — vote-arrow tap feedback (the orangered fill that bursts on click), the karma-tick increment animation, and the chat-message slide-in are not in the captured tokens. - **Hover and focus state pixel-precise treatments** for nav links, inline links, and the upvote / downvote arrow hover states are only partially extracted. - **Form validation** — error-state borders, helper-text styles, and inline form-validation messaging beyond the `alert-red` and `alert-amber` color tokens are not captured. - **Reddit Coins chrome** — the gold-tier subscriber UI, coin-purchase modal, and award-bestowal flow are out of scope; only the `#ddbd37` coin-yellow identity token is captured.