Scales and type

If a number is not on a scale, it is not allowed. Scales are short lists of named values that every component picks from. They are why a page feels calm even when nobody can say why.

Each scale below is copyable as tokens. Where Tailwind v4 already ships the same scale, use its defaults and do not reinvent them.

Type scaleCopy Anchor Link

Use a ratio of 1.25 (major third) for product UI, where many levels sit close together. Use 1.333 (perfect fourth) for editorial and marketing pages, where fewer levels need more contrast. This guide uses 1.333.

For product UI, Tailwind's default size and line-height pairs are a sound scale. Use them as they are.

• MUST keep body text at 16px or more. Inputs too: iOS Safari zooms the page when a focused input is under 16px.
• MUST use no more than 6 sizes on a single screen. More sizes means the hierarchy is guessed.
• SHOULD make fluid display sizes with clamp(), keeping the minimum on the scale: font-size: clamp(2.25rem, 5vw + 1rem, 4.5rem).
• SHOULD set sizes in rem, so they follow the reader's browser font setting.

Line-height and trackingCopy Anchor Link

Line-height shrinks as size grows. Big type with body line-height looks loose and falls apart.

• MUST add positive tracking to any all-caps text. Capitals set at 0 look cramped.
• MUST NOT add letter-spacing to body text.

Spacing: the 4pt scaleCopy Anchor Link

• MUST use only these steps. 5, 10, 13 and 18 do not exist.
• MUST make the gap between groups at least twice the gap inside them: 8 inside, 16 or more between.
• SHOULD use 1px and 2px only for borders, outlines and focus-ring offsets. Those are the only off-scale values.
• SHOULD keep component padding to 3 steps: 12, 16 and 24.

Radius scaleCopy Anchor Link

Tailwind v4 defaults. Pick two or three for a product and ban the rest.

• MUST make nested corners concentric: inner radius = outer radius minus the padding between them. A 16px card with 8px padding holds an 8px image.
• SHOULD use no more than 3 radii in one product, plus full.
• SHOULD grow radius with size. A 4px chip and a 16px modal look related; a 16px chip does not.

Shadow and elevationCopy Anchor Link

Shadows say how far above the page something floats. Use a few named levels, each with one job.

:root {
  --shadow-1: 0 1px 2px rgb(22 20 15 / 0.08);
  --shadow-2: 0 1px 2px rgb(22 20 15 / 0.06), 0 4px 12px rgb(22 20 15 / 0.08);
  --shadow-3: 0 2px 4px rgb(22 20 15 / 0.06), 0 12px 24px rgb(22 20 15 / 0.12);
  --shadow-4: 0 4px 8px rgb(22 20 15 / 0.08), 0 24px 48px rgb(22 20 15 / 0.18);
}

• MUST tie elevation to z-index: a higher shadow never sits under a lower one.
• MUST show elevation in dark mode with a lighter surface, not a stronger shadow. Shadows barely read on near-black. Material's dark theme does the same.
• SHOULD tint shadows with the ink colour (rgb(22 20 15 / …)), never rgba(0,0,0,…).
• SHOULD NOT combine a shadow and a border on the same card. Pick one.

Z-index: named layersCopy Anchor Link

• MUST use only these tokens. z-index: 9999 or z-50 chosen by feel is a bug.
• MUST add isolation: isolate to a component that uses z-index inside itself, so its numbers cannot leak and fight the page layers.
• SHOULD use the native top layer where you can. <dialog> opened with showModal() and elements using the popover attribute sit above everything without any z-index.

Icon sizesCopy Anchor Link

• MUST size the icon to the line-height of the text beside it, or one step below. A 16px icon suits 14px text on a 20px line.
• MUST give icon-only buttons a 44×44px hit area, whatever the icon size, and an aria-label.
• SHOULD keep one stroke width across the set: 1.5px or 2px at 24px (Lucide's default is 2). Mixing icon libraries mixes stroke widths.
• SHOULD colour icons with currentColor, so they follow the text colour in every state and theme.

Choose a voice, not a defaultCopy Anchor Link

The fastest way to make a site look generated is to use the font every generator uses. Pick type that belongs to the subject:

• Editorial, cultural, craft: a serif with character for display (this guide uses Newsreader), paired with a plain grotesk for text.
• Product and tools: one well-drawn grotesk family doing everything. Weight and size make the hierarchy.
• Playful or nostalgic: a display face with a strong period flavour, used sparingly. Never for body copy. This site uses the IBM VGA 8x16 pixel font, at multiples of 16px only.

One family, or two clearly different ones. Never two that are almost the same.

Set it for readingCopy Anchor Link

Change the ratio and every setting still looks related. That relationship is what "clean" really means.

font-variation-settings: 'opsz' 56, 'wght' 400;

Variable fonts put weight and optical size on sliders. Small optical sizes are drawn wider and sturdier, so they stay readable at caption sizes. Let the size set the axis automatically.

Why it worksCopy Anchor Link

A scale shrinks the number of choices from infinite to about ten. The eye reads repeated intervals as order, so a page built from ten values looks intentional even to someone who cannot name a single one. It also makes reviews mechanical: a value is either on the list or it is a bug.

SourcesCopy Anchor Link