Typography
Major Third scale with fluid clamp() sizing. Current font: system.
Type scale
8 fluid sizes from xs to 4xl. Each uses clamp() to scale between mobile and desktop. Resize the window to see them change.
Body text scales deliberately
Body sizes (sm / base / lg) jump ~15–20% from mobile to desktop — enough to feel comfortable on large screens, not just a token gesture. base goes 15→18px, lg 17→20px. Headings scale on top of that, so the hierarchy stays intact at every viewport.
Paragraphs use fluid clamp() so prose stays readable on phones and breathes on desktop. Resize the window to feel it.
Form inputs are a special case — they’re hard-pinned to 16px on mobile (text-[16px] sm:text-sm) to prevent iOS Safari from auto-zooming on focus. This rule is independent of the body scale and won’t change when you tweak --text-* tokens.
Scale ratio
Progressive ratio — body text steps are tight (~1.15), heading jumps are larger (~1.33).
Progressive ratio
Smaller steps for body text (~1.15), larger jumps for headings (~1.33). Not a fixed ratio — progressive scaling feels more natural.
Fluid clamp() values
Every size uses clamp(min, preferred, max) — scales smoothly between mobile and desktop.
--text-xs
Captions, fine print
--text-sm
Labels, helper text
--text-base
Body text (default)
--text-lg
Lead paragraphs
--text-xl
Section headings
--text-2xl
Page sub-headings
--text-3xl
Page headings
--text-4xl
Hero / display
Font presets
Three presets: system (SF Pro), inter, and geist. Switch via the Theme popover.
Font presets
Active preset: system. Change via Theme popover.
--font-sans
Pack my box with five dozen liquor jugs.
--font-mono
Pack my box with five dozen liquor jugs.
Line height & letter spacing
Three tiers each. Tight for headings, normal for body, relaxed for long-form.
Line height
This copies design tokens, Tailwind theme, cn() utility, and the theme provider into your project. It also installs clsx and tailwind-merge as dependencies. Components use cva() for variants and React.forwardRef for ref forwarding. Use rounded-[var(--ds-radius-card)] for cards and p-[var(--ds-space-card)] for padding.
This copies design tokens, Tailwind theme, cn() utility, and the theme provider into your project. It also installs clsx and tailwind-merge as dependencies. Components use cva() for variants and React.forwardRef for ref forwarding. Use rounded-[var(--ds-radius-card)] for cards and p-[var(--ds-space-card)] for padding.
This copies design tokens, Tailwind theme, cn() utility, and the theme provider into your project. It also installs clsx and tailwind-merge as dependencies. Components use cva() for variants and React.forwardRef for ref forwarding. Use rounded-[var(--ds-radius-card)] for cards and p-[var(--ds-space-card)] for padding.