| 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. |