💄 Colours

[bettybondoc]

Objective:
Reverse-engineer the existing colour usage on the live site, define a comprehensive colour palette for the design system, and document its usage for consistency and accessibility.

Key Tasks:

• Audit the current colour palette used on the live site to identify gaps or inconsistencies.
• Define base colours for primary, secondary, neutral, and accent tones.
• Create variations for different states (e.g., hover, active, disabled).
• Document usage guidelines, including accessibility considerations (e.g., contrast ratios) and brand alignment.
• Add the finalized colour palette to the design system in Figma (or the chosen tool).

Acceptance Criteria:

1. The colour palette is reverse-engineered, defined, and documented.
2. Variations for different states are included and align with design needs.
3. Documentation provides clear usage examples for text, backgrounds, and UI elements.
4. The colour palette is added to the design library for easy use by designers and developers.