Member-only story

Presentational colors

Design tokens for data visualization and more

Lukas Oppermann
UX Collective
9 min readJun 1, 2023
Cover illustration of two color collections

Presentational tokens bring the color into data visualisation¹ and customizable UI elements. They are the colors used for labels or folders and similar elements. What makes them specific in design token terms is, that they don’t have a semantic meaning. Unlike danger and success color tokens, presentational color tokens are used for anything.

However, unlike the base tokens in your color scales, presentational colors still change depending on the current theme. There may also be a need for a specific contrast between presentational colors. This makes them a specific edge case that sits between base tokens and semantic tokens².

What makes a presentational color?

Presentational colors are visually distinct. But they don’t have a specific meaning in the UI or company context.

They differentiate elements on a decorative level. For example, labels may use different colors to differentiate them better. This only works for people without cvd (color vision deficiency). In most cases, this is acceptable, as the color does not communicate any meaning. Users with cvd can still read the label text.

You should be able to exchange presentational colors without functionally affecting the UI. If…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Published in UX Collective

We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc

Written by Lukas Oppermann

Product designer with a love for complex problems & data. I post about Figma, design tokens, design systems & design related topics. https://lukasoppermann.com

No responses yet

What are your thoughts?