Reddit Design System Deep Dive

1. Brand Overview

Reddit’s design language is a blend of utilitarian UI patterns and bursts of brand personality. The vibe is community-first but tech-native: functional layouts, dense information, and a visual hierarchy that encourages exploration over linear journeys. This isn’t a minimalist brand like Apple or a hyper-polished brand like Stripe — Reddit’s visual system is built to scale across millions of subcommunities with wildly different aesthetics. That requires a flexible core design language that can survive customization.

The core philosophy: accessibility, scalability, and subtle identity cues. The global orangered (#FF4500) is the most recognizable signal — it’s loud, energetic, and unique in the social media landscape (Facebook’s blue, Twitter’s cyan, TikTok’s black/pink). Reddit uses it sparingly, mostly for key actions and brand marks. Surrounding that, the system leans on muted neutrals and functional blues for links and interactive states. It’s not a “design-driven” aesthetic — it’s a framework that supports user-generated chaos while maintaining navigability.

Typography is pragmatic: system fonts (-apple-system, Segoe UI, Roboto) dominate, ensuring fast load times and familiar rendering across OSes. There’s no custom typeface — this choice prioritizes speed and accessibility over brand uniqueness. The type scale is tight, with small increments and heavy reliance on weight changes to create hierarchy.

Spacing follows an 8px base grid with occasional 4px half-steps for micro-alignment. Border radii range from subtle (2px badges) to full pills (9999px), showing a mix of utilitarian and friendly curves. Shadows are minimal — depth is mostly handled via borders and background changes.

Reddit’s design system reflects its content ecosystem: modular, adaptable, and resilient. It’s not precious. It needs to work at scale in every browser, for every user type, from anonymous lurkers to hardcore moderators. And it does.

2. Color System

2.1 Primary Colors

The primary brand color is --color-global-orangered: #FF4500. This is Reddit’s identity anchor — high-energy, high-contrast, and instantly recognizable. It’s used for key interactive states (upvotes, brand marks, primary CTAs). Psychologically, orange-red signals urgency and enthusiasm. Compared to competitors: Facebook’s blue is calm, Twitter’s cyan is airy, TikTok’s palette is edgy — Reddit’s orangered is confrontational and vibrant.

Links use a functional blue (#115bca) for discoverability, and hover states deepen this to --color-a-hover: #0A449B. Neutrals dominate backgrounds and text, ensuring content is the hero.

2.2 Complete Palette

(This table condenses the massive token list to the most visually significant values. Full token list is in the Design Tokens section.)

2.3 Color Relationships

Contrast is generally high. White text on orangered exceeds WCAG AA easily. Blue links on white background meet accessibility for body text. The neutral greys (#5c6c74, #181c1f) on white are borderline for small text — likely fine for metadata but might fail for small captions.

Dark mode isn’t explicitly in this data, but the palette includes inverted neutrals (--color-inverted-neutral-background: #0E1113), showing readiness for a dark theme.

2.4 Usage Guide

• Primary actions: Use #FF4500 or its gradient — only for core engagement (upvotes, major CTAs).
• Links: #115bca with #0A449B hover. Avoid using brand orange for links — it’s reserved for voting and brand marks.
• Backgrounds: White (#ffffff) for surfaces, #EEF1F3 for hover states.
• Status: Green (#01A816) for online, grey (#767676) for offline.
• Warnings/Errors: #B78800 for caution, #EB001F for errors.
• Avoid mixing gradients unless in brand-specific contexts.
• Do not introduce new accent colors — keep visual vocabulary tight.

3. Typography

3.1 Font Families

Reddit uses system fonts:

-apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol

This ensures performance and native rendering. Times appears in some contexts (likely legacy or special formatting), but the dominant stack is sans-serif system fonts.

No Google Fonts or Adobe Fonts — everything is OS-native.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is weight-driven more than size-driven. The largest jump is from 20px headings to 18px body/links — not huge. Heavy weights (600, 700) make headings stand out. Captions often share sizes with links but use lighter weights or uppercase to differentiate.

This tight scale keeps content dense but readable. It works for information-heavy layouts but can feel cramped compared to airy modern designs.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid, with 4px half-step.

4.2 Layout

Breakpoints:

260px, 325px, 400px, 500px, 599px, 607px, 608px, 767px, 768px, 960px, 1024px, 1200px, 1416px, 1472px, 1920px.

This is a granular set — likely for specific component responsiveness rather than a simple mobile/tablet/desktop triad.

5. Visual Elements

Border Radius

The mix of subtle and extreme radii adds personality without overcomplication.

Shadows

Minimal use. Examples:

• rgba(0, 0, 0, 0.25) 0px 1px 2px — subtle depth
• rgba(255, 255, 255, 0.2) inset — inner glow for certain elements

Mostly flat design — shadows are rare and restrained.

Borders

Thin 1px borders in light greys or semi-transparent black. Dividers often use rgba(0, 0, 0, 0.098) — barely visible.

6. Components

6.1 Buttons

Primary Button (button-medium):

• Default: background: rgb(10, 68, 155), color: #ffffff, padding: 0 14px, radius: 999px, border: 1px solid transparent
• Hover: background: rgba(255,255,255,0.24), color: var(--color-a-hover), border: 6px solid var(--scrollbar-background)
• Active: background: rgba(255,255,255,0.32), color: var(--color-neutral-content-strong)
• Focus: outline: auto var(--color-global-focus), background: rgba(255,255,255,0.32), color: var(--color-action-upvote)

Secondary Button:

• Default: background: rgb(229, 235, 238), color: #000000, padding: 0 14px 0 10px, radius: 999px
• Hover: background: var(--color-banner-caution-hover), color: var(--vote-button-label-color-hover)

Orangered Button:

• Default: background: rgb(217, 57, 0), color: #ffffff, padding: 0 12px, radius: 999px
• Hover/Active/Focus: same as primary

Text Button:

• Default: transparent background, color: #181c1f, padding: 0 8px, radius: 999px

Small Button:

• Default: background: #ffffff, color: #181c1f, padding: 0 6px, radius: 999px, border: 1px solid rgba(0,0,0,0.498), shadow: rgba(0,0,0,0.25) 0px 1px 2px

6.2 Links

Multiple variants:

• White text, no underline, bold — for nav.
• Blue (#115bca), underline by default — for content links.
• Greys (#5c6c74, #21272a) for secondary navigation.

Hover states unify: remove underline, change to --color-a-hover.

6.3 Forms

No detailed input styles in extracted data — likely standard system inputs with minimal styling.

6.4 Cards

Rounded corners (8px or 16px), white background, minimal borders. Hover states lighten background.

7. Design Tokens

:root {
  /* Colors */
  --color-global-orangered: #FF4500;
  --color-a-hover: #0A449B;
  --color-a-visited: #9B00D4;
  --color-neutral-background-container-hover: #EEF1F3;
  --color-banner-error: #EB001F;
  --color-banner-caution: #B78800;
  --color-success-plain: #016E0B;
  --color-offline: #767676;
  --color-online: #01A816;
  --color-downvote-content: #523DFF;
  --color-upvote-disabled: #AE2C004d;
  --color-downvote-disabled: #523DFF4d;
  --color-inverted-neutral-background: #0E1113;
  --color-neutral-border-medium: #0000007F;
  --color-neutral-background-gilded: #FFF9E0;
  --color-neutral-background-gilded-hover: #FFF3C0;
  --color-media-onBackground-weak: #B7CAD4;
  --color-media-onbackground-disabled: #ffffff40;
  --color-neutral-content-disabled: #D6D6D6;

  /* Typography */
  --font-primary: -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial;
  --font-secondary: Times;
  --font-size-h1: 20px;
  --font-size-link-lg: 18px;
  --font-size-link-md: 14px;
  --font-size-caption-sm: 12px;
  --line-height-tight: 1.33;
  --line-height-loose: 2.71;

  /* Spacing */
  --space-1: 4px;
  --space-1_5: 6px;
  --space-2: 8px;
  --space-2_5: 10px;
  --space-3: 12px;
  --space-3_5: 14px;
  --space-4: 16px;

  /* Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.25) 0px 1px 2px;
  --shadow-inset: rgba(255,255,255,0.2) 0px 0px 6px inset;
}

8. AI Coding Assistant Prompt

# Reddit Design System Specification

You are a Reddit design expert. Build UIs matching their visual language exactly.

## Brand Context
Reddit values functional, community-driven design. The system must handle dense information, diverse content styles, and scale across millions of unique pages. Keep visuals utilitarian, with brand personality emerging through color and shape.

## Color Palette
- Global Orangered: #FF4500 — Brand identity, upvote buttons, primary CTAs
- Link Blue: #115bca — Links, post titles
- Link Hover: #0A449B — Link hover state
- Link Visited: #9B00D4 — Visited post titles
- Neutral Strong Text: #181c1f — Primary body text
- Neutral Medium: #5c6c74 — Secondary text
- Background White: #ffffff — Surfaces
- Background Hover: #EEF1F3 — Hovered containers
- Caution: #B78800 — Alerts
- Error: #EB001F — Error messages
- Success: #016E0B — Success messages
- Offline: #767676 — Status offline
- Online: #01A816 — Status online
- Downvote: #523DFF — Downvote buttons
- Upvote Disabled: #AE2C004d — Disabled upvote
- Downvote Disabled: #523DFF4d — Disabled downvote

## Typography
Font Families: 
- Primary: -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial
- Secondary: Times

Type Sizes:
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 20px | 400 | 0.80 | Page titles |
| H1 Alt | 18px | 700 | 1.33 | Section titles |
| Link LG | 18px | 600 | 1.33 | Primary navigation |
| Link MD | 14px | 400 | 1.50 | Body links |
| Caption SM | 12px | 600 | 1.33 | UI labels |

## Spacing & Grid
Base: 8px
Scale: 4px, 6px, 8px, 10px, 12px, 14px, 16px
Use multiples for padding/margins.

## Border Radius
- xs: 2px — badges
- sm: 4px — inputs
- md: 8px — cards, community blocks
- lg: 16px — posts, modals
- pill: 999px — buttons
- full: 9999px — avatars

## Shadows & Depth
Minimal. Use:
- Shadow SM: rgba(0,0,0,0.25) 0px 1px 2px
- Inset Glow: rgba(255,255,255,0.2) 0px 0px 6px inset

## Component Specifications

### Primary Button
Default:
```css
background: #0A449B;
color: #ffffff;
padding: 0 14px;
border-radius: 999px;
border: 1px solid transparent;
font-weight: 600;
font-size: 14px;
```
Hover: background rgba(255,255,255,0.24), color #0A449B  
Active: background rgba(255,255,255,0.32), color #181c1f  
Focus: outline auto Highlight

### Secondary Button
Default:
```css
background: #E5EBEE;
color: #000;
padding: 0 14px 0 10px;
border-radius: 999px;
```
Hover: background #D8A100

### Navigation Links
Default: color #ffffff, no underline  
Hover: color #0A449B, no underline

### Cards
background: #ffffff  
border-radius: 8px or 16px  
padding: 16px  
border: 1px solid rgba(0,0,0,0.098)

## Layout & Responsive Rules
Max content widths: 540px for modals  
Breakpoints: 260px up to 1920px (full list above)

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus: outline auto Highlight
- Hover: remove underline for links

## DO
- Use only palette colors
- Maintain 8px grid
- Use system fonts
- Reserve orangered for core actions
- Keep shadows subtle

## DON'T
- Introduce new colors
- Overuse gradients
- Mix sharp and pill corners in same component
- Use heavy shadows

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #FF4500;
  color: #fff;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: rgba(255,255,255,0.24); color: #0A449B; }
.btn-primary:focus { outline: auto Highlight; }
.btn-primary:disabled { opacity: 0.5; }
```

Card:
```css
.card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(0,0,0,0.098);
}
```

9. Summary

TL;DR: Reddit’s design system is functional and scalable, built for dense information and diverse content. Brand orange-red is the anchor, surrounded by restrained neutrals and functional blues. System fonts, 8px grid, and minimal shadows keep it practical.

Brand Keywords:

• utilitarian-modular
• community-driven
• color-sparse
• functionality-first