[krsdcbl]

This is one of my main topics when integrating design systems for UI concerns, and imho this site does well at demonstrating a central problem and misunderstanding:

The author talking about "4 colors", when really he means 4 "color roles" or "theming swatches".

First of all, 4 don't cut it.

You'll need accents for all of them, to fade sidenotes, visual hierarchy and disabled elements; to differentiate states of interactive; for borders, separators, and other parts of the chrome, and visual distinction of illustrative elements like icons; to give just a few samples ..

But the shortcomings of building a design system on 3 swatches for "text, bg, button" will become obvious much sooner, since defining which of the text/bg colors works for the button text depends on the button color itself, etc.

What most frameworks, complex and simplistic alike, get wrong imho, is that you need TWO "layers" of color definition, not to cram your palette definition into semantic concerns of the ui to be decorated. Those are separate concerns!

Or better said: the purpose of design tokens is not to be an abstraction for css properties of distinctive components.

- One Layer is your brand definition, or the color palettes that will serve to define the GUIs design. These are your design tokens

- The other layer is a semantic abstraction of the requirements in the design context. These are your "text, bg, button text, button bg, ..."

The library of design tokens need to acommodate ANY context the brand design could be applied to, and thus provide a wide range of shades for whatever amount of base colors want to use in the brand design.

These will then be mapped to the second layer of "roles", and populate whatever distinct use cases in the design.

TLDR: there is no "text, bg, highlight" color. There are "primary, secondary, accent, neutral, ..." color palettes, and "copy text, copy bg, button text, button icon, button bg, hovered button, .." swatches to be populated with them.

[lelanthran]

Where can I read more about this? I ask because I'm not sure that I sufficiently understand well enough to implement the dual-layer approach.[1]

I get that there's "brand" colors and "role" colors.[2]

Naively, I would make a set of `--brand-*` colors consisting of actual color literals (RGB, HSL, whatever) for `--brand-primary-...`, `--brand-secondary-...`, etc.

I would then make a set of `--role-*` colors that is defined exclusively in terms of `var(--brand-...)`.

If an implementation like this is in line with what you are saying, where would I find an example list of "brand" colors (primary, secondary, accent, etc) and "role" colors (copy-text, copy-bg, button-..., etc) to use?

[1] Not because your explanation was not sufficient, but because I am not a UI designer at all.

[2] Maybe not just colors. Border radii could be part of the branding as well. Box-shadows (or lack thereof) could, too. Maybe minimum padding between border and content, margins between elements, etc.

[nottorp]

As long as there is no contrast or it's made unreadable in some other way :)