🎨 Design Tokens

Radius

--radius-sm

--radius-md

--radius-lg

--radius-xl

--radius-pill

Shadows

--shadow-xs

--shadow-sm

--shadow-md

--shadow-lg

Typography

--text-xs (0.875rem)

--text-sm (0.9rem)

--text-base-sm (0.95rem)

--text-base (1rem)

--text-md (1.15rem)

--text-lg (1.25rem)

--text-xl (1.75rem)

--text-2xl (2.5rem)

Spacing

--space-xs

--space-sm

--space-md

--space-lg

--space-xl

📘 Cheat Sheet

📐 Radius

TokenValueCommon Uses
--radius-sm4pxCode blocks, blockquotes
--radius-md6pxImages, thumbnails, search bars
--radius-lg8pxProse images, embeds
--radius-xl12pxNewsletter box, 404 image
--radius-pill999pxSearch bars, filter pills, buttons

🌑 Shadows

TokenValueCommon Uses
--shadow-xs0 1px 4px rgba(0,0,0,0.03)Inputs, subtle UI
--shadow-sm0 2px 6px rgba(0,0,0,0.05)Small floating UI
--shadow-md0 4px 12px rgba(0,0,0,0.06)Cards, newsletter signup
--shadow-lg0 4px 24px rgba(0,0,0,0.15)Hero images, 404 void

🔤 Typography

TokenValueCommon Uses
--text-xs0.875remSmall metadata, pagination
--text-sm0.9remFootnotes, post meta
--text-base-sm0.95remSubtext, buttons, filters
--text-base1remBody text, inputs
--text-md1.15remh4, medium headings
--text-lg1.25remPost titles, h3
--text-xl1.75remh2, hero mobile
--text-2xl2.5remMain h1 titles

📏 Spacing

TokenValueCommon Uses
--space-xs0.25remTiny gaps, icon spacing
--space-sm0.5remCompact gaps, filters
--space-md1remParagraph margins, box padding
--space-lg2remSection padding
--space-xl3remSection rhythm, large gaps