Foundations

Colour & tokens

One orange, light warm ivory paper — no gold. Orange is the only brand & action colour; genre hues are context accents; verified attendance is a calm blue. Colour is never the only signal.

CoreSurfaces, ink & brand

--cc-paper #F7F2EA light warm ivory ground

--cc-paper-hi #FFFCF6 inputs, lifts

--cc-paper-sunk #F0EAE1 recessed band

--cc-ink #1A1714 text · 16.02:1 on paper

--cc-ink-muted #4A554F meta · 6.97:1 (AA)

--cc-ink-faint #8C857A graphics only

--cc-orange #E0552E brand · ≈3.0:1 (large/graphics)

--cc-orange-text #A8472A links/labels · 5.23:1 (AA)

--cc-oxblood #69242E deep accent

Why the new paper — this moves back to warmth, but lighter and less dense than the previous warm paper family (#F2EDE3 / #FAF6EE / #ECE6DA). Bright --cc-orange stays for large numerals, rules, fills and graphics. Body-size links and labels use --cc-orange-text (5.23:1, AA). Never pure black or pure white.

Genre accentsContext, not theme

--cc-genre-opera #6F1D2C burgundy · 9.98:1 on paper

--cc-genre-musical #A32663 magenta · 6.25:1 on paper

--cc-genre-theatre #216B45 emerald · 5.79:1 on paper

--cc-genre-dance #006B7F petrol · 5.53:1 on paper

--cc-genre-concert #68499A violet · 6.26:1 on paper

--cc-genre-other #3F4642 graphite · 8.70:1 on paper

GenreBadge.astro full-colour badge · white symbol + label (colour never alone)

OperaMusicalTheatreDanceConcertOther

.cc-chip--genre selected genre filter chip carries its accent

Verified attendanceA calm blue, not green

--cc-verified-attendance #2767A8 fill · white on it ≈4.7:1

--cc-verified-attendance-ink #1E4F80 text · ≈7.0:1 (AA)

--cc-verified-attendance-bg #E7F0FA tint ground

--cc-verified-attendance-border #8BB7E0 tint hairline

VerifiedBadge.astro always shield icon + text

Verified attendance 62% verified attendance

Distinct from genre-dance petrol — verified #2767A8 stays institutional blue while dance moves to #006B7F (petrol/teal). Verification always carries the check icon, so the two never read as the same signal. Verified attendance is semantic, not a genre colour.

FunctionalState colours

--cc-success #3F7A4E generic success (was the old green 'verified')

--cc-danger #A8321F error / destructive / removed

--cc-hairline #D8D4CC divider

--cc-hairline-strong #B9B2A6 control border

--cc-row-tint #F7D9CE active/hover row

--cc-wash rgba(224,85,46,.07) orange highlight ground

Green is deprecated as “verified.” The old green --cc-verified #3F7A4E is renamed to --cc-success (generic success only). --cc-verified now aliases the blue attendance token for back-compat. No yellow anywhere — “attention/warning” borrows the brand-orange family, never a gold/amber.

GuidanceWhere each colour goes

Use	Colour	Notes
Primary action / CTA	`--cc-orange` fill, ink text	Bold label; ≈4:1 large-text AA. Never genre-coloured.
Links & labels at body size	`--cc-orange-text`	≈5:1 AA on paper & paper-hi.
Genre badge / selected genre chip	genre accent	Always with symbol + text label.
Page context marker (production/performance)	genre accent on a hairline/score	Subtle; never a full background theme.
Verified-attendance badge	`--cc-verified-attendance`	Check icon + “Verified attendance”.
Verified-only filter (active)	blue tint + check	Distinct from genre-dance; labelled.

Do

Keep orange as the single brand & action colour.
Use genre hues as small accents — badges, dots, selected chips, score accents.
Pair every colour signal with text or an icon.
Put black text on large orange grounds.

Don't

Theme whole pages or cards in a genre colour.
Use gold, yellow, or a second brand colour.
Rely on colour alone for genre, status, or verification.
Use the bright orange for body-size text (use orange-text).