Skip to main content

Theme

The System Admin Theme tab changes Navaid’s platform-wide accent colour. It generates a tonal scale used by teal-accented links, focus states, secondary controls and informational UI.

It is not a complete white-label system. Navaid’s fixed primary CTA treatment and maturity-level colours remain unchanged.

Access​

Only System Admins can open System Admin → Theme or save the global theme.

Choose an accent​

You can choose a colour in three ways:

  1. use the browser colour picker;
  2. enter a valid six-digit hexadecimal colour;
  3. select a preset.

The current presets are single accent colours, including teal and alternative brand-friendly hues. There is no multi-colour legacy-brand preset.

Generated shade scale​

Navaid derives a light-to-dark teal accent scale from the selected base. The preview shows how the values work across:

  • secondary buttons and controls;
  • links;
  • information boxes;
  • focus and selected states;
  • supporting UI elements.

Review both light and dark shades. A base colour that looks attractive on its own can generate a weak focus ring or low-contrast text treatment.

What does not change​

Saving an accent does not replace:

  • the fixed Navaid primary button colour;
  • maturity levels 1–5 and their semantic colours;
  • risk/success/warning colours;
  • company logos;
  • the core page background and typography system;
  • the Docusaurus documentation site branding.

The Theme tab should therefore be described as accent customisation, not a complete visual-identity editor.

Preview and save​

  1. Open System Admin → Theme.
  2. Record the current hex value.
  3. choose a preset or enter a new colour;
  4. inspect the full generated shade scale;
  5. check buttons, links and information-box examples;
  6. assess contrast, focus visibility and colour meaning;
  7. select Save Theme.

The saved theme applies globally. Open clients may need a refresh before every element reflects the new accent.

Accessibility checklist​

Before saving:

  • ensure link text remains distinguishable from surrounding copy;
  • check keyboard focus states on white and cream backgrounds;
  • do not rely on colour alone to communicate status;
  • avoid extremely pale bases that weaken controls;
  • avoid very saturated bases that make large surfaces distracting;
  • test representative mobile and desktop pages.

Maturity colours are intentionally fixed so their meaning remains consistent.

Company identity​

Company-specific identity is separate. Company Admins and Consultants can upload a company logo from Company → Settings. The platform accent remains global and does not vary by selected company.

Restore the Navaid accent​

If an experiment is unsuccessful:

  1. return to System Admin → Theme;
  2. enter Navaid Deep Teal, #2C615F;
  3. review the generated scale;
  4. save;
  5. refresh a representative user page.

Troubleshooting​

The primary button did not change​

That is expected. Primary CTA colours are fixed Navaid brand tokens; the Theme tab changes the teal accent scale.

Maturity colours did not change​

That is expected. Maturity levels use fixed semantic colours so scores remain recognisable.

Some open pages still use the old accent​

Refresh them. Theme data loads at application startup, although some controls may update sooner.

The hex value is rejected​

Use a complete six-digit value such as #2C615F. Avoid shorthand, alpha values or non-hex colour syntax.

Last updated on