Text H1

Text H1 (looks like)

Text H2

Text H2 (looks like)

Text H3

Text H3 (looks like)

Text H4

Text H4 (looks like)

Text H5

Text H5 (looks like)

Text H6

Text H6 (looks like)

Text XL

Text L

Text Base

Text SM

Text XS

Pre

Unordered List
Unordered List
Unordered List

Ordered List
Ordered List
Ordered List

This is a Quote
– Julian Stark

accent-1

accent-1–alt

accent-2–alt

Surface-0

Surface-10

Surface-20

Surface-30

Surface-70

Surface-80

Surface-90

Surface-100

Buttons

abc

Primary Contrast Primary Alt Primary Outline Primary Ghost

Primary Primary Alt Primary Outline Primary Ghost

Sections & Containers

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

These Global Styles control the padding in the section and are available in XL, L, D, M, S, XS.

Section I

Section XS

Section S

Section M

Section D

Section L

Section XL

wrapper-d // Default Container Width

wrapper-m // var(--width-m)

wrapper-s // var(--width-s)

wrapper-xs // var(--width-xs)