Architect layer
Design
The name, addresses, meta and appearance of this project. Saved settings are read at runtime — a change shows on the next page load, with no rebuild.
Colours
Seven roles in two themes, with a live contrast check.
Seven roles, two themes. Each colour is an override: leave it untouched and the project theme decides.
Ready-made schemes
One press sets all seven roles in both themes. Adjust anything afterwards — the change stays; press the same scheme again and its values come back.
Brand colour
Buttons, links, active states. The one colour a visitor will remember.
Accent
Highlights and hovers — a quieter relative of the brand colour.
Page background
What everything else sits on.
Text
The main reading colour.
Muted surface
Cards, panels, the background of secondary blocks.
Borders
Lines between elements — the quietest colour on the page.
Danger
Deletion, errors, anything irreversible.
Chart series 1
The first data series on a chart — and the only colour when a chart has one series.
Chart series 2
The second series. It is read right next to the first, so it has to differ at a glance.
Chart series 3
The third series, for charts that compare more than a pair.
Chart series 4
The fourth series. Pie and radial charts use all five.
Chart series 5
The fifth and last: more than five colours nobody tells apart anyway.
Warning
«It did not work out» — a notice, not a failure. Deliberately not the colour of deletion: it says try again, not something broke.
Recording
The colour of the voice field while it listens. It is a state, not an error.
Preview
A heading on the page
And the body text under it, in the colour people will actually read.
A buttonReadable · 17.9:1
Text against the page background. Below 4.5 the text fails the accessibility threshold for normal sizes.
How colours reach the site, and what is computed for you
The text on a button is computed, not asked for. Every coloured role has a paired text colour on top of it. Change the brand colour and leave the pair alone, and a light brand colour keeps white text — a button whose label cannot be seen. The application derives that pair from the brightness of your colour, so the label stays readable whatever you pick.
Light and dark are separate values. A colour set once is almost always wrong on the other theme: dark text on a dark background disappears entirely. Set only the theme you care about — the other keeps the project's.
The contrast figure is a measurement, not an opinion. It is the ratio between text and background as the accessibility standard defines it. 4.5 is the threshold for normal text, 3.0 for large. Below that the page is not 'a matter of taste' — part of your visitors cannot read it.