1 · Brand colours
Steel is the backbone: the sidebar, dark panels, buttons and the cube. Teal is the highlight, used sparingly for what's active, focused or Ovi.
2 · Interface roles
Use these names in code, never raw hex. The badge shows text contrast (AA = readable body text at 4.5:1 or more).
3 · Highlights, status and labels
Status colours mean one thing each and always come with a word or icon. They're never used as chart series.
4 · In use
5 · Charts · steel + teal focus
Most charts are steel. Teal picks out the one thing that matters: this month, the target, the winner, your showroom. When a chart has to compare things, it uses at most three series: slate blue, bronze and teal, in that order. All sets pass the colour-blind checks.
More than three? Fold the rest into "Other" or split the chart. Only in the rare case that can't be done, use the extended six:
Steel from light to dark. Teal can mark the one stage to look at.
6 · Rules
- One dark surface: the sidebar (and Ovi). Pages stay light grey with white cards.
- Teal is a highlight, never a big fill. It marks what's active or focused, and Ovi. When text needs to be teal, use teal 700.
- Primary buttons are steel 950. Won is green and Lost is red, because those carry meaning.
- Status colours are only ever used for status, always with a word or icon.
- Charts: steel for context, teal for the one thing that matters, with its value labelled. Three series at most (slate blue, bronze, teal).
- The Solar House theme stays available. Every colour goes through these role names, so changing theme changes everything at once.