Design System 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.

Layout Demo

Sidebar (1fr)
Main Content (2fr)