Base design system
Design System
A live preview of every variable, default and class. Change a variable and this page updates with it.
01 · Variables
Colors
primary
var(--primary)
secondary
var(--secondary)
tertiary
var(--tertiary)
bg-dark
var(--bg-dark)
bg-light
var(--bg-light)
text-heading
var(--text-heading)
text-body
var(--text-body)
text-muted
var(--text-muted)
border
var(--border)
black
var(--black)
white
var(--white)
on-primary
var(--on-primary)
success
var(--success)
error
var(--error)
02 · Defaults
Typography
font-heading
Aa Bb Cc 123
font-body
Aa Bb Cc 123
text-display · --text-display
Display Title
h1 · --text-h1
This is an H1 Title
h2 · --text-h2
This is an H2 Title
h3 · --text-h3
This is an H3 Title
h4 · --text-h4
This is an H4 Title
h5 · --text-h5
This is an H5 Title
h6 · --text-h6
This is an H6 Title
text-lg · --text-body-lg
Large body text for intros and lead paragraphs.
p · --text-body-md
Body text. This is the p Default, so every paragraph gets this font, size, line height and color without a class.
text-sm · --text-body-sm
Small text for captions and supporting details.
text-xs · --text-body-xs
Extra small text for legal lines and labels.
eyebrow
Eyebrow label
text-muted
Muted supporting text.
inline formatting
A paragraph with an inline link, bold text and italics.
03 · Variables
Spacing & Radius
Spacing
space-2xs
space-xs
space-sm
space-md
space-lg
space-xl
space-2xl
space-3xl
Radius
radius-xs
radius-sm
radius-md
radius-lg
radius-xl
radius-full
04 · Classes
Buttons
Every button uses btn for size and shape, plus one variant class for color.
On bg-dark
05 · Classes
Surfaces & Cards
card
Card heading
Headings and body text switch color automatically on dark surfaces.
card + bg-light
Card heading
Headings and body text switch color automatically on dark surfaces.
card + bg-dark
Card heading
Headings and body text switch color automatically on dark surfaces.
card + bg-primary
Card heading
Headings and body text switch color automatically on dark surfaces.
06 · Classes
Layout
Build sections as section › container (or container-narrow). Grids drop to 2 columns on tablet and 1 on mobile.
grid-2
Column 1
Column 2
grid-3
Column 1
Column 2
Column 3
grid-4
Column 1
Column 2
Column 3
Column 4
07 · Defaults
Forms
Inputs, selects, textareas and labels are styled by Defaults, so every form matches without classes.