Space

Each step follows --eun-space-<step>: the spacing scale behind every gap, padding, and margin in the component library, seven steps from a hairline xxs to a large-section xxl. Reference the token instead of a raw pixel value so spacing stays consistent (and themeable) across the whole app.

xxs

xs

s

m

l

xl

xxl

Token	Value	Typical use
`--eun-space-xxs`	`0.1rem`	Hairline gaps (icon + label)
`--eun-space-xs`	`0.25rem`	Tight internal padding (chips, badges)
`--eun-space-s`	`0.5rem`	Compact control padding (small buttons/inputs)
`--eun-space-m`	`1rem`	Default control padding, form field gaps
`--eun-space-l`	`2rem`	Section padding, card padding
`--eun-space-xl`	`3.5rem`	Large section padding
`--eun-space-xxl`	`5rem`	Page-level vertical rhythm

Usage

.custom-panel {
  padding: var(--eun-space-l);
  display: flex;
  gap: var(--eun-space-m);
}

Every interactive component in the library already uses these internally (e.g. eun-button's --button-padding defaults to var(--eun-space-s) calc(var(--eun-space-l) / 2)). Reach for the token first before hardcoding a pixel value in your own layout code, so a future spacing-scale change propagates automatically.

Space

Usage

See also