3.2 KiB
3.2 KiB
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
- Hex accuracy — These are my best estimates from the screenshot. Can you verify any of these, or should I proceed and we refine later?
- 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?
- Semantic vs palette — Do you want components to reference palette names (
bg-blue-01) or semantic names (bg-primary), or both?