Foundations
Colour
Kaptio Seagreen carries the system. Everything else earns its place by meaning: yellow converts, orange warns, green confirms, pink marks Edge. A colour with no job does not appear.
Brand palette
Teal is the system. The rest are accents with specific, narrow jobs.
Kaptio Seagreen — primary
The dominant colour. primary-400 is the interactive teal, primary-800is the deep-theme ground, and primary-600 is the darkest teal that still reads as brand rather than as ink.
Bumble-Me Yellow — call to action
Reserved. See the yellow rule below.
Fandango Pink — the dot, and Edge
Puffin Beak Orange
Poison Green
Blue and purple
Supporting hues for information states, product accents and data series. Neither is a brand colour, and neither should carry a page.
Neutrals
The 2.0 ramp
New in 2.0. An even, cool ramp with a faint teal cast, added because the dark theme needs consistent steps to build elevation from. canvas is the Kaptio page ground and carries the exact value Flux 1.x published as --flux-background.
Flux 1.x neutrals
Retained verbatim and permanently published. Their spacing is irregular by history rather than by design, which is why they cannot carry the layer model. Prefer the ramp above in new work.
Status
Four hues, each tuned so that its text form clears 4.5:1 on its own subtle surface.
--flux-text-error on--flux-surface-error-subtle — rather than composing your own from these primitives. The pairings are what the contrast audit verifies.Roles, not colours
These resolve differently in each theme. That is the point of them.
Switch the theme in the top bar and watch this table change without the page reloading.
Chart series
Four series and a comparison, each at 3:1 or better against every layer of its theme.
Use them in order, and chart-muted for the comparison, such as last year. They are graphic only and never carry text. See the Chartcomponent.
A Heatmap uses one sequential teal ramp, low to high. In dark and deep it runs dark to light, so a high value always stands out most from the page. Each step has its own text role, chart-sequential-text-1 to -5, for the value printed on it, audited at 4.5:1 in every theme.
Which colours may carry text
Most of the palette cannot. Treating a mid-tone as a text colour is the most common way Flux output goes wrong.
| Colour | As text | As a fill behind text | As a graphic |
|---|---|---|---|
| primary-600, primary-400 | Yes, on light grounds | Yes, with text-on-color | Yes |
| primary-300, primary-200 | Only on dark or deep grounds | Yes, with dark text | Yes |
| yellow-400 (CTA) | No | Yes, with text-on-cta (black) | Sparingly |
| yellow-800, orange-800, green-800 | Yes, on their own -100/-200 tints | No | Yes |
| yellow-900, blue-800 | Yes, on the documented -300/-200 badge tints | No | Yes |
| pink-400, orange-400, green-400 | No | Yes, with white text | Yes |
| neutral-300 and lighter | No | Yes, with text-primary | Yes |
--flux-pink-400 on white is 3.9:1 — it looks like brand and reads like a defect. If text must be coloured, use atext-* role.The yellow rule
Bumble-Me Yellow is the loudest thing in the system, so it gets the strictest rule.
One yellow element per view, and only for a conversion action — the thing you would count if you were measuring whether the page worked. A second yellow element halves the value of the first.
Yellow never carries white text. The pairing is--flux-surface-cta with --flux-text-on-cta, which is black.
<!-- One per view. -->
<button class="flux-button flux-button--cta">Talk to us</button>
<!-- Everything else on the same page. -->
<button class="flux-button">Save changes</button>
<button class="flux-button flux-button--secondary">Cancel</button>Do and don’t
Do
- Let teal carry the page, and let accents earn their appearance by meaning.
- Treat WCAG 2.2 AA as the floor: a text-* role on a documented ground, never a colour that looks dark enough.
- Use the semantic status pairings rather than composing your own.
- Keep product accents to graphic use — fills, marks, diagram keys.
- Check a colour decision against the theme switcher before shipping it.
Don’t
- Do not use a 400-weight accent as text on a light ground.
- Do not put more than one yellow element on a view.
- Do not introduce a hue that is not in the palette.
- Do not use colour as the only signal for a state.