Add project plans for brand colours, typography, workflow, and Figma migration

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

plans/brand-colours.md

@@ -0,0 +1,73 @@
+# Plan: Brand Colour Tokens
+
+## What
+Replace the placeholder design tokens in `src/tokens/tokens.css` with the actual brand colour palette from Figma, and extrapolate additional variants for extended UI use.
+
+## Why
+The current tokens use generic blues/greens — they don't match the project's brand. The Figma palette defines the canonical colours; we need to mirror those names and extend them with hover/active/background variants for component development.
+
+## Approach
+
+### 1. Palette layer — mirror Figma names exactly
+
+These are the base brand colours, named to match Figma:
+
+| Token | Hex (estimated from screenshot) | Notes |
+|---|---|---|
+| `--color-blue-01` | `#002664` | Deep navy (primary dark) |
+| `--color-blue-02` | `#146CFD` | Bright blue (primary) |
+| `--color-blue-03` | `#69B3E7` | Sky blue |
+| `--color-blue-04` | `#CBEDFD` | Ice blue |
+| `--color-red-01` | `#3E0014` | Dark burgundy/maroon |
+| `--color-red-02` | `#D7153A` | Crimson (primary red) |
+| `--color-red-03` | `#F5C5D0` | Soft pink |
+| `--color-red-04` | `#FDDDE5` | Pale pink |
+| `--color-grey-01` | `#3D3D3D` | Darkest grey |
+| `--color-grey-02` | `#6D7278` | Medium grey |
+| `--color-grey-03` | `#C0C0C0` | Light grey |
+| `--color-grey-04` | `#E0E0E0` | Lighter grey |
+| `--color-off-white` | `#F4F4F4` | Off white |
+| `--color-surface` | `#FAFAFA` | Surface |
+| `--color-white` | `#FFFFFF` | White |
+| `--color-orange-02` | `#EC6608` | Warning orange (light mode) |
+| `--color-orange-03` | `#F5B98A` | Warning orange (dark mode) |
+| `--color-green-02` | `#00A651` | Success green (light mode) |
+| `--color-green-03` | `#89E5B3` | Success green (dark mode) |
+
+### 2. Extrapolated variants
+
+For each colour family, generate useful variants not in Figma:
+
+- **Orange 01** (dark) and **Orange 04** (light bg) — fill the gaps in the orange scale
+- **Green 01** (dark) and **Green 04** (light bg) — fill the gaps in the green scale
+- **Blue 05** — ultra-light blue for backgrounds
+- **Red 05** — ultra-light red for backgrounds
+- **Hover/active states** — slightly darker/lighter versions of primary interactive colours
+
+### 3. Semantic mapping layer
+
+Map palette colours to semantic roles so components use intent-based tokens:
+
+```
+--color-primary        → blue-01
+--color-primary-hover  → derived (darker blue-01)
+--color-primary-light  → blue-04
+--color-text           → grey-01
+--color-text-secondary → grey-02
+--color-border         → grey-04
+--color-bg             → off-white
+--color-error          → red-02
+--color-error-bg       → red-04
+--color-warning        → orange-02
+--color-warning-bg     → orange-04
+--color-success        → green-02
+--color-success-bg     → green-04
+--color-info           → blue-02
+--color-info-bg        → blue-04
+```
+
+## Key decisions needed from you
+
+1. **Hex accuracy** — These are my best estimates from the screenshot. Can you verify any of these, or should I proceed and we refine later?
+2. **Dark mode** — The Figma shows light/dark mode status colours. Should we set up CSS custom property dark mode switching now, or defer and just define all the values?
+3. **Semantic vs palette** — Do you want components to reference palette names (`bg-blue-01`) or semantic names (`bg-primary`), or both?