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
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
4xl
36px/2.25rem
1.2em
5xl
48px/3rem
1em
6xl
60px/3.75rem
1em
Colors
Gray
Red
Primary
Buttons
Forms
Radio
Links
Spacing
4px
6px
8px
10px
12px
14px
16px
20px
24px
28px
32px
36px
40px
44px
48px
56px
64px
80px
96px
112px
128px
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
