A practical example

Nathan Curtis, a very prominent speaker within design systems, has a great blog post titled "And you thought buttons were easy." I'd like to share some of his insight with you today, because I think it will really drive the point home.

We're all familiar with buttons. They're not too hard to make, right? As engineers we can sometimes forget how complex a comprehensive button component truly is from its birth within the design process all the way to its coming of age within quality assurance.

Padding, margin, border radius, background color, font size, font family, color, and font weight. These are all factors that go into building a button. And since button elements are one of the most frequently used elements throughout a web application, they can truly impact your brand identity.

But we're not finished yet. We can't just worry about the physical properties of a button in its neutral state. We have to make considerations for hover, focus, active, and disabled states.

Web applications aren't typically built with just one type of button. So we need more than just a primary button. We also need secondary and tertiary buttons.

And we can't forget about icons! We need primary, secondary, and tertiary buttons with icons and text, as well as without text.

We also can't forget about light and dark themes. Many enterprise products will have a variation on color palette, so our buttons must work across all themes.

OH, and we may need different sized buttons!

And now, we're finally complete. At least we're complete with the design.

Let's now associate some numbers with this whole process.

Suppose we have a designer, engineer, and quality assurance engineer working to design, build, and test these buttons.

Averaging each team member at a cost of about $100 per hour, and assuming they spend about 200 hours on the entirety of this process, which is only about 66.6 hours of work per team member, or just over a week and a half, this totals a cost of $20,000.

$20,000 to create buttons.

And that's just one team creating this library.

If your enterprise company has 50 teams each designing, building, and testing buttons, that's a grand total of $1 million you're spending on buttons.

And since they're all being built by different teams, you can bet that the quality will vary with each version.

This is why you need a design system.

Let's break down the three pillars of design systems. We'll start with the design language.