Design Systems

I just finished listening to the Syntax. podcast on Design Systems (Episode 56). It really has me fired up because at work we really have a mess when it comes to our brands. I work for a Pet Insurance company and we help support 9 different brands with 2 of those being in-house. There’s no real standard for each so we have customer facing applications that have no consistency within a given brand and our communications touch-points with customers lack consistency. I think there’s a chance that building a Design System for all out brands would greatly improve both of these areas. This will create a single source of truth for how a site or application or letter or email should look and what the tone should be.

But what is a Design System? In it’s simplest form it’s a inventory of everything about your brand(s) - colors, fonts, buttons, logos, etc. Using this inventory you can then apply the same look and feel across all your properties. This makes it easy for your customers to navigate your sites as they have a consistent feel but also allows developers to build things faster. They can grab components to build up new apps! For example Storybook supports Angular, React and Vue to do exactly this.

If you want to learn more about Design Systems here are a few of the resources that I found to be the most helpful:

• Design Systems Repo has an amazing collection of information on tools, articles, books and talks
• Atomic Design by Brad Frost is a great read and gives you a really clear explanation of what Design Systems are and how he creates them using his Atomic Design method. Pattern Lab is a design system tool that uses this method
• Atlassian Design is the design system for Atlassian makers of Jira, Confluence and BitBucket. It’s a really well designed site,easy to navigate, and shows you the tremendous value of having a design system that everyone can work from.