New Colour Tokens Testing & Refinements in Design System
This process organizes design themes into a cohesive color palette, ensuring visual consistency and alignment with branding, accessibility, and UI standards across the product.
Colour theme rectification using Color tokens and Variables in Design System.
Figma
Confluence
What is Colour Token?
Color tokens allow a designer or developer an understanding of how or when to apply our palette and what options are available. They are used to bridge the gap between naming and use.
How Others are Doing?

We started with creating a style guide for the system. Luckily for us this one had already been done. All we needed to do was implement any new changes or elements to the system and link the existing style guide.

After analysing few of the established design systems we understood that most of them are doing categorisation in terms of colour/modes/colour identities as Per their requirements.

Thus we started understanding Etta requirements of colours first to how its made and how we can make it efficient than now.

Overview of Existing Theming Engine.
How existing colour tokens works
  • Existing theming engine contains all the colours with respective token names and colour codes
  • We have defined colours for the light mode active in this engine
  • This Figma version replicates same in the zero height and story book as well
Here’s where it seems to be veering off course.
  • Things which makes us thinking of discovering new approach to make it better
  • Deem colour tokens are not according to the guidelines which determines its naming and use.
  • Colours doesn’t have any differentiation of background and foregrounds thus it results in failing of adaption to other modes
Thus, We came up with the new approach for colour tokens which make it Adaptable.
How We Picked Our Colours?
We have expanded our colours into spectrum and from there we picked the colours and those have become tokens
What Difference it Makes in Design System.
Our pictogram and icon style takes visual queues established in the design of both the brand wordmarks. These revolve around curves and directional arrows. The pictogram style has been designed to be scalable at all levels, from a marketing illustration all the way down to UI icons.
Old Colour Tokens
  • Branding and colour contrast
  • Token naming
  • Background and foreground differentiation
  • Multiple colour modes support
  • Subtle, overlay colours support
New Colour Tokens
  • Branding and colour contrast
  • Token naming
  • Background and foreground differentiation
  • Multiple colour modes support
  • Subtle, overlay colours support
Observable Change in the Colour Tokens in Designs.
Adaption of background and foreground in the designs by applying foreground colour tokens to the elements of the screen and background colour to styling the background of the screen
How New Colour Tokens Impacts Etta.
Color tokens names will change as per the new colour token names and also connected with variables
  • Let's Work Together
Download Resume
Designed with ♥ by Bikshapati Chenamoni
error: Content is protected !!
Download Resume