Spacing

Everything you need to space a layout: a base-4 scale, semantic spacing tokens, and values for radius and border width. Use the semantic layer, not the raw scale.

Base scale

The foundation layer. These feed into semantic tokens but never get used in components directly. Each step name gives you the pixel value: divide the step number by 25 to get the size.

--scale-0 0px

--scale-25 1px

--scale-50 2px

--scale-100 4px

--scale-150 6px

--scale-200 8px

--scale-250 10px

--scale-300 12px

--scale-400 16px

--scale-500 20px

--scale-600 24px

--scale-700 28px

--scale-800 32px

--scale-850 36px

--scale-900 40px

--scale-1000 48px

--scale-1100 64px

Semantic spacing

These are the tokens you'll actually use. Named by value so --spacing-16 is always 16px. Reach for these when you're setting paddings, gaps, and margins.

--spacing-2 2px --scale-50

--spacing-4 4px --scale-100

--spacing-8 8px --scale-200

--spacing-10 10px --scale-250

--spacing-12 12px --scale-300

--spacing-16 16px --scale-400

--spacing-20 20px --scale-500

--spacing-24 24px --scale-600

--spacing-28 28px --scale-700

--spacing-32 32px --scale-800

--spacing-36 36px --scale-850

--spacing-40 40px --scale-900

--spacing-48 48px --scale-1000

--spacing-64 64px --scale-1100

Border radius

Seven steps. Use --radius-xlg for cards and panels, --radius-round for chips and badges. Everything in between is for inputs and smaller surfaces.

none 0px --radius-none

xsm 4px --radius-xsm

sm 6px --radius-sm

md 8px --radius-md

lg 10px --radius-lg

xlg 12px --radius-xlg

round 20px --radius-round

Border width

Four widths. Most surfaces use 1px (sm). Go up to 2px or 4px only when you need strong visual emphasis.

none 0px --border-width-none

sm 1px --border-width-sm

md 2px --border-width-md

lg 4px --border-width-lg