Color

Token

Colour lives in tokens.css. Surfaces stay cream; accent is lime; member cards invert to teal.

The identity palette: brand teal and the lime accent.

--color-text

#0b383d. Primary text and filled buttons.

--color-accent

#ddf785. Savings labels and highlights.

--color-accent-text

#52692f. Accent text on the hero.

Supporting copy. Primary body text uses the brand teal.

--color-light

#596b65. Supporting and secondary copy.

Page and container fills, lightest to selected.

--color-background

#f8f8f0. Page background.

--color-surface

#fffef9. Cards, inputs and menus.

--color-soft

#eaf0df. Selected choice cards and banners.

Hairline rules and dividers.

--color-border

#cbd4c5. Hairline rules and dividers.

State colours for interactive elements.

--color-hover

#19565c. Primary button hover.

The dark, inverted membership card.

--color-inverse-light

#b4c7c4. Light copy on member cards.

--color-inverse-border

#527475. Rules on member cards.

Errors, error panels and dialog overlays.

--color-error

#a12622. Errors and invalid fields.

--color-error-surface

#fff0ed. Error panels.

--color-backdrop

#052a32b3. Dialog overlay.