Style guide
Last updated Feb 2025
Version 2
Why use a base system?
Why use a base system?
Why use a base system?
How to
How to
How to
New
New
New
How to persist dark mode.
An update to the colors for a semantic naming system since Feb 15 2025.
Outdated
Outdated
Outdated
Change the colors to light theme only.
Will do a new video about the recent color updates but the same principles apply from the video.
Logo
Logo
Logo
Typeface
Typeface
Typeface
Font sizes
Font sizes
Font sizes
With great power comes great responsibility
xs
12px/0.75rem
1em
With great power comes great responsibility
sm
14px/0.875rem
1em
With great power comes great responsibility
sm
14px/0.875rem
1em
With great power comes great responsibility
sm
14px/0.875rem
1em
With great power comes great responsibility
base
16px/1rem
1.5em
With great power comes great responsibility
lg
18px/1.125rem
1.1em
With great power comes great responsibility
2xl
24px/1.5rem
1.3em
With great power comes great responsibility
4xl
36px/2.25rem
1.2em
With great power comes great responsibility
5xl
48px/3rem
1em
With great power comes great responsibility
6xl
60px/3.75rem
1em
Colors
Colors
Colors
Background
Page background
Background
Page background
Background
Page background
Foreground
Text color
Foreground
Text color
Foreground
Text color
Primary
For buttons, focus states, radio and checkbox active states
Primary
For buttons, focus states, radio and checkbox active states
Primary
For buttons, focus active states, radio and checkbox active states
Primary foreground
Text color on primary background
Primary foreground
Text color on primary background
Text color on primary background
Text color on primary background
Primary gradient
Used in the linear and radial gradients
Primary gradient
Used in the linear and radial gradients
Primary gradient
Used in the linear and radial gradients
Muted foreground
A faded text color
Muted foreground
A faded text color
Muted foreground
A faded text color
Error
Faded red color
Error
Faded red color
Error
Faded red color
Error foreground
Stronger red for text
Error foreground
Stronger red for text
Error foreground
Stronger red for text
Card
White or black for higher contrast against the background
Card
White or black for higher contrast against the background
Card
White or black for higher contrast against the background
Border
Used for cards, separators
Border
Used for cards, separators
Border
Used for cards, separators
Input
For input border color
Input
For input border color
Input
For input border color
Secondary
For buttons
Secondary
For buttons
Secondary
For buttons
White
Stay white for active states in radio and checkbox
White
Stay white for active states in radio and checkbox
White
Stay white for active states in radio and checkbox
White auto
For icon colors that adapt to the user color settings
White auto
For icon colors that adapt to the user color settings
White auto
For icon colors that adapt to the user color settings
Dark
When you need a dark button
Dark
When you need a dark button
Dark
When you need a dark button
Dark foreground
Text for the dark background
Dark foreground
Text for the dark background
Dark foreground
Text for the dark background
Fade
For faded background wrapping hero product images
Fade
For faded background wrapping hero product images
Fade
For faded background wrapping hero product images
Nav
For top navigation background
Nav
For top navigation background
Nav
For top navigation background
Buttons
Buttons
Buttons
Forms
Forms
Forms
Links
Links
Links
Spacing
Spacing
Spacing
4px
4px
4px
6px
6px
6px
8px
8px
8px
10px
10px
10px
12px
12px
12px
14px
14px
14px
16px
16px
16px
20px
20px
20px
24px
24px
24px
28px
28px
28px
32px
32px
32px
36px
36px
36px
40px
40px
40px
44px
44px
44px
48px
48px
48px
56px
56px
56px
64px
64px
64px
80px
80px
80px
96px
96px
96px
112px
112px
112px
128px
128px
128px
Logos
Logos
Logos
Pricing
Pricing
Pricing
Free
Free for everyone
Unlimited Task Management
Real-Time Collaboration
Reporting Custom Filters
Basic
Popular
$8
per user/month
Yearly -20%
Yearly
All free features and…
Multi-User Access
Integrated Chat Functions
Business
per user/month
Yearly -20%
Yearly
All basic features and…
Data Export Options
Project Templates Library
Free
Free for everyone
Unlimited Task Management
Real-Time Collaboration
Reporting Custom Filters
Basic
Popular
$8
per user/month
Yearly -20%
Yearly
All free features and…
Multi-User Access
Integrated Chat Functions
Business
per user/month
Yearly -20%
Yearly
All basic features and…
Data Export Options
Project Templates Library
Free
Free for everyone
Unlimited Task Management
Real-Time Collaboration
Reporting Custom Filters
Basic
Popular
$8
per user/month
Yearly -20%
Yearly
All free features and…
Multi-User Access
Integrated Chat Functions
Business
per user/month
Yearly -20%
Yearly
All basic features and…
Data Export Options
Project Templates Library
Monthly
Yearly
Business
per user/month
Yearly -20%
All basic features and…
Data Export Options
Project Templates Library
Monthly
Yearly
Business
per user/month
Yearly -20%
All basic features and…
Data Export Options
Project Templates Library
Monthly
Yearly
Business
per user/month
Yearly -20%
All basic features and…
Data Export Options
Project Templates Library
