05

Spacing

Base-4 scale. Generous whitespace is not optional — clarity for beginners depends on it.

xxs
4px
xs
8px
sm
16px
md
24px
lg
40px
xl
64px
2xl
96px
3xl
128px

SCALE

xxs
4pxIcon padding, tight gaps
xs
8pxBetween icon and label
sm
16pxInside cards, form gaps
md
24pxCard padding, section insets
lg
40pxBetween content groups
xl
64pxBetween page sections
2xl
96pxMajor section breaks
3xl
128pxPage-level separation

IN CONTEXT

CARD ANATOMY

md — 24px
xs
xs

SECTION RHYTHM

Title
lg — 40px
Content
sm — 16px
Content
xl — 64px
Next

BORDER RADIUS

sm
md
lg
xl
full
sm8pxSmall pills, inline tags
md12pxInputs, buttons, inner cards
lg16pxCards, modals, containers
xl24pxHero sections, large panels
full9999pxPill buttons, avatars, badges

RULES

DO

  • Use the scale — never arbitrary pixel values
  • Default to md (24px) for card padding
  • Use xl (64px) min between sections
  • When something feels cramped, go one step up

DON'T

  • Use odd values like 5px, 10px, 15px, 30px
  • Reduce spacing to fit more — simplify instead
  • Mix radius tokens on one component
  • Use rounded-full on cards — only pills