Styleguide
Every token and Section permutation, rendered with the real components. Resize the window to see responsive tokens step down.
Primitives
--swatch-white
#ffffff
--swatch-paper
#fdfdfb
--swatch-paper-alt
#faf9f7
--swatch-stone
#efeeea
--swatch-grey
#888888
--swatch-ink
#32274b
--swatch-purple
#8d75e6
Theme: regular
bg-surface
bg-surface-alt
bg-surface-raised
bg-ink
bg-ink-muted
bg-line
bg-brand
Heading on surface-alt
Muted body copy sits on the alternate surface.
Brand label
Body copy in ink with a line border.
Theme: light
bg-surface
bg-surface-alt
bg-surface-raised
bg-ink
bg-ink-muted
bg-line
bg-brand
Heading on surface-alt
Muted body copy sits on the alternate surface.
Brand label
Body copy in ink with a line border.
Theme: dark
bg-surface
bg-surface-alt
bg-surface-raised
bg-ink
bg-ink-muted
bg-line
bg-brand
Heading on surface-alt
Muted body copy sits on the alternate surface.
Brand label
Body copy in ink with a line border.
Type scale
text-h1
The quick brown fox
text-h2
The quick brown fox
text-h3
The quick brown fox
text-large
The quick brown fox
text-medium
The quick brown fox
text-regular
The quick brown fox
text-small
The quick brown fox
text-tiny
The quick brown fox
font-mono
The quick brown fox
Spacing scale
tiny
xxsmall
xsmall
small
medium
large
xlarge
xxlarge
huge
xhuge
xxhuge
global
section-small
section-medium
section-large
Radius
rounded-small
rounded-medium
rounded-large
Section permutations
Dashed box = the inner container. Each prop is varied on its own; the rest stay at their defaults.