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.

Buttons

Primary Button Secondary Button

Layout Demo

Sidebar (1fr)

Main Content (2fr)