Colors
Warm cream and browns carry the page; red is reserved for action. Every colour is a token — the same name in Tailwind, CSS and JS.
Core palette
The colours that make a screen look like WeDance. Contrast is measured against cream (the page) and white (cards).
Semantic tokens
Name the job, not the colour. Components use these, so a theme change is one edit. Prefer them over the raw palette.
Status colours
Feedback only. Never use status colours for decoration or brand accents.
Text contrast
Common pairings checked against WCAG 2.2. Body text needs AA (4.5:1); large or bold text needs 3:1.
| Sample | Pairing | Ratio | WCAG |
|---|---|---|---|
| Dance tonight | Heading on cream | 13.94:1 | AAA |
| Dance tonight | Body on cream | 9.36:1 | AAA |
| Dance tonight | Eyebrow on cream | 5.21:1 | AA |
| Dance tonight | Link on cream | 4.45:1 | AA large |
| Dance tonight | Cream on red | 4.45:1 | AA large |
| Dance tonight | Cream on brown | 13.94:1 | AAA |
| Dance tonight | Success text on cream | 3.04:1 | AA large |
| Dance tonight | Warning text on cream | 1.98:1 | fail |
Amber 500 (warning) and green 600 fail as small text on cream — use them for fills and icons, and pair status text with brown.
Extended palette
Accents and tints that pages already use. Fine for category colours and illustrations; reach for the core palette first.
Usage
<!-- Tailwind class — preferred -->
<p class="text-muted-foreground">Body text</p>
<div class="bg-wd-cream text-wd-brown-900">…</div>
<!-- Inline CSS -->
<span style="color: var(--wd-amber-600)">Eyebrow</span>
<!-- Transparent tint -->
<div style="background: color-mix(in srgb, var(--wd-red-600) 10%, transparent)">…</div>
<div class="bg-wd-red-600/10">…</div>
<!-- JS (alpha suffix, rotations) -->
import { WD } from '~/lib/brand'
const border = WD.red600 + '55'color: var(--wd-red-600)Do — use a token so the colour stays consistent and themeable.
color: #dc2626Don't — paste a hex value — it drifts the moment the palette changes.