Know When To Draw The Line

One-off variations aren't uncommon, but they don't belong in your design system. You're design system isn't solving for every possible use case — it's encouraging visual consistency and efficient development. Use custom styles for one-offs.

This came up recently on my team.

We have a button component that supports prefix icons. By default, the icon color matches the text. In one design, the same button was used but the icon color was the primary color instead. The question came up:

"Should we make a new button variant?"

The answer, of course, was no. Because the button should only look like that in a specific toolbar, the solution was something like:

my-toolbar my-button::part(icon) {
  color: var(--primary);
}

Know when to draw the line.