Colours

Generate palette scales and semantic colour roles from a single config source.

Palette plus semantic roles

Use palette colours for full ramps and semantic colours for role utilities. This keeps component code expressive and avoids hardcoded hex values in page templates.

{
  "colours": {
    "brand": "#DB2777",
    "accent": "#F59E0B",
    "neutral": "#57534E",
    "success": "#16A34A",
    "warning": "#D97706",
    "error": "#DC2626"
  },
  "semanticColours": {
    "surface": "#12100E",
    "surface-2": "#1C1917",
    "text": "#F8F5F0",
    "text-muted": "#A8A29E"
  }
}

Generated utility examples

text-brand-80
bg-brand-10
border-neutral-30
text-success-80
bg-surface
text-text-muted

Usage guidance

Use neutral ramps for borders and content hierarchy.
Use semantic roles for app surfaces and text roles.
Reserve brand ramps for emphasis, not body copy.
Avoid direct hex values in page-level CSS where utilities exist.

Contrast review workflow

Choose candidate text and surface shades from generated ramps.
Validate contrast combinations in your component previews.
Adjust source tokens, regenerate, and re-check at component level.
Lock final combinations into documented component patterns.

Common mistakes

Overriding generated classes with page-only color variables.
Using too many unrelated brand accents across one page.
Treating semantic roles as one-off tokens instead of reusable contracts.

Next step

Continue to Spacing to keep rhythm and layout scale consistent.