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.