Design System Master Page

📐 Design System Tokens

Live demo of clamp() typography, spacing, and layout for editors & designers

Typography

H1
var(--text-h1)
Heading One
H2
var(--text-h2)
Heading Two
H3
var(--text-h3)
Heading Three
Body
var(--text-base)
Body Text

Spacing

XS
var(--space-xs)
Padding Demo
SM
var(--space-sm)
Padding Demo
MD
var(--space-md)
Padding Demo
LG
var(--space-lg)
Padding Demo
XL
var(--space-xl)
Padding Demo

Container

Container Max
var(--container-max)
This box maxes out at the container width.

Buttons

Primary Button Secondary Button

Layout Demo

Sidebar (1fr)
Main Content (2fr)

Colors

Primary
var(--color-primary)
Primary
Primary Dark
var(--color-primary-dark)
Primary Dark
Secondary
var(--color-secondary)
Secondary
Secondary Dark
var(--color-secondary-dark)
Secondary Dark
Surface
var(--color-surface)
Surface
Text
var(--color-text)
Text
Muted
var(--color-muted)
Muted