Spacing

A single linear scale built on a 4px base unit — the foundation of spatial rhythm in Naos.

Naos spacing is built on a single linear scale derived from a 4px base unit. Every value in the scale is a whole multiple of 4px, which gives the interface a consistent spatial rhythm and makes it easy to combine values without creating arbitrary gaps.

Base unit

The base unit is 4px (0.25rem). All spacing tokens are multiples of this value.

Naming convention

The token name encodes the multiplier directly. Spacing x4 = 4 × 4px = 16px. Spacing x12 = 12 × 4px = 48px. Spacing x80 = 80 × 4px = 320px.

Steps x1 through x12 increment by 1 (4px per step), providing fine-grained control for dense UI. From x16 onward, the scale uses multiples of 4, giving larger jumps suited to layout-level spacing.

How to apply

Elements that sit closer together are perceived as belonging to the same group. Use spacing to reinforce that relationship: less space between things that are related, more space between things that are distinct. A field label and its input sit closer than two separate field groups. Two action buttons sit closer than the button row and the section above it. When choosing between tokens, ask which elements should read as grouped then give them less space relative to what surrounds them.  

The most important rule is to always use a token. Never hardcode a spacing value.