Norbielink has no 4- or 8-point grid. Spacing is a short set of values chosen per
component — gaps cluster tightly around 12px, and padding is almost always an asymmetric
vertical/horizontal pair tuned to the control.
Gaps
Five values cover every flex gap in the app. Counts are occurrences on a representative screen.
| Sample | Gap | Seen | Used for |
|---|---|---|---|
4px | ×8 | Segmented-control segments, tight icon rows | |
6px | ×16 | Icon ↔ label inside a chip or status pill | |
8px | ×3 | Button content, small clusters | |
12px | ×26 | The default — toast parts, alert parts, form rows | |
16px | ×12 | Card and section groupings |
Padding
Paired values, smallest to largest. The vertical figure is almost always well under the horizontal one — that ratio is what makes the product’s controls read compact.
| Padding | Applies to |
|---|---|
1px 6px | PRO badge |
3px 8px | Status chip · NEW badge |
3px 10px | Pill badge |
3px 12px | Tonal status pill |
4px 10px | Filter pill |
4px 12px | Segmented segment |
6px 10px | Toast pill |
6px 12px | Secondary button |
7px 12px | Toolbar control — the most common padding |
9px 16px | Primary button |
9px 17px | Dialog button |
9px 18px | Elevated primary |
10px 14px | Menu item |
12px 14px | Toast card |
12px 16px | Tab |
14px 20px | Table row |
16px | Alert banner |
16px 20px | KPI tile |
24px | Dialog panel |
| Pick the pair that belongs to the component, do not derive it from a grid step. |
7px 12px is the most common value in the product — it is the toolbar control. |
Page content sits in a 48px gutter; cards use 16–24px internally. |