Type & Spacing Scales
When you nudge an element in Figma, the default nudge is 8px. That is not an accident. The 8px grid is the most common spacing system in professional design — and it has a direct code equivalent that keeps your layouts consistent.
The spacing scale
Section titled “The spacing scale”A spacing scale is a fixed set of values built on a base unit. The most common base is 4px (with 8px as the “standard step”). Here is how it maps:
| Token name | Value | Figma equivalent |
|---|---|---|
--space-1 | 4px | Nudge × 0.5 |
--space-2 | 8px | 1 nudge |
--space-3 | 12px | 1.5 nudges |
--space-4 | 16px | 2 nudges |
--space-6 | 24px | 3 nudges |
--space-8 | 32px | 4 nudges |
--space-12 | 48px | 6 nudges |
--space-16 | 64px | 8 nudges |
Everything in your layout — padding, margin, gap between elements — should use one of these values. Values that are “off-scale” (like 13px or 22px) are usually design mistakes worth correcting.
The type scale
Section titled “The type scale”A type scale is a consistent set of font sizes built on a ratio. Common ratios are 1.25 (Major Third) and 1.5 (Perfect Fifth). Starting from a base of 16px:
| Token name | Value (ratio 1.25) | Use |
|---|---|---|
--text-xs | 12px | Labels, captions |
--text-sm | 14px | Secondary body, metadata |
--text-base | 16px | Body text |
--text-lg | 20px | Lead text, card headings |
--text-xl | 24px | Section headings |
--text-2xl | 32px | Page headings |
--text-3xl | 40px | Hero headlines |
In Figma, these map to your Text Styles. If your text styles are named body/sm, body/base, heading/lg, they should translate directly to --text-sm, --text-base, --text-lg.
Scales in action
Section titled “Scales in action”The section below uses only token-based spacing and type sizes. Change --text-base or --space-4 in the CSS and watch the scale ripple through.