Style guide
Last updated Jun 2024
Version 1
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.
Tailwind CSS
How to
I share how to make changes, please contact me if you need specific videos.
Change the colors to light theme only
Typeface
Font sizes
With great power comes great responsibility
xs
12px/0.75rem
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
xl
20px/1.25rem
1.5em
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
Gray
Red
Primary
Buttons
Forms
Links
Spacing
Icons
The benefit of using an icon component is that you can give it a color and if you use cool-gray/auto/600 it will change to a lighter color when the user has dark mode set.
Logos
Sometimes you need a placeholder logos
Pricing
Two components for your pricing page
Profile
Two components for your team page
