Colours and branding

The interface is white, grey and black plus exactly one accent colour. That accent is a single environment variable.

NUXT_PUBLIC_COLOR_PRIMARY="#CC0030"       # light mode
NUXT_PUBLIC_COLOR_PRIMARY_DARK="#DE0F3B"  # dark mode

Quote the hex values

An unquoted # starts a comment in a .env file, so

NUXT_PUBLIC_COLOR_PRIMARY=#CC0030

parses as an empty value, and the app falls back to its built-in default. The result looks perfectly fine, which is exactly what makes it easy to miss. Writing the hex without the # works too.

What one variable changes

A full 50–950 ramp is derived from each hex at runtime in OKLCH, so one value themes buttons, links, focus rings, alerts, the logo, the favicon and the e-mail templates together.

The ramp is generated rather than picked, and it stays ordered whatever you configure — a colour much darker than the step it anchors to stretches the ramp around it rather than producing a hover state lighter than its resting state.

Nuxt UI's semantic colours — success, warning, error, info — are all mapped onto the same accent. That is what keeps a validation error from introducing a second colour, and, as a consequence, makes success states the accent too. Success and failure are told apart by icon and wording instead: a check on a quiet neutral toast, an alert triangle on an accent one.

Neutrals

NUXT_PUBLIC_COLOR_NEUTRAL="#71717A"

Themes the grey ramp used for borders, muted text and hover fills. Its chroma is clamped, so a saturated value there is desaturated rather than becoming a second accent by the back door.

The surfaces themselves are fixed rather than derived: #f5f5f7 page and #ffffff tiles in light, #1c1c1e and #2c2c2e in dark.

Backgrounds

NUXT_PUBLIC_BACKGROUND_IMAGE=/background.jpg
NUXT_PUBLIC_BACKGROUND_LINK=https://example.com
NUXT_PUBLIC_BACKGROUND_CREDIT=Photo: A Photographer

Shown behind the sign-in screen, the composer and any download page without its own image. The link and credit are for attributing a photographer, and apply only to the instance default — a sender's own background carries no attribution because it is not the photographer's.