Shape and density
Square enough to mean business.
Radius
One 6px radius across every surface: buttons, inputs, cards, dialogs and menus. It's soft enough to feel modern and square enough to look like serious business software.
4px
Checkboxes and small controls
6px
Buttons, inputs, cards, dialogs
Full
Avatars, switches, dots
Density
Table rows are 36px by default. People who prefer more room can switch to comfortable 44px rows from their user menu.
Albeco DOOEL1,240.00
Tehnomarket1,240.00
Vero Centar1,240.00
Compact · 36px rows
Albeco DOOEL1,240.00
Tehnomarket1,240.00
Vero Centar1,240.00
Comfortable · 44px rows
Spacing
Spacing follows a 4px grid:
| Space | Used for |
|---|---|
| 8px | Between an icon and its label, and between buttons in a group |
| 16px | Between form fields, inside cards, between cards in a grid |
| 24px | Between sections of a page |
Elevation
Surfaces are separated by a 1px border, not a shadow. Only things that float above the page cast a shadow: menus, popovers, dialogs and toasts.