Colour

Give Colour A Role

Prefer a small semantic palette with explicit jobs, such as brand or interactive, strong and supporting text, strong and subtle stroke, surfaces, and status colours.

Reuse project tokens. When new tokens are justified, name them by semantic role where practical rather than by an arbitrary visual name. A governed palette is more valuable than many nearly equivalent options.

Establish Hierarchy Without Brand Colour

Size, spacing, typography, grouping, position, and tonal contrast should establish the basic structure. Check whether the hierarchy still makes sense without accent colours before using colour to reinforce it.

Do not use colour to rescue weak information architecture.

Preserve Contrast

Meet the project's accessibility target, using current WCAG requirements as the baseline. Check text, icons, controls, borders needed to identify a component, focus indicators, and text over variable imagery.

Secondary content must remain readable. Use size, weight, spacing, and placement to lower emphasis instead of reducing contrast until content is difficult to perceive.

Protect text over imagery with a reliable overlay, gradient, container, or placement strategy. Do not depend on one favourable fixture image.

Never Rely On Colour Alone

Pair colour with text, iconography, underline, shape, border, position, or an explicit status label. Error, warning, success, selected, required, and interactive states must remain understandable when colour is not perceived.

Links and controls should be distinguishable from static content through more than hue when context does not make interactivity obvious.

Use Depth To Explain Structure

Use borders, surface shifts, and shadows to clarify grouping, containment, or elevation. Start with spacing and alignment; add a stronger treatment only when the relationship remains unclear.

Do not turn every region into an elevated card. If everything has depth, depth stops communicating hierarchy.

Treat States As A System

Default, hover, active, focus, selected, disabled, loading, error, and success treatments should remain related and distinguishable. Check that state changes preserve contrast and do not communicate solely through a subtle colour shift.

Focus is an interaction requirement, not decoration. Do not remove a visible focus indicator without replacing it with an equally clear one.

Adapt Dark Mode Semantically

Preserve semantic roles and relative hierarchy rather than mechanically inverting values. Recheck contrast, glare, borders, shadows, imagery, status meaning, and elevation on dark surfaces.

Avoid pure extremes when established tokens provide more comfortable contrast, but do not weaken legibility for atmosphere. Follow the product's existing theme system rather than creating a parallel palette in a component.