Spacing

A consistent rhythm, with room for content.

Spacing tokens

The scale uses multiples of 0.25rem: --lumi-space-1, 2, 3, 4, 5, 6, 8, 12 and 16. Larger numbers create section-level breathing room; control interiors use the smaller values.

Dimensions

Control heights are sm (2rem), md (2.75rem), and lg (3.25rem). Radius tokens are sm, md, lg and full. Icon sizes have sm and md roles. --lumi-content-width defaults to 72rem for applications that opt into it.

Responsive composition

Set min-width: 0 on flex/grid children around fields and code blocks. Use max-width: 100% for component demos. Luminescent does not enforce a viewport or apply global body rules.