Colour is a foundational part of Prism’s visual language. It communicates brand, sets tone, creates hierarchy, and guides user attention. Our colour system is designed to be accessible, flexible, and scalable.
Principles
Use intentionally
The EcoOnline UI adopts a monochromatic colour scheme, intentionally creating a neutral backdrop. Elements that incorporate colour gain heightened visual impact and prominence. By using colour purposefully, the users' focus is directed towards crucial information, actions, and visual cues.
Colour needs to support a message or status that needs to be easily identifiable by users. For instance, red signifies errors or severe impact, green represents success messages or low impact, and blue is used to draw attention to primary actions or selected items.
Utilize color tokens
Prism provides a collection of tokens, curated from a core colour palette, designed around clear, purposeful roles. These roles are applied consistently across components — including text, buttons, status indicators, and navigation — to help users quickly recognise elements and understand their function within the interface.
Make it accessible
Colour in context of accessibility ensures that our products are usable for people with visual impairments and improves legibility for all users. We aim to comply with WCAG AA standard contrast ratios:
- Must pass 4.5:1: Text smaller than 24px (WCAG 1.4.3)
- Must pass 3:1 contrast: Any UI essential to understanding the experience and text 24px or larger (WCAG 1.4.11)
- Try not to solely rely on colour — e.g. pair icons with descriptive text where ever possible.