# Design tokens

## Font
- **Manrope** (Google Fonts), weights 400, 500, 600, 700 and 800. Fallback: `system-ui, sans-serif`.
- Use `font-variant-numeric: tabular-nums` on the whole app so figures line up.

| Use | Size | Weight | Extra |
|---|---|---|---|
| Page title (h1) | 28px | 800 | letter-spacing -0.02em |
| KPI value | 30px (26px on reports) | 800 | letter-spacing -0.02em |
| Hero amount (mobile, summary card) | 34–38px | 800 | |
| Card title (h2) | 17px | 800 | |
| Body / table cell | 14px | 400–700 | |
| Label / meta | 12–13px | 600–700 | colour `muted` |
| Table header | 12px | 700 | UPPERCASE, colour `muted` |

## Colours

| Token | Hex | Use |
|---|---|---|
| `ink` | #0F1A14 | Main text |
| `muted` | #55665C | Secondary text, labels |
| `bg` | #F4F6F3 | Page background, inner stat tiles |
| `surface` | #FFFFFF | Cards |
| `border` | #E3E9E5 | Card borders |
| `border-input` | #D5DDD7 | Inputs, secondary buttons |
| `divider` | #EDF2EE | Table rows, progress track |
| `primary` | #0B6B4B | Primary buttons, links, positive figures, bars |
| `primary-hover` | #084D36 | Link hover |
| `primary-soft` | #E3EFE8 | Success pills, avatar circles |
| `primary-selected` | #F0F7F3 | Selected card background (with a 2px `primary` border) |
| `sidebar` | #0F2A1E | Sidebar, dark hero cards |
| `sidebar-active` | #1E4A36 | Active nav item, chips on dark |
| `sidebar-panel` | #173A2A | Branch box in sidebar |
| `sidebar-divider` | #2A5240 | Dividers on dark cards |
| `on-dark` | #FFFFFF / #DCE8E1 / #B9CEC2 / #A9C3B5 | Text on dark, from strongest to faintest |
| `accent` | #7FD6A8 | Logo tile, avatar on dark, score chip |
| `chart-expected` | #CFE0D6 | "Expected" bars |
| `warn-text` | #7A4D00 | Warning pill text |
| `warn-soft` | #FFF1D6 | Warning pill background |
| `warn-banner` | #FFF6E5 / text #6B4A0E | Info banners |
| `warn-strong` | #E8A33D | Late payment, 31–60 days late |
| `info-text` / `info-soft` | #1D4E89 / #E6EEF9 | "In review" pill |
| `danger-text` / `danger-soft` | #9B2C16 / #FCE4DF | Low score, over 90 days late, Decline button |
| Arrears scale | #0B6B4B → #8CC7A8 → #E8A33D → #D9733B → #9B2C16 | Current → over 90 days late |
| Channel bars | #0B6B4B, #2F8F6A, #6FB394, #B7D6C5 | M-Pesa, Airtel, Mixx, Cash |
| Mobile money badges | M-Pesa #0B6B4B, Airtel #B3261E, Mixx #1D4E89 | Payment method tiles |

## Shape and spacing
- Card: white, 1px `border`, radius **18px**, padding 22–24px.
- Stat tile inside a card: `bg` colour, radius 12–14px, padding 12–16px.
- Inputs and buttons: radius **12px**. Primary button padding 13–16px vertical, minimum height 44px (48–56px on mobile).
- Pills: radius 99px, padding 5px 10px, 12px/700.
- Progress bars: 8–12px high, radius 99px, track `divider`.
- Gaps: 16px between cards, 20–24px between page sections.
- Page padding: 28px 36px. Content max width 1280px on single-column pages.
- Sidebar width: 232px. Collapse it below 900px.
- Mobile: 390×844 frame, 22px side padding, bottom tab bar with active tab background `primary-soft`.

## Icons
Use simple stroke icons at 2px stroke (Lucide works well). No emoji.