The six tokens
| Token | Direction | Internal / external | Use |
|---|---|---|---|
| inset | all | internal | card padding on all sides |
| insetBlock | vertical | internal | vertical content spacing in modals |
| insetInline | horizontal | internal | left and right padding in buttons |
| inline | horizontal | external | gaps between horizontally placed buttons |
| block | vertical | external | margin between stacked components |
| stack | all | external | gaps between list items or form fields |
Each concept carries a scale (xs, sm, md, lg), yielding tokens like
spacing.inset.md or spacing.stack.lg.
Why this taxonomy
Most spacing systems use a flat scale, spacing-1 through spacing-8, and rely on whoever is using it to remember which value goes where. Three problems with that:
- Context-free names don't say what the spacing is for, so the wrong value is easy to reach for.
- No direction means horizontal and vertical spacing share values even when they shouldn't.
- No internal-versus-external distinction means padding and margin drift apart inconsistently.
Directional tokens encode the intent in the name. The token tells you whether the spacing is internal padding or external margin, and which axis it operates on. A team keeps using a taxonomy like this long after the person who set it up has gone, because the names carry the reasoning.
Each one in use
inset, uniform internal padding
Default padding inside cards, modals and containers. inset.xs pads a small
badge; inset.md is default card padding; inset.lg gives modal
content room.
insetBlock, vertical internal padding
Vertical-only padding when vertical rhythm matters more than horizontal balance: section header padding, card body verticals, compressed badge heights.
insetInline, horizontal internal padding
Horizontal-only padding where content aligns vertically but needs side spacing: input fields, button sides, navigation drawer items.
inline, external horizontal spacing
Gaps between horizontally arranged items: icon and label, button groups, grid columns, side-by-side cards.
block, external vertical spacing
Vertical space between stacked blocks: cards, form sections, layout breaks between unrelated modules.
stack, repeated-item spacing
Consistent spacing between repeated items in a group: form fields, list items, accordion rows. Distinct from block because repetition wants one value, applied uniformly.
Where it sits in the architecture
These are semantic tokens in a two-tier model. They alias primitive tokens, the raw values like 4, 8, 16, 24, which are rarely touched directly. Designers and developers reach for the semantic layer; the primitives stay quiet underneath. Tokens should encode intent, not just values.
The naming follows CSS logical properties, padding-inline, margin-block, so it's internationalisation-aware by construction. Worth checking that a consuming codebase respects logical properties rather than physical ones.
Origin: Lantern, Lux 4.0, 2025. Reused on every engagement since.