Spacing
Lyra uses a 4px spacing grid to make the distance between related elements predictable. Build layout
with --space-*, then use the radius and shadow tokens to express grouping and elevation without
inventing one-off measurements.
Scale
The --space-* ramp starts at 4px and grows through the steps used by component padding, gaps,
section rhythm and page gutters. Small steps tighten related controls; middle steps separate content
inside a surface; larger steps divide regions of a page. The zero token is available when a component
needs an explicit reset.
Spacing scale — 4px grid
The bars use the same token named in their label. Prefer a named step over a literal measurement so a layout keeps the same rhythm as the components around it.
--space-14px--space-28px--space-312px--space-416px--space-520px--space-624px--space-832px--space-1040px--space-1248px--space-1664px--space-2080px--space-2496pxRadii
The radius set moves from a 4px detail to a fully rounded pill. --radius-md is the default 10px
corner for general surfaces; use smaller radii for compact controls, larger radii for spacious
containers, and --radius-full only when the shape itself should read as a pill or circle.
Border radius roles
Each surface applies its own --radius-* token. The highlighted medium step is the standard
choice for cards and most component containers.
4px6px10px · default14px20px999pxShadows
--shadow-xs through --shadow-lg provide increasingly prominent light-theme elevation: use xs for
subtle separation, sm for cards, md for hover feedback and lg for modals. In dark mode,
--shadow-xs and --shadow-sm resolve to none, with semantic borders carrying subtle elevation;
--shadow-md and --shadow-lg remain for deeper overlays.
Elevation shadows
Choose the smallest shadow that communicates the relationship. A shadow signals elevation, not a substitute for the border that defines a surface.