Reddit Design System
Light · Generated 17/04/2026 · 53 colors · 21 type tokens · 14 spacing steps · 4 motion tokens
v1.0.0
Color Palette
Background Colors
Black
#000000
White
#FFFFFF
Light Gray 2
#E5EBEE
Light Green
#95DAB6
Blue 2
#5D81A2
Pink
#FF1AA7
Cyan 3
#32CDC8
Light Gray 3
#BBBDBF
Red
#D42B42
Cyan 4
#0DD3BB
Dark Green
#638029
Cyan 5
#1A7FAA
Green
#349E48
Purple
#9116E9
Dark Blue 2
#0A449B
Orange 3
#D93900
Cyan 6
#98AFB9
Purple 2
#9406F9
Orange 4
#958578
White 2
#F7F7F7
Mid Gray 2
#7C8183
Light Blue 3
#C2DBFF
Dark Gray 4
#0C0E10
Light Gray 4
#BFC2C7
Blue 7
#096CF6
White 3
#F6F8F9
White 4
#F8F8F8
Text Colors
Dark Cyan
#333D42
Dark Gray
#21272A
Dark Gray 2
#181C1F
Light Gray
#EEF1F3
Cyan
#5C6C74
Blue
#115BCA
Cyan 2
#576F76
Mid Gray
#808080
Orange
#FF4500
Light Blue
#D4EAFF
Dark Gray 3
#222222
Yellow
#DDD622
Blue 3
#2972A3
Red 2
#FC0335
Light Orange 2
#EADDC8
Blue 4
#0077FF
Pink 2
#FF1493
Blue 5
#0079D3
Dark Blue
#49545F
Blue 6
#0051FF
Dark Gray 5
#131313
Border Colors
Light Gray 5
#C1C1C1
Fill & Gradient Colors
Dark Red
#842123
Orange 2
#FF6101
Light Orange
#FFC49C
Light Blue 2
#BBCFDA
Typography
Base Font · -apple-system
System Sans
The quick brown fox jumps over the lazy dog. Reddit — Dive into anything.
Regular · 400 Semibold · 600 Bold · 700 Extrabold · 800
Serif Font · Times
Times Serif
Used sparingly for long-form content and editorial typography on Reddit.
Regular · 400 Bold · 700
Display / Heading
Heading XL · 21px · Extrabold · line-height: 38px · letter-spacing: −0.028px
The front page of the internet
Heading Large · 18px · Bold · line-height: 31.5px
Find your community and start conversations
Heading Medium · 16px · Semibold · line-height: 30px
Reddit is home to thousands of communities, endless conversation, and authentic human connection. Whether you're into breaking news, sports, TV fan theories, or a never-ending stream of the internet's cutest animals, there's a community for you.
Body Large · 16px · Regular · line-height: 24px
Every Reddit community is a full, self-governed space with its own rules, moderators, and culture.
Body Default · 14px · Regular · line-height: 22px
Posted 2 hours ago · 1.2k comments · 24 awards
Body Small · 14px · Regular · line-height: 21px
POPULAR · TRENDING · NEW
Caption / Label · 12px · Bold · line-height: 16px
Line Heights
Tight
16px
Snug
20px
Normal
21px
Relaxed
22px
Loose
24px
LH-6
30px
LH-7
31.5px
LH-8
38px
Letter Spacing
Reddit Communities
Tight
−0.028px · headings, display text
Dive into anything
Normal
−0.012px · body copy, labels
Spacing
Spacing Scale
14 tokens — 4px → 407.25px
4
6
7
8
9
11
12
14
16
24
56
378.97
380.09
407.25
Borders
Border Radii
Small
2px
Medium
4px
Large
8px
X-Large
16px
2X-Large
20px
Full
999px
Pill
9999px
Border Widths
Hairline
1px
Thin
2px
Shadow / Elevation
Shadow Tokens
4 tokens
Inset
×4
Inner white glow · rgba(255,255,255,.2) 0 0 6px inset
Raised
×2
rgba(0,0,0,.25) 0 1px 2px · cards, tooltips
Flat
×1
Transparent fallback — no visible shadow
Floating
×1
rgb(128,128,128) 0 0 5px · modals, overlays
Z-Index
TokenValueUsage
--z-11Base layer
--z-22Stacked base element
--z-33Raised inline element
--z-44Hover / focus rings
--z-510Sticky headers, navigation
--z-650Dropdowns, tooltips
--z-7101Overlays, drawers
--z-81001Modals, dialogs
--z-99000Toasts, notifications
--z-109999Critical overlays, max layer
Breakpoints
--breakpoint-xs
260px
Ultra-small mobile
--breakpoint-sm
325px
Small mobile
--breakpoint-md
500px
Large mobile
--breakpoint-lg
599px
Phablet
--breakpoint-xl
607px
Small tablet
--breakpoint-2xl
608px
Tablet
--breakpoint-3xl
767px
iPad portrait
--breakpoint-bp-8
768px
Tablet landscape
--breakpoint-bp-9
960px
Small laptop
--breakpoint-bp-10
1024px
Laptop
--breakpoint-bp-11
1200px
Desktop
--breakpoint-bp-12
1416px
Large desktop
--breakpoint-bp-13
1472px
XL desktop
--breakpoint-bp-14
1920px
Full HD + wide monitors
Opacity
Opacity Tokens
5 tokens — 25% → 90%
--opacity-25
25%
--opacity-30
30%
--opacity-60
60%
--opacity-75
75%
--opacity-90
90%
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioRating
Dark CyanBlack1.89:1Fail
Dark CyanWhite11.13:1AAA
Dark CyanLight Gray 29.25:1AAA
Dark CyanLight Green6.88:1AA
Dark CyanBlue 22.72:1Fail
Dark GrayBlack1.39:1Fail
Dark GrayWhite15.13:1AAA
Dark GrayLight Gray 212.57:1AAA
Dark GrayLight Green9.35:1AAA
Dark GrayBlue 23.69:1AA Large
Dark Gray 2Black1.22:1Fail
Dark Gray 2White17.15:1AAA
Dark Gray 2Light Gray 214.25:1AAA
Dark Gray 2Light Green10.6:1AAA
Dark Gray 2Blue 24.19:1AA Large
Light GrayBlack18.51:1AAA
Light GrayWhite1.13:1Fail
Light GrayLight Gray 21.06:1Fail
Light GrayLight Green1.43:1Fail
Light GrayBlue 23.61:1AA Large
CyanBlack3.85:1AA Large
CyanWhite5.45:1AA
CyanLight Gray 24.53:1AA
CyanLight Green3.37:1AA Large
CyanBlue 21.33:1Fail
CSS Variables Reference
Background Colors
Black--color-black#000000
White--color-white#FFFFFF
Light Gray 2--color-light-gray-2#E5EBEE
Light Green--color-light-green#95DAB6
Blue 2--color-blue-2#5D81A2
Pink--color-pink#FF1AA7
Cyan 3--color-cyan-3#32CDC8
Red--color-red#D42B42
Cyan 4--color-cyan-4#0DD3BB
Dark Green--color-dark-green#638029
Cyan 5--color-cyan-5#1A7FAA
Green--color-green#349E48
Purple--color-purple#9116E9
Dark Blue 2--color-dark-blue-2#0A449B
Orange 3--color-orange-3#D93900
White 2--color-white-2#F7F7F7
White 3--color-white-3#F6F8F9
Text, Border & Fill Colors
Dark Cyan--color-dark-cyan#333D42
Dark Gray--color-dark-gray#21272A
Dark Gray 2--color-dark-gray-2#181C1F
Cyan--color-cyan#5C6C74
Blue--color-blue#115BCA
Mid Gray--color-mid-gray#808080
Orange--color-orange#FF4500
Blue 5--color-blue-5#0079D3
Red 2--color-red-2#FC0335
Light Gray 5--color-light-gray-5#C1C1C1
Dark Red--color-dark-red#842123
Orange 2--color-orange-2#FF6101
Light Orange--color-light-orange#FFC49C
Light Blue 2--color-light-blue-2#BBCFDA
Typography
Base Font--font-family-base-apple-system
Serif Font--font-family-2Times
Regular--font-weight-regular400
Semibold--font-weight-semibold600
Bold--font-weight-bold700
Extrabold--font-weight-extrabold800
Caption--font-size-2xs12px
Body Small--font-size-xs14px
Body Default--font-size-sm16px
Body Large--font-size-base18px
Heading--font-size-lg21px
Tight Tracking--letter-spacing-tight−0.028px
Normal Tracking--letter-spacing-normal−0.012px
Spacing
Space 1--space-14px
Space 2--space-26px
Space 3--space-37px
Space 4--space-48px
Space 5--space-59px
Space 6--space-611px
Space 8--space-812px
Space 10--space-1014px
Space 12--space-1216px
Space 16--space-1624px
Space 20--space-2056px
Space 24--space-24378.97px
Space 32--space-32380.09px
Space 40--space-40407.25px
Borders & Radius
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Small--radius-sm2px
Medium--radius-md4px
Large--radius-lg8px
X-Large--radius-xl16px
2X-Large--radius-2xl20px
Full--radius-full999px
Pill--radius-r79999px
Motion, Opacity, Layers & Breakpoints
Instant--duration-instant0.2s
Fast--duration-fast0.25s
Normal--duration-normal0.3s
Ease Out--easing-ease-outease-out
Opacity 25--opacity-250.25
Opacity 30--opacity-300.3
Opacity 60--opacity-600.6
Opacity 75--opacity-750.75
Opacity 90--opacity-900.9
Base--z-11
Stacked--z-22
Raised--z-33
Focus--z-44
Sticky--z-510
Dropdown--z-650
Overlay--z-7101
Modal--z-81001
Toast--z-99000
Max--z-109999
Breakpoint XS--breakpoint-xs260px
Breakpoint SM--breakpoint-sm325px
Breakpoint MD--breakpoint-md500px
Breakpoint LG--breakpoint-lg599px
Breakpoint XL--breakpoint-xl607px
Breakpoint 2XL--breakpoint-2xl608px
Breakpoint 3XL--breakpoint-3xl767px
Breakpoint BP-8--breakpoint-bp-8768px
Breakpoint BP-9--breakpoint-bp-9960px
Breakpoint BP-10--breakpoint-bp-101024px
Breakpoint BP-11--breakpoint-bp-111200px
Breakpoint BP-12--breakpoint-bp-121416px
Breakpoint BP-13--breakpoint-bp-131472px
Breakpoint BP-14--breakpoint-bp-141920px
Design System Preview · Reddit (Light) · Generated 17/04/2026 · 53 color tokens · 5 font-size · 2 font-family · 4 font-weight · 8 line-height · 2 letter-spacing · 14 spacing · 7 radius · 2 border-width · 4 shadow · 3 duration · 1 easing · 10 z-index · 14 breakpoints · 5 opacity