Colors

The color palette is a key element of the design system. It is used to create a visual hierarchy, establish a brand identity, and ensure accessibility. The color palette consists of a set of named colors that are used consistently across the designs. Doing so also enables the possibility to create different themes for the Codey Library. This helps in serving not only Xerius but also My Family and other clients. The introduction of a dark mode is also possible 😉.

To achieve this the colors are setup as the diagram shows below:

There is clear distinction between Primitive Colors and the Theme Colors & Semantic Tokens. The color pallet where all used colors are defined can be found in the Primitive Colors section. As this holds absolute color names, it is hard to change or apply theming (e.g. what clear orange mean in a dark theme?). To solve this, the Theme Colors & Semantic Tokens are defined as a reference to the Primitive Colors. This way, the Theme Colors & Semantic Tokens can be changed to apply a different theme.

Therefor Primitive Colors are solely managed by our designers and used to create the Theme Colors & Semantic Tokens.

To allow easy utilization of the Theme Colors & Semantic Tokens we provide them through tailwind. for example, to set the text color of an element to the Brand color, you can use text-brand.

Figma Design File

The design file can be consulted here