Paulius Kairevicius

Design System

Gray scale

gray.50
Gray scale 50
Light:#FAFAFA
Dark:#FAFAFA
gray.100
Gray scale 100
Light:#F5F5F5
Dark:#F5F5F5
gray.150
Gray scale 150
Light:#F0F0F0
Dark:#F0F0F0
gray.175
Gray scale 175
Light:#EBEBEB
Dark:#EBEBEB
gray.200
Gray scale 200
Light:#E5E5E5
Dark:#E5E5E5
gray.225
Gray scale 225
Light:#E0E0E0
Dark:#E0E0E0
gray.300
Gray scale 300
Light:#D4D4D4
Dark:#D4D4D4
gray.400
Gray scale 400
Light:#A3A3A3
Dark:#A3A3A3
gray.450
Gray scale 450
Light:#8C8C8C
Dark:#8C8C8C
gray.500
Gray scale 500
Light:#737373
Dark:#737373
gray.550
Gray scale 550
Light:#666666
Dark:#666666
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.925
Gray scale 925
Light:#111111
Dark:#111111
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
Work
avatar.gray
Blog
Blog
avatar.green
Play
avatar.purple
Stack
Stack
avatar.teal
Changelog
Changelog
avatar.orange
About
About
avatar.blue

Text colors

text-primary
Primary text color
Light:#171717
Dark:#F5F5F5
text-secondary
Secondary text color
Light:#525252
Dark:#A3A3A3
text-tertiary
Tertiary text color
Light:#737373
Dark:#8C8C8C
text-quaternary
Quaternary text color
Light:#A3A3A3
Dark:#666666
text-primary-action
Text on primary action buttons
Light:#FFFFFF
Dark:#171717

Background colors

bg-main
Main background color
Light:#FAFAFA
Dark:#0D0D0D
bg-primary
Primary background color
Light:#FFFFFF
Dark:#111111
bg-secondary
Secondary background color
Light:#FAFAFA
Dark:#171717
bg-tertiary
Tertiary background color
Light:#EBEBEB
Dark:#262626
bg-quaternary
Quaternary background color
Light:#E0E0E0
Dark:#313131
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-button
Button background
Light:#FFFFFF
Dark:#313131

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.06)
Dark:rgba(255, 255, 255, 0.06)

Status and interaction

destructive
Errors and destructive actions
Light:#D20014
Dark:#FF6961
focus-ring
Keyboard focus outline
Light:#525252
Dark:#A3A3A3
selection
Text selection
Light:#E3E8EF
Dark:#2A3240
underline
Link underline
Light:#C8C8C8
Dark:#525252