Product Hunt Design System
Light · Generated 17/04/2026 · 49 colors · 19 type tokens · 12 spacing steps · 6 motion tokens
v1.0.0
Color Palette
Background Colors
Light Gray
#EAECF0
Black
#000000
White
#FFFFFF
Dark Blue 2
#101828
Brand Red
#FF6154
Light Red
#FFE6E4
Near White
#F9FAFB
Off White
#F2F4F7
Dark Gray
#111111
Cyan Green
#17B26A
Text Colors
Dark Blue
#344054
Blue
#667085
Blue 2
#4B587C
Blue 3
#98A2B3
Dark Blue 3
#475467
Dark Blue 4
#21293C
Border Colors
Light Blue
#D9E1EC
Light Orange
#FEF0C7
Dark Blue 5
#1D2939
Accent & Other Colors
Red
#B6453B
Red 3
#F86C60
Red 4
#F10202
Red 5
#F468AC
Blue 4
#3979E3
Blue 5
#6D68D4
Pink
#DE62B6
Green
#3F9E58
Green 2
#579167
Typography
Base Font · -apple-system
System Font Stack
The quick brown fox jumps over the lazy dog — Product Hunt community
Regular · 400 Medium · 500 Semibold · 600 Bold · 700
Scale Overview · 6 Sizes
10 → 24px
From 2xs (10px) caption text up to xl (24px) display headings. Clean, modern scale for UI contexts.
2xs · 10px xs · 12px sm · 14px base · 16px lg · 18px xl · 24px
Display Heading
XL Display · 24px · Bold · line-height: 32px · letter-spacing: 0.3px
The best new products in tech
Heading Large · 18px · Semibold · line-height: 28px
Discover the best new products every day
Body Default · 16px · Medium · line-height: 24px
Upvote the products you love. Share what you're building. Connect with makers and early adopters.
Body Small · 14px · Regular · line-height: 20px
PRODUCT OF THE DAY · #1
Caption · 12px · Medium · line-height: 16px
2.4k upvotes · 312 comments
Micro / 2XS · 10px · Regular · line-height: 14px
Line Heights
Tight
14px
Snug
16px
Normal
18.4px
Relaxed
20px
Loose
24px
Spacious
28px
Open
32px
Letter Spacing
Product Hunt
Tight · 0.3px
--letter-spacing-tight · headings and display text
Spacing
Spacing Scale
12 tokens — 2px → 131px
2
4
8
10
16
20
24
28
32
40
90
131
Borders
Border Radii
Small
4px
Medium
6px
Large
8px
X-Large
12px
2X-Large
16px
Pill
9999px
Border Widths
--border-width-hairline
1px · used for cards, inputs, dividers
--border-width-thin
2px · emphasis borders, focus rings, active states
Two border widths used throughout — hairline for subtle containment, thin for interactive emphasis via --border-width-thin: 2px.
Shadow / Elevation
Shadow Tokens
2 tokens
shadow-sm
Standard elevation
rgba(0,0,0,.1) 10px 15px −3px · rgba(0,0,0,.1) 4px 6px −4px · cards, modals, popovers
shadow-md
Brand elevation
rgb(171,239,198) green tinted shadow · 4px 6px −1px · used for upvoted/highlighted product cards
Z-Index
LayerValueUsage
--z-110Sticky elements, floating labels
--z-220Dropdowns, tooltips, popovers
--z-350Navigation bar, header overlays
--z-4100Modals, full-screen dialogs, toasts
Breakpoints
📱
--breakpoint-xs
501px
Mobile / extra small threshold
📲
--breakpoint-sm / md
600–740px
Small tablet / phablet range
🖥️
--breakpoint-3xl+
1098px+
Desktop / wide content layouts
Full breakpoint ladder: 501px (xs) · 600px (sm) · 740px (md) · 758px (lg) · 759px (xl) · 760px (2xl) · 1098px (3xl) · 1099px (bp-8) · 1439px (bp-9) · 1536px (bp-10) · 1728px (bp-11)
Opacity
Opacity Tokens
2 tokens · 0.45 and 0.5
--opacity-45
45% · used for disabled states and overlay tints
--opacity-50
50% · muted content and background overlays
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-dark-blue--color-light-gray8.84:1AAA
--color-dark-blue--color-black2.01:1Fail
--color-dark-blue--color-white10.46:1AAA
--color-dark-blue--color-dark-blue-21.7:1Fail
--color-dark-blue--color-red-23.53:1AA Large
--color-blue--color-light-gray4.21:1AA Large
--color-blue--color-white4.97:1AA
--color-blue-2--color-light-gray5.95:1AA
--color-blue-2--color-white7.03:1AAA
--color-blue-3--color-black8.15:1AAA
--color-dark-blue-3--color-light-gray6.5:1AA
--color-dark-blue-3--color-white7.69:1AAA
CSS Variables Reference
Background Colors 20 tokens
Light Gray--color-light-gray#EAECF0
Black--color-black#000000
White--color-white#FFFFFF
Dark Blue 2--color-dark-blue-2#101828
Brand Red--color-red-2#FF6154
Light Red 2--color-light-red-2#FFE6E4
White 2--color-white-2#F9FAFB
White 4--color-white-4#F2F4F7
White 6--color-white-6#FFE8E6
White 7--color-white-7#F5F8FF
Light Blue 3--color-light-blue-3#E5EFFF
White 9--color-white-9#EAE9FF
Light Green 3--color-light-green-3#CFFCDB
White 11--color-white-11#FFE9F4
Light Red 4--color-light-red-4#FFE4E4
Light Green 5--color-light-green-5#CFF2D8
White 14--color-white-14#FFF4ED
Dark Gray--color-dark-gray#111111
Cyan--color-cyan#17B26A
White 13--color-white-13#FFE9F8
Text & Border Colors 9 tokens
Dark Blue--color-dark-blue#344054
Blue--color-blue#667085
Blue 2--color-blue-2#4B587C
Blue 3--color-blue-3#98A2B3
Dark Blue 3--color-dark-blue-3#475467
Dark Blue 4--color-dark-blue-4#21293C
Light Blue--color-light-blue#D9E1EC
Light Orange--color-light-orange#FEF0C7
Dark Blue 5--color-dark-blue-5#1D2939
Light Green--color-light-green#ABEFC6
Typography 19 tokens
Base Font--font-family-base-apple-system
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2XS Micro--font-size-2xs10px
XS Caption--font-size-xs12px
SM Body Small--font-size-sm14px
Base Body--font-size-base16px
LG Heading--font-size-lg18px
XL Display--font-size-xl24px
Tight Tracking--letter-spacing-tight0.3px
Line Tight--line-height-tight14px
Line Snug--line-height-snug16px
Line Normal--line-height-normal18.4px
Line Relaxed--line-height-relaxed20px
Line Loose--line-height-loose24px
Line LH-6--line-height-lh-628px
Line LH-7--line-height-lh-732px
Spacing 12 tokens
Space 1--space-12px
Space 2--space-24px
Space 3--space-38px
Space 4--space-410px
Space SM--space-516px
Space 6--space-620px
Space 8--space-824px
Space 10--space-1028px
Space 12--space-1232px
Space 16--space-1640px
Space 20--space-2090px
Space 24--space-24131px
Borders & Radius 8 tokens
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Small--radius-sm4px
Medium--radius-md6px
Large--radius-lg8px
X-Large--radius-xl12px
2X-Large--radius-2xl16px
Pill / Full--radius-full9999px
Motion, Opacity & Layers 14 tokens
Instant--duration-instant150ms
Fast--duration-fast200ms
Normal--duration-normal300ms
Slow--duration-slow700ms
Ease Out--easing-ease-outease-out
Ease In Out--easing-ease-in-outease-in-out
Dim--opacity-4545%
Half--opacity-5050%
Z Layer 1--z-110
Z Layer 2--z-220
Z Layer 3--z-350
Z Layer 4--z-4100
Design System Preview · Product Hunt (Light) · Generated 17/04/2026 · 49 color tokens · 6 font-size · 1 font-family · 4 font-weight · 7 line-height · 1 letter-spacing · 12 spacing · 6 radius · 2 border-width · 2 shadow · 4 duration · 2 easing · 4 z-index · 11 breakpoints · 2 opacity