Website design system
"Systematise everything"
Type scale
The type scale consists of 7 font sizes, each of which is a calculation combining 'px' and 'vw' units. Larger sizes scale up and down more than smaller sizes.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Colour palette
The colour palette consists of a set of shades of primary, accent & neutral colours. Each is on a scale that starts at 100 and ends at 900 with intermediate shades evenly distributed between those values.
Primary
Accent
Neutral
Shadows
There are 5 box shadows to represent different levels of elevation from the page.
Buttons
There are 3 core button styles: Primary is the default; Accent is for buttons that are key CTAs; Neutral is for buttons that are to be de-emphasized.