HOW-TOs

Guide #00B: How to build a Design System that scales across brands

Written by Jason Stevens | Jan 12, 2023 11:15:26 AM

Create a foundational source library

Set up your Design System with foundational source libraries that have generic elements upon which a theme (or style) can be applied to differentiate those elements across different brands.

Utilize style tokens as much as possible

Start by thinking about where you want brand differentiation – color, shape, type, etc. – and tokenize these attributes. Tokenizing attributes like stroke weight or shadows, instead of hard-coding them into individual components, can save time later and enable you to make changes at scale.

Establish a consistent meaning for your styles

Assign a consistent role for each of your styles. For example, if your primary color represents interactivity, this should remain consistent across all experiences. Assigning and maintaining consistent use of styling is critical for scaling a Design System: it allows you to identify styles that need to meet specific requirements and enables brands to choose others to differentiate without breaking elements or creating accessibility problems.

Establish a shared language and structure

Align on a common language that is used across code and design assets. This will aid communication with cross-functional teams as well as support the scaling of your Design System. Consistent naming ensures that your team refers to the same elements across design, code and assets brands.

Consider when you need a flexible naming convention

Some elements will need to differ by size when applied to different styles or themes. When naming these elements consider the increments you choose and if an in-between size will ever be required. For example, if you choose a t-shirt sizing naming convention (small, medium, large), will you ever need a size between small and medium? If not, great. But if this is ever a possibility, consider establishing a numerical scale that can be increased using a mathematical formula.

Design for accessibility at the base level

Design your base theme and base libraries to meet accessibility standards. Design for screen readers, color-blind users, keyboard controls, etc. Once established at the base level, those styles will meet accessibility standards across different brands.

Establish a single source of truth

Establish a source of truth for your Design System that serves as a trusted reference point. This source should contain all components, styles, and usage guidelines and can be referenced by design, engineering, product, and other Design System users.

Communicate whenever changes are being made to the Design System

Maintain regular lines of communication with everyone using the Design System. Send a release notice whenever a change is implemented and host regular meetings with stakeholders like brand and creative teams. Tasks like establishing a color system and creating accessibility guidelines must be coordinated with other teams, so strong relationships with partners/stakeholders are imperative.