Spacing
Naluma uses a generous spacing scale. The Visual Identity Direction calls for layouts that breathe — anxious users need visual breathing room, and cramped layouts amplify the feeling that there is too much to deal with.
Token source: tokens/primitive/spacing.json
Visual Scale
Section titled “Visual Scale”spacing.22pxPixel nudgesspacing.44pxTight inline gapsspacing.66pxBadge padding Yspacing.88pxButton padding Y (web sm)spacing.1010pxInput padding Yspacing.1212pxButton padding Y (app lg)spacing.1616pxButton X (app md)spacing.2020pxCompact section gapsspacing.2424pxCard paddingspacing.3232pxButton X (web lg)spacing.4040pxSection gapsspacing.4848pxLarge sectionsspacing.6464pxPage section rhythmspacing.8080pxMajor breaksspacing.9696pxPage-level spacingspacing.120120pxLargest gapUsage Guidelines
Section titled “Usage Guidelines”The scale runs from 0 to 120px in deliberate steps. A few conventions:
| Context | Typical tokens | Rationale |
|---|---|---|
| Inline icon gaps, badge padding | spacing.2 — spacing.6 | Tight but not cramped |
| Button inner padding | spacing.8 — spacing.16 | Comfortable touch target padding |
| Card inner padding | spacing.24 | Breathing room for card content |
| Section gaps | spacing.40 — spacing.64 | Generous separation between content blocks |
| Page-level vertical rhythm | spacing.80 — spacing.120 | Large-scale breathing room between major sections |
Accessibility note
Section titled “Accessibility note”The minimum touch target for the Naluma app is 44px (see Accessibility). When composing button sizes, ensure that padding + content height meets or exceeds this minimum. The button component tokens already enforce this via min-height: 44px on all app size variants.