| Theming vocabulary is a mess. "Theme", "mode", "scheme", and "palette" are used interchangeably even though they describe completely different layers of abstraction. My mental model is as follows: - Palette: All primitive color values. - Luminance mode: light and dark modes (what CSS and operating systems call "color scheme"). - Contrast mode: Default and high-contrast modes. - Color Theme: The named aesthetic identity like "espresso", "summer"... expressed as palette values mapped to semantic roles (surface, primary, text…), defined for each luminance × contrast combination. For example, a website might have: - 3 color themes: "monochrome", "espresso", "summer". - Each color theme might support luminance modes, like "espresso-light" and "espresso-dark". - Each luminance mode might support contrast modes as well, "espresso-dark-default" and "espresso-dark-high-contrast". - Palette is all the values that "espresso" color theme consists of including luminance and contrast mode values. The combinatorial complexity might look scary but most products only need a slice of it: two luminance modes, no contrast modes, one color theme. |