Foundations

Colour

Colour lives in two tiers. A raw primitives palette holds every hex value; semantic tokens alias into it and are the only names the app is allowed to use. In Figma that's the Primitives collection aliased by PlanJolly / Design System; in code it's theme.ts, which generated every value on this page.

Click any swatch or hex to copy it.

Surfaces

Warm cream underneath, white where content sits. Surfaces step by tone, never by outline.

bg
warm cream – all app screens
bgWarm
warm peach – hero and splash only
s0
cards, inputs, modal sheets
sl
section dividers, inactive states
sh
inactive dots, disabled fills
secCont
info banners, callouts
cardSelected
selected pricing card

Brand

Deep navy leads. Warm sand and tobacco brown carry the editorial accents; the terracotta accent is reserved for the splash-headline italic.

pri
primary actions, headings
priC
gradient end – buttons, FAB
sec
decorative accents
warmDisplay
editorial headings
navy700
countdown hero gradient
navy900
countdown hero gradient
editorialAccent
splash headline accent

Text

Two text colours only – near-black for body, a darkened grey for secondary. No pure black anywhere.

os
primary body copy – no pure black
osv
secondary text – AAA

Contrast

Measured ratios, computed at build time from the tokens themselves. Secondary text was darkened from its original value specifically to clear AAA.

SamplePairRatio
os on bg #1a1c1c on #faf9f8 AAA 16.3:1
os on s0 #1a1c1c on #ffffff AAA 17.1:1
osv on bg #363838 on #faf9f8 AAA 11.2:1
osv on s0 #363838 on #ffffff AAA 11.8:1
pri on bg #1B3B5A on #faf9f8 AAA 11.0:1
pri on s0 #1B3B5A on #ffffff AAA 11.5:1
warmDisplay on bgWarm #735a43 on #fff4eb AA 5.9:1

Semantic

Error, success and warning – each with a matching tinted surface.

err
errors
errBg
error surface
ok
success
okBg
success surface
warn
warnings
warnBg
warning surface

Status pills

The dashboard task-row pills, exactly as the app composes them: status text on its paired tint.

IN PROGRESS SCHEDULED DUE DONE

Category palette

Fifteen task categories, each a foreground + surface pair. The chip pattern is fixed: surface fill on the chip, foreground on the caption-tracked text, foreground again for the category-card progress stroke. Chip text is 11px capitals – the AA-large ratings below are read against that size.

ChipSlugForegroundSurfaceFg on surface
Ceremony ceremony AAA 9.9:1
Reception reception AA large 3.0:1
Photography & Video photography-video AA 5.8:1
Attire attire AA 5.5:1
Flowers flowers AA large 4.0:1
Décor decor AA 6.2:1
Entertainment entertainment AA 6.7:1
Guests & Stationery stationery AA 5.0:1
Hair and Makeup hair-makeup AA large 3.7:1
Transport & Logistics transport AA 5.5:1
Accommodation accommodation AA 5.1:1
Cake cake AA large 3.8:1
Legal legal AA 6.6:1
Gifts gifts AA 5.9:1
Post-Wedding post-wedding AA large 3.9:1