74 lines
3.2 KiB
Markdown
74 lines
3.2 KiB
Markdown
# 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?
|