Reddit Design System

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.