Design systems

While a design system might sound like something only big companies need, it isn’t. Any business with a website or other digital presence van benefit from having one. Even a simple design system will make your website more professional and easier to maintain.

Across the board, user’s notice and can be greatly impacted by consistency—even if they’re not consciously aware of it. A lack of consistency across your brand can damage trust and negatively impact your conversions and retention. The best way to establish consistency across your website is through a design system.

What a design system actually is

If you’ve already invested in a brand identity you may assume you already have this covered. While there can be overlap between brand identities and design systems, their function is distinctly unique.

Your brand identity likely defines things such as, but not limited to:

• Your logo, it’s acceptable variations, and how it should be used.
• The colors that define your brand and rules regarding how they may be combined or paired together.
• Other stylistic and design elements like iconography, photography styles, etc.

A brand identity falls short in defining how that brand is implemented across a full digital ecosystem. This is where a design system takes over.

A design system typically provides explicit definitions for how your brand should be rendered across the individual components of a website such as buttons, links, web-based typography, navigation elements, interactive states, and more. While a design system can get very granular its function is to ensure that, for example, every time a button appears on your website it’s the same size, color, font, weight, etc—and there’s never a question of what those definitions are supposed to be.

Core components of a design system

• Color palette: Built upon the palette defined in your brand identity, the design system color palette should identify the specific colors used, and their roles, within the context of your website. A design system color palette should identify accessible color pairings and deliniate between your brand colors vs. more system-level values that would be used for things link errors, confirmations, alerts, etc.
• Typography: Expanding on the font family’s defined in the brand identity, the design system should define how font’s are used across the website. This may include defining which font family is used in headings vs. body copy; and defining a hierarchal scale of font-sizes and weights that are available.
• Buttons, links, and actions: The design system should define what these elements look like, how they behave, and how they transform when interacted with. A design system should define the different variations of these items—such as primary vs. secondary buttons—and set rules that make it clear how and when to use them.
• Spacing and layout: Defining values for consistent padding, margins, and the maximum width of content on a website ensures it will have a consistent structure.

What happens without a design system?

Without a clear and easily reviewable source for documenting the design “rules” of your unique site you’ll wind up re-defining these components every time you add new content or update the site. Without a design system, if you have multiple people working on one site they’ll be free to make decisions based on their own personal preferences, instead of brand defined rules.

Without a design system, it’s likely that you’ll start to see that pages built or updated at different times look disconnected; they may even feel as if they belong on different websites. When your components change across your website—headings are one font on some pages but different fonts on others—without any consistency or intentionality, the inconsistencies indicate a lack of attention to detail. Your visitors will notice and may begin to doubt the professionalism, trustworthiness, or seriousness of your business because of it.

As a bonus, having a design system will make it faster and easier to maintain and expand your website later on. Every new addition to your site requires decisions that should have already been made and documented in your design system—allowing you to save the time that would have been sent remaking those decisions, or trying to figure out what you’ve done previously each time.

Common misconceptions

Myth: If you already have a brand guide you’re already covered.

Reality: A brand guide covers broader definitions and should set the visual and linguistic tone of your brand. A design system is is what governs how those standards are actually applied across every element of your website.

Myth: Design systems are only relevant for large teams.

Reality: Even a solo, small business owner, will benefit from having documented rules to follow when updating their website.

Myth: Our website builder handles this automatically

Reality: Most web builders provide a starting point to define some global styles across website elements, but customizations and point-of-use overrides made over time can drift from that baseline unless you define intentional standards.

Where to start

While a professional with design systems experience can be a great resource in properly defining your standards the following items are things you can easily do yourself. These actions will help you start making design system decisions; improving your website’s consistency, and becoming more intetional about your design decisions.

1. Document what already exists: Open your website and take note of every color, font, and button style currently in use. Dropping screen shots into a white-boarding tool to annotate these different values is a great way to keep track.
2. Identify inconsistencies: They might be pretty obvious, but keep an eye for things like inconsistent colors, changing fonts, and shifting font sizes.
3. Make decisions and write them down: Go through the varied elements and style inconsistencies you’ve documented and start deciding which instances should be the “correct” ones. Record these decisions so you can begin to know explicitly what your primary color vs. secondary color, heading font vs. paragraph font, and button vs. link styles are.

Use the resulting document as your initial design system, and make sure to reference it every time you update the site. If you use a website builder it likely has a global style or brand settings panel in which may be able to define some of these basic style decisions for the site as a whole.