# 07 — Design System Tokens

Tokens drive the mobile app, dashboard, and website via `packages/ui`. They render to platform-specific layers (RN style sheets, Tailwind CSS variables for the web).

## Color

| Token | Hex | Use |
|---|---|---|
| `--navi-blue-600` | `#1E5BFF` | Primary brand, buttons, links |
| `--navi-blue-700` | `#1747D1` | Pressed primary |
| `--navi-blue-100` | `#E7EEFF` | Soft tint, chips |
| `--navi-ink-900` | `#0B1220` | Headings |
| `--navi-ink-700` | `#2A3242` | Body |
| `--navi-ink-500` | `#5B6473` | Secondary text |
| `--navi-ink-300` | `#B7BFCB` | Disabled |
| `--navi-bg-0` | `#FFFFFF` | Surface |
| `--navi-bg-50` | `#F6F8FB` | App background |
| `--navi-bg-100` | `#ECEFF4` | Card background |
| `--navi-border` | `#E2E6ED` | Hairline |
| `--navi-success` | `#1FAE6F` | Success |
| `--navi-warning` | `#FFAA2B` | Warning |
| `--navi-danger` | `#E5484D` | Errors |
| `--navi-gold` | `#C9A227` | Premium accent |

Contrast: all body/heading combinations meet WCAG AA on `--navi-bg-0` and `--navi-bg-50`.

## Typography

Latin: **Inter** (fallback: SF Pro on iOS, Roboto on Android, system-ui on web).
Arabic: **IBM Plex Sans Arabic** (fallback: system-ui).

| Style | Size / Line | Weight |
|---|---|---|
| H1 | 28 / 34 | 700 |
| H2 | 22 / 28 | 700 |
| H3 | 18 / 24 | 600 |
| Body | 16 / 22 | 400 |
| Body-strong | 16 / 22 | 600 |
| Caption | 13 / 18 | 500 |
| Button | 16 / 20 | 600 |

## Spacing scale (px)

`4, 8, 12, 16, 20, 24, 32, 40, 56, 72`

## Radius (px)

`sm 8, md 12, lg 16, xl 24, pill 999`

## Elevation

| Token | Shadow |
|---|---|
| `card` | `0 6 24 rgba(11,18,32,.08)` |
| `input` | `0 2 6 rgba(11,18,32,.06)` |
| `overlay` | `0 12 32 rgba(11,18,32,.18)` |

## Component primitives

`Button` (primary / secondary / ghost / danger / link), `Input` (text / password / phone / search), `Select`, `Checkbox`, `Radio`, `Switch`, `Tag`, `Chip`, `Card`, `ListItem`, `ListingCard`, `RatingPill`, `BottomNav`, `TabBar`, `ProgressBar`, `Avatar`, `Skeleton`, `EmptyState`, `ErrorState`, `OfflineState`, `PermissionDeniedState`, `Modal`, `Sheet`, `Toast`.

## Required states (per screen)

Every screen has explicit visuals for: **loading, empty, error, offline, denied**.

## Internationalization

- All strings come from `i18n` namespaces; no inline copy in components.
- `dir="rtl"` flips layout. Use logical CSS properties (`paddingInlineStart`) and `start`/`end` on RN.
- Numbers, dates, currency formatted via `Intl` with the active locale.
- Right-aligned text in AR for blocks, but icons keep semantic placement (back arrow flips).

## Accessibility

- Min touch target 44×44pt.
- Visible focus state on all interactive elements.
- `accessibilityLabel`/`accessibilityRole` on all custom controls (RN) and ARIA on web.
- Forms announce errors via `aria-live="polite"` and inline error text.

## Tokens file (canonical source)

`packages/ui/src/tokens.ts` exports the JS object; web consumers re-export to CSS variables; mobile consumes the JS object directly.