Spacing and corners
Spacing scale, standard gap, row density and corner radii.
Spacing scale
Padding and gaps are chosen from these steps.
--space-xs | 4px | |
--space-sm | 8px | |
--space-md | 12px | |
--space-base | 16px | |
--space-lg | 20px | |
--space-xl | 24px | |
--space-xxl | 32px |
Standard gap
--ason-gap 8px
The gap between cards, rows and columns, between the top bar and the first card, and between the menu and the content all use the same single value.
Row density
Density is set on the table, not on cells. Three densities serve three jobs.
ason-table-dense | 5px | Dense — desktop data table |
ason-table-medium | 8px | Medium — touch list (tablet) |
ason-table-wide | 12px | Wide — summary and card rows |
x | 12px | Horizontal cell padding |
Corner radius
Corners are plain rounded corners. In nested surfaces the inner radius is the outer radius minus the padding (concentric corners).
--radius-sm | 8px | Inline, compact items, focus ring | |
--radius-md | 11px | Small tiles, row highlight | |
--radius-lg | 18px | Card, dialog, panel | |
--radius-field | 18px | Input, select, search box | |
--radius-xl | 20px | Large surface, popover | |
--radius-2xl | 28px | Showcase card, largest surface | |
--radius-pill | 999px | Button, chip, badge |
Control height
Buttons and form fields are 32 px tall; small controls are 24 px.