Headline H1

Headline H2

Body text looks like this

Small text looks like this Body S

Quote

Colours

In general, surface colours should be 60% of the area, primary colours should be 30% of the area, and contrast should be used on 10% of the area.

Primary

Alt Primary

Contrast

Alt Contrast

Surface 0

Surface 10

Surface 20

Surface 30

Surface 70

Surface 90

Buttons

These are set up using global styles

Primary Button Primary Button on hover

Sections and Containers

The Global Styles for sections should be applied to the outer container, with the inner container providing the max-width.

These Global Styles control the padding in various widths.

Section XS (1rem / 1.5rem)

Section S (1.5 rem / 1.5rem)

Section M (2.5 rem / 1.5rem)

Section D (5 rem / 1.5rem)

Section L (7.5 rem / 1.5rem)

Default Container Width

Medium Container Width var(–width-m)

Small Container Width var(–width-s)