Design System Inspiration of Reddit

1. Visual Theme & Atmosphere

Reddit is the internet's self-described "front page" — and its design system, the Reddit Product Language (RPL), reflects exactly that: a platform built for content discovery at massive scale, where the design recedes so community-generated content can lead. The visual language is clean, functional, and deliberately neutral, punctuated by one unmistakable brand signature: OrangeRed (#FF4500), the color of the Snoo mascot's body and the wordmark, which appears on upvote arrows, CTA buttons, and the iconic logo.

The 2023–2024 rebrand introduced Reddit Sans (a custom typeface family also released publicly), moved the system toward a rounded, friendly geometry, and shifted the primary interactive color from the raw logo orange to a slightly deeper burnt-orange (#D93900) that works better at interactive scale without washing out. The feed itself is radically content-forward: no gradients, no decorative shadows, minimal chrome. Post cards sit on a white canvas (#FFFFFF) with soft neutral borders, and every decorative element serves a functional purpose — the downvote blue-purple (#6A5CFF) is the only other saturated hue in the system, creating an intuitive upvote-orange / downvote-purple polarity that users internalize within seconds.

The RPL is built on semantic design tokens defined as CSS custom properties (e.g. --color-global-brand-orangered: #FF4500, --color-action-upvote: #D93900, --shreddit-color-wordmark: #FF4500). The web frontend ships via custom elements (shreddit-* web components), and the token system follows a role-based naming convention that clearly separates global palette constants from contextual semantic roles.

Key Characteristics:

• OrangeRed (#FF4500) as the singular brand anchor — wordmark, logo, upvote icon active state, earned flair
• Deeper burnt-orange (#D93900) as the interactive/CTA color — Log In button, upvote button fill, admin identity
• Downvote blue-purple (#6A5CFF) as the semantic opposite — upvote polarity at a glance
• Alien Blue (#1870F4) as the second brand accent — focus rings, switches, primary actions
• System font stack — no custom web font for body; Reddit Sans available but body defaults to system
• Full-pill geometry (999px / 9999px radius) dominates interactive elements — buttons, badges, inputs
• Flat, near-shadowless feed — content cards use only subtle hairline borders and minimal drop shadows
• Semantic token naming (--color-action-upvote, --color-action-downvote) — intentional polarity system

2. Color Palette & Roles

Brand / Identity

• OrangeRed (#FF4500): Signature brand color — Snoo mascot body color, logotype wordmark, upvote arrow active text/icon state. The single most recognizable hue in the system. CSS: --color-global-brand-orangered, --shreddit-color-wordmark.
• Interactive OrangeRed (#D93900): The live CTA and upvote-fill color — slightly darker than the logo orange to improve contrast on white. CSS: --color-brand-background, --color-action-upvote, --color-upvote-background. Used for: Log In button background, upvote button active fill, admin identity badge.
• OrangeRed Hover (#AE2C00): Darkened hover state for primary CTA and upvote elements. CSS: --color-brand-background-hover, --color-upvote-background-hover.

Interactive / Secondary Brand

• Alien Blue (#1870F4): The secondary brand accent — focus rings, elevation-button-focus. CSS: --color-global-alienblue.
• Action Primary (#0A449B): Primary action blue — switch checked state, primary button, link hover. CSS: --color-action-primary, --color-switch-input-background-checked, --color-primary-background.
• Action Secondary (#0A2F6C): Deep navy — secondary action dark mode, button pressed state. CSS: --color-action-secondary.
• Link Blue (#115BCA): Default hyperlink color. CSS: --color-primary, --color-a-default.
• Link Hover (#0A449B): Link hover darkening. CSS: --color-a-hover, --color-primary-hover.
• Link Visited (#9B00D4): Visited link purple. CSS: --color-a-visited.

Downvote

• Downvote Purple (#6A5CFF): Downvote button active fill, semantic opposite of upvote orange. CSS: --color-action-downvote, --color-downvote-background.
• Downvote Hover (#523DFF): Deeper purple on hover. CSS: --color-downvote-background-hover.

Neutral Surface

• Canvas White (#FFFFFF): Page background, post cards, modal backgrounds. CSS: --color-neutral-background, --color-neutral-background-strong.
• Surface Grey (#E5EBEE): Secondary surface — secondary buttons, switch track, selected states. CSS: --color-secondary-background, --color-neutral-background-canvas.
• Faint Container (#F6F8F9): Hover backgrounds, input fields. CSS: --color-neutral-background-weak, --color-neutral-background-hover.
• Container Strong (#EEF1F3): Card container backgrounds. CSS: --color-neutral-background-container-strong.
• UI Canvas (#F2F2F2): App-level canvas behind content. CSS: --color-ui-canvas.
• Dark Surface (#2A3236): Dark mode backgrounds, dark tooltip. CSS: --color-global-darkblue.

Text Hierarchy

• Text Strong (#181C1F): Nav labels, strong headings, button labels. CSS: --color-neutral-content-strong.
• Text Default (#333D42): Body copy, most UI text. CSS: --color-neutral-content.
• Text Weak (#5C6C74): Metadata, timestamps, secondary labels, placeholder text. CSS: --color-neutral-content-weak, --color-label-default.
• Divider (rgba(0,0,0,0.20)): Default borders and hairlines between posts. CSS: --color-neutral-border.

Status

• Success (#008A10): Moderator badge, success banner. CSS: --color-success-background, --color-global-moderator.
• Error (#BC0117): Error states, mods-filtered indicator text. CSS: --color-danger-content.
• Warning (#B78800): Caution states, award gold color, stars. CSS: --color-global-gold, --color-global-stars.

3. Typography Rules

Font Family

• Primary / UI: System font stack — -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif. Reddit deployed a custom Reddit Sans typeface in 2023 (also open-sourced as applied-b* font-face variants in production CSS), but the body default remains the system stack for performance. Button-specific font uses an encoded font-face (applied-button-font-0).
• Monospace: Noto Mono, monospace — used in code blocks and technical contexts.

Hierarchy

Principles

• System stack first: Reddit prioritizes performance and native feel — no blocking web font for body text.
• Weight 600 dominates interactive: Buttons, nav labels, and post titles all use weight 600 — creating clear interactive differentiation from body weight 400.
• Pill-shaped font metrics: The 999px border-radius on buttons and inputs reinforces the "friendly pill" geometry; larger paddings on pill elements compensate for the reduced visual weight of the rounded edge.
• 12px metadata density: The 12px / weight 400 tier handles the platform's dense metadata layer (vote counts, comment counts, usernames, timestamps) without competing with post content.

4. Component Stylings

Buttons

Primary CTA (Log In)

• Background: #D93900
• Text: #ffffff
• Radius: 999px
• Height: 40px
• Padding: 0px 12px
• Font: 14px / 600
• Hover: #AE2C00 background
• Use: Primary auth CTA — "Log In" in nav

Secondary (Sign Up)

• Background: #E5EBEE
• Text: #000000
• Radius: 999px
• Height: 40px
• Padding: 0px 12px
• Font: 14px / 600
• Hover: #DBE4E9 background
• Use: Secondary auth CTA — "Sign Up" in nav

Outlined Ghost (Create Post)

• Background: transparent
• Text: #181C1F
• Border: 1px solid rgba(0, 0, 0, 0.498)
• Radius: 999px
• Height: 38px
• Padding: 0px 11px
• Font: 14px / 600
• Use: "Create Post" and other secondary ghost actions

Small Action Pill

• Background: rgba(0, 0, 0, 0) (transparent)
• Text: #181C1F
• Radius: 999px
• Height: 32px
• Padding: 0px 9px
• Font: 12px / 600
• Use: Post action buttons (Share, Save, More)

Inputs

Search Bar

• Background: #F8F8F8
• Border: 1px solid transparent
• Radius: 999px
• Font: 14px / 400
• Focus: #0A449B border
• Text: #131313
• Placeholder: #5C6C74
• Use: Global site search in nav

Form Input (Bordered)

• Background: #F6F8F9
• Border: 1px solid transparent (default); #0A449B on focus
• Radius: 8px
• Font: 14px / 400
• Text: #181C1F
• Use: Login/signup form fields

Cards & Containers

Post Card (Feed)

• Background: #FFFFFF
• Border: 1px solid rgba(0, 0, 0, 0.20)
• Radius: 16px
• Shadow: 0 0.0625rem 0.25rem 0 rgba(0,0,0,0.149), 0 0.25rem 0.25rem 0 rgba(0,0,0,0.149)
• Use: Individual post card in main feed

Container Card

• Background: #EEF1F3
• Radius: 8px
• Use: Sidebar widgets, grouped content containers

Badges & Tags (Flair)

Default Flair

• Background: #E5EBEE
• Text: #333D42
• Radius: 9999px
• Padding: 2px 8px
• Font: 12px / 600
• Use: Post flair, subreddit flair, category tags

NSFW Badge

• Background: rgba(222, 1, 159, 0.15)
• Text: #DE019F
• Radius: 9999px
• Font: 12px / 600
• Use: NSFW content label (--color-global-nsfw: #DE019F)

Spoiler Badge

• Background: rgba(19, 19, 19, 0.15)
• Text: #131313
• Radius: 9999px
• Font: 12px / 600
• Use: Spoiler content label

Tabs

Sort Tab (Best / Hot / New / Top)

• Text (inactive): #333D42
• Text (active): #181C1F weight 600
• Font: 14px / 400 (inactive), 14px / 600 (active)
• Use: Feed sorting tabs below post composer

Upvote Indicator

• Active (upvoted): OrangeRed text #FF4500 on upvote arrow; #D93900 on count
• Active (downvoted): Purple #6A5CFF on downvote arrow
• Inactive: Muted #5C6C74
• Use: Upvote/downvote controls on each post — the polarity signal system

Toggles

Settings Toggle

• Background (checked): #0A449B
• Background (unchecked): #E5EBEE
• Radius: 9999px
• Handle: #FFFFFF
• Use: Preferences and settings toggles

Dialogs

Login/Signup Modal

• Background: #FFFFFF
• Radius: 16px
• Shadow: 0px 2px 15px rgba(26, 26, 27, 0.3)
• Scrim: rgba(0, 0, 0, 0.60)
• Use: Auth modal, post modals

---

Verified: 2026-06-22 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://www.reddit.com/ (homepage live inspect, headed Chrome playwright, CSS custom properties via getComputedStyle); https://www.reddit.com/r/technology/ (subreddit page second surface — full CSS custom properties scan, 360+ tokens) Tier 2 sources: getdesign.md/reddit — not found (404); styles.refero.design/?q=reddit — no Reddit match in search results Conflicts unresolved: none — full CSS token set extracted from Tier 1 live surfaces only

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px
• Notable: Post card internal padding 16px; subreddit/community sidebar 24px gaps; feed gutter varies by viewport

Grid & Container

• Max content width: ~1200px; three-column layout (feed + sidebar + context panel on desktop)
• Feed column: dominant (~60–65% width), sidebar ~30%
• Full-bleed hero for subreddit headers (banner image)
• Mobile: single-column, sidebar collapses into bottom sheet

Whitespace Philosophy

• Content-forward minimalism: the design system stands back so community content takes center stage. Tight vertical rhythm between post cards (8–12px gap) maximizes information density.
• Breathing room within cards: post card internals use generous 16px padding, but card-to-card spacing is compact.
• Flat and fast: minimal decorative whitespace; every spacing decision serves information hierarchy.

Border Radius Scale

• Sharp (4px): Inner chips, tooltips
• Standard (8px): Form inputs, container cards
• Relaxed (16px): Post cards, modal dialogs
• Pill (999px): Buttons, search bar, flair badges
• Full (9999px): Vote count pills, small badges

6. Depth & Elevation

Shadow Philosophy: Reddit uses neutral, dark-gray shadows throughout — no chromatic tinting. The shadow system is subtle and functional, emphasizing content lift rather than brand atmosphere. The scrim for modals is a deep rgba(0,0,0,0.60), communicating content lock without decorative effect.

7. Do's and Don'ts

Do

• Use #FF4500 OrangeRed for the wordmark and logo — it is the brand's single identity color
• Use #D93900 for interactive CTAs and upvote fills — slightly darker for better contrast
• Use full-pill geometry (999px radius) for all buttons, search inputs, and flair badges
• Use #6A5CFF exclusively for downvote states — the orange/purple polarity is a core UX signal
• Use #0A449B Alien Blue for focus rings, checkboxes, and switch toggles
• Use semantic token names from the RPL — role-based naming (--color-action-upvote) over raw hex
• Keep card backgrounds #FFFFFF with subtle hairline borders — no heavy shadows on content cards
• Use weight 600 for button labels, nav items, and post titles to establish interaction hierarchy

Don't

• Use #FF4500 as a button fill for interactive states — it lacks contrast on white; use #D93900
• Spread the OrangeRed to decorative elements — it means "upvote" and "action" in this system
• Use the downvote purple (#6A5CFF) for non-voting contexts — it carries specific semantic meaning
• Apply heavy box shadows to post cards — Reddit's elevation is intentionally minimal
• Use rectangular corners on buttons — the pill shape is a core identity element
• Mix the orange and blue-purple as decorative gradients — they function as opposing signals
• Use custom serif or display fonts — Reddit's voice is system-native, not editorial
• Apply high-saturation backgrounds to large surfaces — neutrals dominate; color is reserved for action

8. Responsive Behavior

Breakpoints

Touch Targets

• All primary buttons at 40px height — comfortably tappable
• Small action pill buttons at 32px height (8px padding) — borderline on mobile, but aligns with platform density expectations
• Upvote/downvote buttons: 32px × 32px minimum tap zone

Collapsing Strategy

• Sidebar: three columns → two columns → hidden (accessed via bottom drawer on mobile)
• Post title typography: scales from 18px on desktop to 16px on mobile
• Navigation: horizontal full nav → condensed with overflow menu

9. Agent Prompt Guide

Quick Color Reference

• Brand / Logo: OrangeRed (#FF4500)
• Primary CTA / Upvote active: Burnt Orange (#D93900)
• CTA Hover: Dark Orange (#AE2C00)
• Downvote active: Purple (#6A5CFF)
• Link Blue: (#115BCA)
• Focus ring / Switch: Alien Blue (#0A449B)
• Background: White (#FFFFFF)
• Card border: rgba(0,0,0,0.20)
• Body text: Dark Teal (#333D42)
• Metadata text: Slate (#5C6C74)
• Surface: Light Blue-Grey (#E5EBEE)
• Container: (#EEF1F3)

Example Component Prompts

• "Create a Reddit-style Log In button: #D93900 background, white text, 999px radius, 40px height, 0px 12px padding, 14px / weight 600 system-ui. Hover: #AE2C00."
• "Design a Reddit post card: white #FFFFFF background, 16px radius, 1px solid rgba(0,0,0,0.20) border, minimal box-shadow 0 1px 4px rgba(0,0,0,0.15). Post title 18px / 600 / #181C1F. Metadata 12px / 400 / #5C6C74."
• "Build a flair badge: #E5EBEE background, #333D42 text, 9999px radius, 2px 8px padding, 12px / 600. For NSFW: #DE019F text with rgba(222,1,159,0.15) background."
• "Create upvote/downvote controls: upvote arrow icon in #D93900 when active / #5C6C74 inactive; vote count text #D93900 when upvoted; downvote arrow #6A5CFF when active."
• "Design a Reddit modal: white #FFFFFF background, 16px radius, 0px 2px 15px rgba(26,26,27,0.3) shadow, rgba(0,0,0,0.60) backdrop scrim."

Iteration Guide

1. The OrangeRed (#FF4500) is brand identity; the burnt orange (#D93900) is interactive/action
2. Pill geometry (999px+) is non-negotiable for buttons and inputs — Reddit's rounded language
3. The orange/purple vote polarity (#D93900 upvote / #6A5CFF downvote) is a product UX primitive, not decorative
4. Keep card borders thin and dark (rgba(0,0,0,0.20)) — no colored borders
5. System font stack for body — no display fonts; weight 600 does the heavy lifting
6. #333D42 is the default text color (not black) — warm, slightly blue-shifted
7. Alien Blue #1870F4 / #0A449B is for focus accessibility and system state, not branding
8. Post titles at 18px / 600 create enough hierarchy over 14px / 400 body without display sizes

---

10. Voice & Tone

Reddit's voice is irreverent, direct, community-owned, and proudly unpolished. The company tagline — "The heart of the internet" — captures the paradox: a platform with immense cultural influence that still feels like it belongs to the people who use it, not the corporation that runs it. Reddit's product copy is sparse and functional; the real "voice" of Reddit is 100,000 communities (subreddits) each expressing their own personality. Reddit-as-platform stays out of the way and lets the community speak.

Voice samples (characteristic Reddit product UI):

• "The front page of the internet" — original tagline (brand heritage). (historically verified)
• "Log In" / "Sign Up" — nav CTAs: shortest possible labels. (verified live 2026-06-22)
• "Reddit - The heart of the internet" — current page title on homepage. (verified live 2026-06-22)

Forbidden register: corporate enthusiasm ("We're excited to announce"), patronizing explanations, over-designed onboarding friction, buzzword marketing copy. Reddit's community is sophisticated and allergic to inauthentic brand speak.

11. Brand Narrative

Reddit was founded in 2005 by Steve Huffman (Ohanian's college roommate and current CEO) and Alexis Ohanian, two 22-year-old University of Virginia graduates who pitched Y Combinator the idea of a "front page of the internet" — a link aggregator where users, not editors, decided what mattered. The original idea (proposed to Paul Graham as an "online ordering for food" concept) was redirected toward social news aggregation. Reddit was acquired by Condé Nast in 2006 for a reported $10–20M, operated under Condé Nast's Advance Publications umbrella for years, and went public on the NYSE (ticker: RDDT) in March 2024 at a $6.4B valuation.

Reddit's cultural influence vastly outweighs its revenue. The WallStreetBets subreddit orchestrated the 2021 GameStop short squeeze, demonstrating that coordinated community action on Reddit could move global financial markets. Reddit's Ask Me Anything (AMA) format became a mainstream media genre — presidents, scientists, and celebrities treated a Reddit AMA as a cultural currency. The platform's community-moderated structure (volunteer moderators "mods" control individual subreddits) is both its greatest strength and most persistent management challenge.

The 2023 API pricing controversy — which drove a mass subreddit blackout protest — illustrated the tension between Reddit's community-ownership culture and its corporate imperatives as a public company. The eventual IPO in 2024 formalized that tension, with Reddit positioning user karma and contribution as a foundational differentiator against algorithmically-driven competitors.

What Reddit refuses: editorial curation replacing community voice, clean corporate aesthetics that feel out of place in a community context, and losing the nerd-internet authenticity that made it the "front page" in the first place. What it embraces: Snoo the mascot, OrangeRed as an icon-level color, the upvote/downvote mechanic as a democratic signal, and a design language that says "the content is what matters."

12. Principles

1. Community over curation. Algorithms assist; communities decide. UI implication: the design must never visually overshadow user-generated content — neutral colors, thin borders, and minimal chrome keep the post front and center.
2. Vote polarity is a first-class UX primitive. The orange upvote / purple downvote is not decoration — it is the platform's core engagement mechanic rendered in color. UI implication: #D93900 and #6A5CFF are reserved exclusively for vote states; using them elsewhere creates signal confusion.
3. Identity is the subreddit, not the surface. Reddit's product chrome is deliberately generic so each community can express its own personality through flair, banners, and custom themes. UI implication: platform-level UI components are neutral and modular; community theming sits on top.
4. Density serves discovery. Reddit is a platform where users scan hundreds of titles in minutes. UI implication: compact card height, tight metadata, 12px timestamps — density is a feature, not a bug.
5. Earn the orange. OrangeRed appears when something is earned (upvotes, awards) or acted upon (CTAs). It doesn't decorate. UI implication: #FF4500 / #D93900 are state/action colors, not background colors for sections or illustrations.

13. Personas

Personas below are fictional archetypes informed by publicly observable Reddit user segments, not individual people.

Marcus Webb, 26, Chicago. /r/nba lurker and frequent commenter on sports threads. Opens Reddit before Twitter after any major game. Values the thread format — ten levels of nested debate in a way no other platform enables. Uses the app daily, votes obsessively, has strong opinions about which subreddits have "good mods." Would notice immediately if Reddit changed the upvote button color.

Priya Nair, 32, Bengaluru. Senior software engineer who uses /r/cscareerquestions and /r/ExperiencedDevs for career signal and /r/LocalLLaMA for ML research tracking. Treats Reddit as a curated RSS that happens to have real humans attached. Uses old.reddit.com in a separate browser tab because she prefers information density over polish. Allergic to product redesigns.

Dani Kowalczyk, 19, Warsaw. Uses Reddit in English because the niche communities she's interested in (vintage synthesizers, obscure film) are richer there than on any Polish-language platform. Has multiple accounts — one for gaming, one for music. Participates in AMA threads. Has bought products purely because /r/BuyItForLife recommended them.

Greg Thornton, 48, Nashville. Found Reddit during the pandemic through /r/DIY and /r/woodworking. Uses it almost exclusively through search ("reddit woodworking dovetail jig") because direct navigation to the site feels chaotic. Has never posted, only comments. Has been lurking for four years. A classic "dark matter" Redditor.

14. States

15. Motion & Easing

Durations:

Easings:

Signature motions:

1. Vote state flip. The upvote/downvote count and icon color transition is effectively instantaneous (≤100ms) — optimistic update is the mechanic, motion is barely perceptible. The semantic color change IS the feedback; animation would delay it.
2. Feed post card hover. Subtle box-shadow intensification on hover (elevation-sm → elevation-md) with motion-fast ease. The shadow lift signals interactivity without moving the card.
3. Sidebar drawer (mobile). Full-height drawer from the left edge at motion-standard / ease-enter. Communities list appears as a coherent panel, not individual items animating.
4. Reduce motion. Under prefers-reduced-motion: reduce, all transitions collapse to instant state changes. Skeleton shimmer is replaced with a static #EEF1F3 fill. Vote counts update without transition. The product remains fully functional.