Colour Systems That Scale and Comply

Colour is the fastest way to break an interface — and the fastest way to fix one. This session turns colour from a mood choice into a system: a small, named palette with contrast baked in, so nobody has to rediscover the rules every sprint.

We build a palette live, starting from a single hue and deriving a neutral scale plus semantic roles: background, surface, text, accent, and feedback. Along the way we check every step against WCAG contrast, including the dark-mode variant and the edge cases (disabled states, hover, focus rings) that audits love to catch.

You will leave with a token table you can paste into your design tool or repository, and a set of rules for the one thing that always breaks: “just add one more colour for this one feature.”

Key Takeaways

• Deriving a neutral and semantic palette from one hue
• Contrast-checking every role, including dark mode
• Naming colour tokens by role, not by value
• Rules for resisting palette creep