Identity

Colour

The plum ground, the two accents, and when each one applies.

The palette alternates. A plum section, then a cream one, then plum again. That rhythm is the layout system as much as the colour system: it gives a long page a pulse without needing a single divider.

Everything below is shown at the size you will actually use it, with real type on it. If a combination appears here, it has been measured.

One accent, two cuts. Which one you use is decided by the surface underneath, never by preference.

Why there are two mauves

Mauve is the colour people recognise, and it only works on dark. On cream it measures 2.11:1 — far below the 4.5:1 that body text needs, and low enough that the text is genuinely hard to see rather than just low-contrast.

Deep Mauve is the same role, redrawn for light surfaces at 7.22:1. They are two cuts of one accent, not two colours, which is why they are never used together.

Text

Three text colours, chosen by the surface rather than by hierarchy.

Rules

Do: Alternate dark and light sections down a page. It is the rhythm the brand is built on.

Do: Use Mauve #cca4c2 on plum and any dark section — hero, benefits, closing banner.

Do: Use Deep Mauve #6d4a66 on cream, white, and any light-tinted panel.

Do: Keep cream warm. #fffbf5, never pure white.

Do not: Do not put Mauve on a light background. It measures 2.11:1 and fails badly.

Do not: Do not put cream or white text on a mauve fill. Text on mauve is plum.

Do not: Do not introduce a colour outside this page, including tints of these.

Do not: Do not use Sand as body text on light. It is a dark-surface accent.

In code

The two cuts are separate Tailwind tokens on purpose: text-brand-accent and text-brand-accent-on-light. If you find yourself reaching for an opacity to make Mauve work on cream, you want the other token.