Design/Color scheme

Colors

The color scheme and every color token, light and dark, with contrast computed from the tokens.

Color scheme

The brand color and its companions; why these.

Scheme B of three, chosen at the gate (SC-002). Every value is a token in tokens.css.

B · Selected

Atelier Green & Brass

The deep green of a workshop bench and a leather watch box, brass fittings, an ivory dial.

Why this one

  • Watchmaking heritage: it belongs to the typical item, a pre-owned watch, without borrowing any maison’s colors.
  • Premium and calm, as the brief asks (SC-013): green and ivory read as trust; brass is kept for what is proven.
  • “Passed” is teal, not green, so a status never reads as the brand.
  • In dark, the main button turns ivory and the green moves into the soft tints, so contrast holds.

The brand color and its companions

The alternatives

Shown at the gate beside B and not chosen; the Decisions page keeps the reasons.

A — Noir & Gilt

Alternative

Near-black ink, warm paper, a hairline of gilt: the language of the great maisons. Nothing competes with the photograph; the gold appears only where something is proven.

C — Bordeaux & Cream

Alternative

The warmth of a velvet-lined case and a wax seal: deep bordeaux, cream, old gold. The most expressive of the three — confident and fashion-leaning.

Why B: Decisions, SC-002 and SC-013 →

Palette

Surfaces, text, borders, brand, feedback; light and dark.

The swatches show the theme on screen and their values are read from the tokens; switch the theme in the top bar to see the other.

Surfaces

What everything sits on, from the page up.

Text

Three levels of ink and the ink on an inverted surface.

Borders and focus

Borders separate; the ring shows where the keyboard is.

Brand

The green in light; in dark the fill turns ivory and the green stays in the tints.

Accent

Brass, and the tint the certificate sits on.

Feedback

Four tones, each a solid, the ink on it, a tint and the ink on the tint.

SuccessPassed
WarningIn authentication
DangerFailed
InfoAt hub

Categories

The colors that tell the domain’s categories apart.

Placeholders: the client has not named the categories yet (Q-010). Tokens --color-category-1…3.

Watches
Handbags
Fine jewellery

A category color is a dot beside the category’s name, or a bar in a report — never text and never a fill behind text. They stay away from the brand and the feedback tones, so a category never reads as a state.

Contrast

Every text pair, both themes, against WCAG AA.

Every pair of ink and ground the product uses, computed from the tokens in the browser against WCAG AA: 4.5 : 1 for text, 3 : 1 for large text, focus rings and graphics. The ratios follow the theme switch.

SamplePairTokensRatioWCAG AA
Text on the surfaces
Brand and accent
Feedback
Large text and graphics (3 : 1)