Style guide
Last updated Feb 2025
Version 2
Why use a base system?
To keep things consistent and to minimise thinking too much about what font size, colors, spacing, width values to use. The system is based on Tailwind CSS.
Why use a base system?
To keep things consistent and to minimise thinking too much about what font size, colors, spacing, width values to use. The system is based on Tailwind CSS.
Why use a base system?
To keep things consistent and to minimise thinking too much about what font size, colors, spacing, width values to use. The system is based on Tailwind CSS.
How to
I share how to make changes, please contact me if you need specific videos.
How to
I share how to make changes, please contact me if you need specific videos.
How to
I share how to make changes, please contact me if you need specific videos.
New
New
New
An update to the colors for a semantic naming system.
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
The logo is made of two parts: the icon and the text which are both svg formats.
Logo
The logo is made of two parts: the icon and the text which are both svg formats.
Logo
The logo is made of two parts: the icon and the text which are both svg formats.
Typeface
Base system primary typeface is Geist
Typeface
Base system primary typeface is Geist
Typeface
Base system primary typeface is Geist
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.2em
With great power comes great responsibility
2xl
24px/1.5rem
1.2em
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
A system for dark and light colours that auto change to the users system setting.
Colors
A system for dark and light colours that auto change to the users system setting.
Colors
A system for dark and light colours that auto change to the users system setting.
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 active states, radio and checkbox active states
Primary
For buttons, focus states, radio and checkbox active states
Primary foreground
Text color on primary background
Text color on primary background
Text color on primary background
Primary foreground
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
Primary
Primary
Primary
Secondary
Secondary
Secondary
Dark
Dark
Dark
Outline
Outline
Outline
Link
Link
Link
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
Icons
The benefit of using an icon component is that you can give it a color such as foreground it will change to the user's color settings. You can use the feather icon from Framer.
Icons
The benefit of using an icon component is that you can give it a color such as foreground it will change to the user's color settings. You can use the feather icon from Framer.
Icons
The benefit of using an icon component is that you can give it a color such as foreground it will change to the user's color settings. You can use the feather icon from Framer.
Logos
Sometimes you need a placeholder logos. This theme is using an auto dark and light theme. So for logos, if you don't have access to the svg format, you can use the white version and add a blending mode of difference on the frame so it will adapt to the users color settings.
Logos
Sometimes you need a placeholder logos. This theme is using an auto dark and light theme. So for logos, if you don't have access to the svg format, you can use the white version and add a blending mode of difference on the frame so it will adapt to the users color settings.
Logos
Sometimes you need a placeholder logos. This theme is using an auto dark and light theme. So for logos, if you don't have access to the svg format, you can use the white version and add a blending mode of difference on the frame so it will adapt to the users color settings.
Pricing
Two components for your pricing page
Pricing
Two components for your pricing page
Pricing
Two components for your pricing page
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
Profile
Two components for your team page
Profile
Two components for your team page
Profile
Two components for your team page
Footer
Two components for your pages
Footer
Two components for your pages
Footer
Two components for your pages