Design
The spacing scale, the grid and the breakpoints, the sizes of controls and the shell.
The scale and where each step is used.
--space-1 | 4 px | Inside a chip; an icon and its label | |
--space-2 | 8 px | Between chips; inside a compact row | |
--space-3 | 12 px | Inside a table cell; a field and its hint | |
--space-4 | 16 px | Inside a card on a dense screen; between fields | |
--space-5 | 20 px | Inside a card | |
--space-6 | 24 px | Between cards | |
--space-8 | 32 px | The page gutter | |
--space-10 | 40 px | Between page sections | |
--space-12 | 48 px | Above a page title |
Columns, gutters, the widths the layout changes at.
Desktop first and usable on a tablet; there is no phone layout in V1 (N-02). The sidebar folds to icons below the desktop width; cards sit in a 12-column grid with 24 px gutters — four tiles in a row, three position cards, or two thirds and one third.
| Width | What the layout does |
|---|---|
--bp-desktop 1280 px + | Sidebar unfolded, four tiles in a row, the meeting board full width |
--bp-tablet 768–1279 px | Sidebar folded to icons, two tiles in a row, tables scroll sideways inside their card |
| < 768 px | Not designed in V1; the pages stay readable but are not laid out for a phone |
Controls, the shell, the form width.
--size-control | 36 px | A button, a field, an option in a list |
--size-control-sm | 32 px | A compact button, a filter |
--size-header | 56 px | The top bar |
--size-sidebar | 240 px | The sidebar, unfolded |
--size-form | 384 px | A form’s width |
--size-content | 1200 px | The widest a page’s content reads |