CSS needs an Accent system color

There's a growing movement among designers and developers to create user-adaptive interfaces. If you haven't heard that term before, it's just a fancy way of saying that the interface is personalized to the user and that it will try to respect the preferences that the user has indicated in their operating system and/or browser.

A small but familiar example of this is using media queries to change the layout based on screen width. A more modern example is using the prefers-color-scheme query to set light or dark theme.

But those are just bits and pieces. For full-blown user-adaptive design, you can look at Material You.

"If done correctly, the user may never know that the interface has even adapted" - Adam Argyle on building user-adaptive interfaces.

Most interfaces that I build these days tend to be adaptive (to the best of my ability). Not only does this result in a better experience for the user, but it's also less mental overhead for me. Instead of picking a font, I can just use system-ui. Instead of finding the perfect button height that works for mobile and desktop, I can just adjust spacing based on the pointer media query.

There's also CSS system colors (e.g. Canvas, CanvasText) that can be used to theme parts of the UI without hardcoding a shade of black or white. Jim Nielson wrote about this last year.

But there is something missing.

Every modern interface needs some kind of accent color. Without one, your website would look very dull. Unless that is your brand and you know you can pull it off (looking at you, Heydon 👀).

CSS does have an accent-color property for changing the color of some native form controls, but you, the designer/developer, are still responsible for picking the actual color (on most platforms anyway). To me, this usually feels like an unnecessary decision that I would rather leave to the user. Many of my UIs fall under affirmative design, and I don't need a strong brand identity. I just want the user to feel at home.

All modern operating systems (except notably iOS) let you pick an accent color, which is then used throughout the OS in different places. macOS even uses it as the default accent-color of native browser controls and text selection. But that only goes so far, as there's no way to use that value to build a custom CSS component.

Which is why we need... 🥁 Accent. Or AccentText or AccentColor. The name doesn't matter. What's important is that this value is set by the user.

Combined with relative color syntax, this would open up so many possibilities. Imagine extracting a whole palette of colors from the user's preferred hue, and delivering a super polished interface using that.

:root {
  --accent: Accent; /* <-- I want this */
  --accent-1: hsl(from Accent h s 20%);
  --accent-2: hsl(from Accent h s 40%);
  --accent-3: hsl(from Accent h s 60%);
  --accent-4: hsl(from Accent h s 80%);
}