When Brad Frost released his article “a global design system” a few weeks ago, it reignited a thought I’ve been having for a long time. Building design systems has somehow become similar to building websites before the era of design systems: Reinventing the wheel over and over again. But does it have to be that way, or are we ready for the next step of web design evolution?
What finally drove me to write this article was Chris Coyier’s perspective on a Global Design System who asked himself lot’s of good questions about how a Global Design System could/would work at scale.
For example:
If there was a perfect component that solved the needs of a ton of people in certain situations… wouldn’t we already be using it because the incentive is there?
Perfect components have to become part of the platform. The best examples are <details> + <summary> and <dialog>. Why stop there? We could have <combobox> component, a <card> and a <floatingTextThatChangesWhenScrollingAfterClickingAButton> component if they were useful and their adoption was substantial.
It seems like the intention here is explicitly not to be HTML, but a layer on top of HTML.
I see no reason for it to be so: Platform, platform & platform!
Unfortunately the browser default styles for most of the native HTML elements look like they are from another century. And that’s because most of them are. If they’d have a good and customizable design with accessibility in mind. Why t.f. not?
Unstyled was called out as a requirement of this, because it needs to work for any organization. Coming pre-styled will clash with too many brands and put it in conflict with the goal of being as close to universally useful as possible. But many people pick a design system because of the design it offers, and would be un-interested in an unstyled system. Would themes account for this entirely? Unstyled is another door for accessibility problems, since so many are caused by CSS.
If you ask me, it should not be unstyled, but offer a variety of variables that make customization nice and easy. Like Bootstrap does it.
Let’s say you have a set of components that are perfect, like a very flexible grid, a good looking accordion and a dialog.
How much flexibility would you gain by making decisions on elements like typeface, spacing, rounded corners, and colors? I think changing a few variables would make lots and lots of different designs possible with only little compromise on the design side of things. It would provide sufficient individuality for most modern sites. Let the artists still be the artists.
A global design system would provide everyone with the tools to create good, accessible websites and code. Amen.
…and I am an Specialist for Web Accessibility and UX-Engineer with over 20 years of experience, by day and a podcaster by night.
I help organizations build accessible websites by offering talks about accessibility, workshops & trainings, accessibility reviews and developing strategies for developers and management.
If that sounds like you could use my help, let’s talk! 💬