Design System
Gray Scale
gray.50
Gray scale 50
Light:#FCFCFC
Dark:#FCFCFC
gray.100
Gray scale 100
Light:#F5F5F5
Dark:#F5F5F5
gray.150
Gray scale 150
Light:#F0F0F0
Dark:#F0F0F0
gray.200
Gray scale 200
Light:#E5E5E5
Dark:#E5E5E5
gray.300
Gray scale 300
Light:#D4D4D4
Dark:#D4D4D4
gray.400
Gray scale 400
Light:#A3A3A3
Dark:#A3A3A3
gray.500
Gray scale 500
Light:#737373
Dark:#737373
gray.600
Gray scale 600
Light:#525252
Dark:#525252
gray.700
Gray scale 700
Light:#404040
Dark:#404040
gray.750
Gray scale 750
Light:#313131
Dark:#313131
gray.800
Gray scale 800
Light:#262626
Dark:#262626
gray.850
Gray scale 850
Light:#1E1E1E
Dark:#1E1E1E
gray.900
Gray scale 900
Light:#171717
Dark:#171717
gray.950
Gray scale 950
Light:#0D0D0D
Dark:#0D0D0D
Brand Colors
brand.primary
Site identity and primary actions
Light:#171717
Dark:#FFFFFF
brand.secondary
Primary action hover
Light:#313131
Dark:#F0F0F0
Avatar Colors
avatar.white
White
Light:#FFFFFF
Dark:#EBEBF0
avatar.brown
Brown
Light:#A2845E
Dark:#AC8E68
avatar.red
Red
Light:#FF3B30
Dark:#FF453A
avatar.orange
Orange
Light:#FF9500
Dark:#FF9F0A
avatar.yellow
Yellow
Light:#FFCC00
Dark:#FFD60A
avatar.green
Green
Light:#34C759
Dark:#30D158
avatar.teal
Teal
Light:#30B0C7
Dark:#40C8E0
avatar.blue
Blue
Light:#007AFF
Dark:#0A84FF
avatar.purple
Purple
Light:#AF52DE
Dark:#BF5AF2
avatar.pink
Pink
Light:#FF2D55
Dark:#FF375F
avatar.gray
Gray
Light:#8E8E93
Dark:#8E8E93
Feed categories
Work
avatar.gray
Blog
avatar.green
Play
avatar.purple
Stack
avatar.teal
Changelog
avatar.orange
About
avatar.blue
Text Colors
text-primary
Primary text color
Light:#171717
Dark:#F5F5F5
text-secondary
Secondary text color
Light:#525252
Dark:#D4D4D4
text-tertiary
Tertiary text color
Light:#737373
Dark:#A3A3A3
text-quaternary
Quaternary text color
Light:#A3A3A3
Dark:#737373
text-primary-action
Text on primary action buttons
Light:#FFFFFF
Dark:#171717
text-highlight
Highlight text color
Light:#713F12
Dark:#FEF3C7
Background Colors
bg-main
Main background color
Light:#FCFCFC
Dark:#0D0D0D
bg-primary
Primary background color
Light:#FFFFFF
Dark:#111111
bg-secondary
Secondary background color
Light:#FCFCFC
Dark:#171717
bg-tertiary
Tertiary background color
Light:#F5F5F5
Dark:#262626
bg-quaternary
Quaternary background color
Light:#F0F0F0
Dark:#313131
bg-elevated
Elevated surface background
Light:#FFFFFF
Dark:#1E1E1E
bg-primary-action
Primary action button background
Light:#171717
Dark:#FFFFFF
bg-primary-action-hover
Primary action button hover state
Light:#313131
Dark:#F0F0F0
bg-secondary-action
Secondary action button background
Light:#E5E5E5
Dark:#404040
bg-tertiary-action
Tertiary action button background
Light:#FFFFFF
Dark:#262626
bg-button
Button background
Light:#FFFFFF
Dark:#313131
bg-highlight
Highlight background
Light:rgba(234, 179, 8, 0.2)
Dark:rgba(234, 179, 8, 0.2)
Border Colors
border-primary
Primary border color
Light:rgba(0, 0, 0, 0.1)
Dark:rgba(255, 255, 255, 0.12)
border-primary-opaque
Primary border color (opaque)
Light:#E5E5E5
Dark:#313131
border-secondary
Secondary border color
Light:rgba(0, 0, 0, 0.07)
Dark:rgba(255, 255, 255, 0.08)
border-secondary-opaque
Secondary border color (opaque)
Light:#F0F0F0
Dark:#262626
border-tertiary
Tertiary border color
Light:rgba(0, 0, 0, 0.04)
Dark:rgba(255, 255, 255, 0.06)