Behavioural consistency is the bigger win for design systems
I often get met with confused frustration when I say this in a room of designers, but I believe the absolute biggest win for design system consistency is behavioural, not visual. It’s where we offer the most value to customers.
When I say behavioural, I am bundling a few things together.
On a component level:
- Semantic structure
- Technical UI implementation
- Accessibility
- Hierarchical variations
On a system wide level:
- Approach to form validation and error handling
- Focus handling
- Patterns for common interactions
You get the gist. Anything that affects how an end user interacts with the thing.
Oh Buttons, not more buttons
Looking at these Buttons, with the source Design System button on the left which one do you think Is following the Design System more closely A or B?
Of course it’s a trick question, I’ve given you no indication of anything but visual but you know I’m going to choose A right? Otherwise why am I writing this blog?
Let me give you a little more non-visual information.
Button A — Behind the curtain
- Uses the correct html
<button>element - Has a border — yep your button should have a border even if it’s the same colour as the background
- Has a focus state with over 3:1 contrast
- Has the same hierarchical emphasis as the source button
- Doesn’t meet the visual design language
Button B — Behind the curtain
- Is a f’in
<div>mate - Has no border — It’s solid, why does it need a border?
- Has removed the “ugly focus ring” with
outline: none; - Looks the same as the design system — what a win!
The effect on real people
The effect on customers or end users of these two buttons is dramatic, one is usable but looks off brand. The other looks right but is a pile of steaming poo and a genuine blocker for a lot of people to use.
It’s literally no competition.
Changing perceptions of being “on brand”
Still, on the brink of 2025 “using the design system” is synonymous with just making something look on brand. In many organisations when they can’t use the full system (both in design and code — hey it happens, even if you’re in a technical monoculture hellscape) you still hear about “using the design system to skin this UI” or “We’ll update the CSS to match the guidelines”.
Well guess what, the Design System is the structure, the Design System is the behaviour. The Design System is the guidance. That’s like, the main thing we do.
I don’t know about you, but I’d prefer someone “used the code only” or “used the design system to change the underlying structure of the experience” than simply camouflage bad implementations with visually almost correct UI.
But of course, it is absolutely no debate that visual cohesion would be very nice too ;) — This of course goes without saying, despite the fact I just said it.
So much of Design System design is the stuff you do before any theming is applied.
