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

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.

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.

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.

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.

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 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 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.