Style guide
Last updated Feb 2025
Version 2
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
Header typeface is League Spartan
Typeface
Header typeface is League Spartan
Typeface
Header typeface is League Spartan
Paragraph typeface is Geist
Paragraph typeface is Geist
Paragraph typeface is Geist
Geist
Aa
Bb
Cc
0123456789
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 | FAFAFA
Page background
Background | FAFAFA
Page background
Background | FAFAFA
Page background
Foreground | 18181B
Text color
Foreground | 18181B
Text color
Foreground | 18181B
Text color
Primary | 2563eb
For buttons, focus states, radio and checkbox active states
Primary | 2563eb
For buttons, focus active states, radio and checkbox active states
Primary | 2563eb
For buttons, focus states, radio and checkbox active states
Primary foreground | FFFFFF
Text color on primary background
Text color on primary background
Text color on primary background
Primary foreground | FFFFFF
Text color on primary background
Primary gradient | BFDBFE
Used in the linear and radial gradients
Primary gradient | BFDBFE
Used in the linear and radial gradients
Primary gradient | BFDBFE
Used in the linear and radial gradients
Muted foreground | 52525B
A faded text color
Muted foreground | 52525B
A faded text color
Muted foreground | 52525B
A faded text color
Error | FEF2F2
Faded red color
Error | FEF2F2
Faded red color
Error | FEF2F2
Faded red color
Error foreground | DC2626
Stronger red for text
Error foreground | DC2626
Stronger red for text
Error foreground | DC2626
Stronger red for text
Card | FFFFFF
White or black for higher contrast against the background
Card | FFFFFF
White or black for higher contrast against the background
Card | FFFFFF
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
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.
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
Buttons
Buttons
Buttons
Links
Links
Links
Forms
Forms
Forms
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
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.
Footer
Two components for your pages
Footer
Two components for your pages
Footer
Two components for your pages