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. 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: 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.
A — Noir & Gilt
AlternativeNear-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
AlternativeThe 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.
- The brand fill marks one thing per screen: its main action, or what is selected.
- The photograph of the piece is the most colorful thing on a screen; the interface stays in ivory, white and green.
- Danger, warning, success and info speak only of a state; pending, failed and inconclusive never look positive.
- Brass is never text under 18 px and never an action.
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.
Panel, band and fields
Atelier: the brand panel of the signed-out screens (stone in light, green in dark), the header’s top band, a filled field.
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.
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.
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.
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.
| Sample | Pair | Tokens | Ratio | WCAG AA |
|---|
| Text on the surfaces |
|---|
|
|
|
|
|
|
|
|
|
|
| Brand and accent |
|---|
|
|
|
|
|
|
|
| Feedback |
|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Large text and graphics (3 : 1) |
|---|
|
|
|
|
|
|
|