Spacing
Spacing decisions made ad hoc accumulate into visual inconsistency. When every component picks its own padding and gap values, the UI becomes uneven in ways that are hard to diagnose and fix systematically.
A fixed scale solves this by constraining choices to a shared set of values. Components that use the same scale step naturally feel related. Layouts built from scale-aligned components align with each other without manual correction. And when spacing needs to change globally, updating a token propagates everywhere at once.
Meteor's scale is numeric: every token name reflects its value in pixels, so --scale-size-8 is 8px. There is no semantic indirection to memorize.
Scale reference
Choosing a step
As a starting point:
- 4-8px for tight internal spacing within a component, such as an icon-to-label gap or badge padding
- 12-16px for standard component padding and item spacing
- 24-40px for spacing between form elements and section separation within a view
- 48-64px for separation between major layout regions
Consistency matters more than the exact value. Prefer reusing an existing step over introducing a one-off intermediate value.
- Use scale tokens for all spacing: padding, margin, and gap.
- Reuse the closest scale step when the ideal value falls between two tokens.
- Use calc(var(--scale-size-8) * -1) to negate a token when a negative offset is needed.
- Use border-radius tokens (--border-radius-*) for corner radii.
- Use arbitrary px or rem values that fall outside the scale.
- Introduce one-off spacing values to achieve pixel-perfect designs.
- Hardcode a negative px value like margin-top: -8px.
- Use scale tokens for border-radius. They serve different purposes and are separately maintained.