اللون هو أداة التواصل البصرية الأكثر أهمية لدينا. نستخدمه لتعزيز الفهم، لنقل الوظيفة وتوجيه الانتباه.
Tokens
Label
Background
Accent
We define our colour palette as design tokens, made up of core tokens, which simply describe the colour, such as blue-500, and applied tokens, which are applied 'semantically' to a specific purpose, such as background-primary.
This approach gives us far greater flexibility to control specific use cases and themes like light and dark mode. For instance, labelling a colour simply white causes conflicts, because white is the background colour in light mode and the label colour in dark mode.
We currently handoff our styles using Tokens Studio, which handles the reference links between applied and core tokens. You can see the code below for our light/label tokens, and how they reference the core token value such as {core.neutral.800}
We are able to change any token here, push it across all our Figma files, and push it to Github where the developer can accept the change across all our coded products.
This also means that semantic theming (light → dark mode) is handled by default, and the design files are precisely aligned with how it's implemented in the code.
Setting up effective product colours goes a long way, but the way we use those colours has a great impact whether our brand values are felt by the user as intended.
Colours are functional
Product design is not graphic design – our app is not a poster. It's paramount that we use colour only to assist understanding, otherwise we risk confusing the user about the function of interface elements.
Our website and marketing materials can be a place for broader experimentation in colour, but any products used as tools to get a task done are strictly functional.
Always accessible
We hold our colours to WAG standard rating AA or higher. Contrast ratios are tested so that our designs reflect our brand values of clarity and inclusivity – so that the experience feels like a breeze to any user.