Foundations
Spacing & stack
Space tokens, radii, density, and the stack primitive.
Space tokens
--lantern-space-xs
--lantern-space-sm
--lantern-space-md
--lantern-space-lg
Radii
radius-sm
radius-md
radius-lg
Stack
stack/1 gives a run of children one gap (sm 0.5rem · md 0.75rem · lg 1.25rem) — pages never rely on margins collapsing.
Profile
Name and avatar
Card one
Notifications
Email and push
Card two
<.stack gap="lg">
<.page_header title="Settings" />
<.card title="Profile">…</.card>
<.card title="Notifications">…</.card>
</.stack>Density
Set data-lantern-density to compact or comfortable on any ancestor; controls, rows and tables follow. Use the Compact toggle in the top bar to try it.
Control height --lantern-control-h and padding --lantern-control-px change with density.
<div data-lantern-density="compact">…</div>