Space, shape and motion
Spacing, corners and borders that keep screens consistent.
A 4px grid, corners set by role, thin borders and short motion that slows at the end.
Spacing
All spacing is a multiple of 4px. Use gaps between neighbors instead of margins.
Corners
Every corner comes from one of four roles, so one setting changes a whole product. Circles such as avatars, dots and switches stay round in every shape.
Round (default)
Soft
Sharp
| Role | Used for | Round | Soft | Sharp |
|---|---|---|---|---|
| --radius-control | Buttons, chips, segmented controls, pill tabs | pill | 10px | 4px |
| --radius-field | Text fields, selects, the composer | 12px | 10px | 4px |
| --radius-card | Cards, panels, frames, code blocks | 16px | 14px | 6px |
| --radius-overlay | Dialogs, sheets, menus, popovers, toasts | 16px | 16px | 8px |
Set a shape on the page or on any part of it: <html data-shape="sharp">. Or set one role yourself, for example --shape-card: 10px in your own CSS. In code use rounded-control, rounded-field, rounded-card and rounded-overlay, never a fixed radius. Try it here from the Theme button.
Borders
Borders are 1px everywhere. In the token file, Tailwind's border, border-t and border-b classes are changed to use the --hair value.
Elevation
shadow-sm
shadow-md
shadow-lg
Motion
Hover takes 150ms, things entering take 220ms and panels take 380ms. Each one slows down gently at the end. The blinking caret, shimmer, typing dots and headline typing stop when a person asks for less motion.