Foundation File and Primitive Colours Set

This Foundation file contains the basic colours referred to as Primitives.

These colors are created on the base colours from the brand guidelines and then have additional tones created from their weighted variations from light to dark. Some base colours are quite dark, affecting their lighter and darker shades.

Using this, and good practices of creating color sets for both Light and Dark Theme, it became incredibly efficient to create and control colors over dark and light modes by just setting up the modes in the Figma variable system.

Full Primitive color set

It is important to note that these colours are foundational and should not be directly altered/recreated in any other library, design file or prototype - even in the code base. 

These should be the only ~135 colors used through out the whole app eliminating anomalies, extending the communication between designer and developer, and mitigating stray hex values coded in line or otherwise.

To see more about this part of creating A Design System go to - https://www.behance.net/gallery/201425731/Klar-Figma-Design-System-Variable-Colors-Case-Study