Spacing & Radius — Aster Design System

Spacing scale

Keep related things closer together than unrelated things. That does most of the work of showing what belongs together.

Tight gaps inside a control

Icon to label, compact padding

Between related items

Default padding and gaps

Between groups inside a container

Card padding, button side padding

Between major sections

Large layout bands

Macro layout, button height

Page margins

Larger containers get larger corners. 4px is the smallest radius used on components.

None Full-bleed edges and flush dividers

Small Fields, checkboxes, menu items, tooltips

Medium Alerts, toasts, menus

Large Cards, dialogs, popovers

Full Buttons, badges, switches

Aster has one standard density, with no compact mode.

Name	Used for	Token
Control height	Table headers and icon buttons	`--as-density-control-height`
Control side padding	Padding inside controls	`--as-density-control-padding-x`
Control vertical padding	Padding inside controls	`--as-density-control-padding-y`
Table row height	Data table rows	`--as-density-table-row-height`
Table cell side padding	Data table cells	`--as-density-table-cell-padding-x`
Table cell vertical padding	Data table cells	`--as-density-table-cell-padding-y`

Buttons and fields have different heights, so a button beside an input in the same row is 4px taller. Align them to the center of the row.