Introduction

At a high level, a design system is a collection of principles, code, and guidance. It’s a living product that helps teams build products faster, ensures a baseline of quality, and share knowledge.

What a Design System Is

Design systems come in different shapes and sizes, but they all essentially contain the following:

Principles. The “why” behind the entire effort. It’s your north star for your roadmap and all future decisions.
Guidance. What this is, when, and how to use it.
Tokens/Components/Patterns. Something you can use to build a product.
A Design Kit. For non-technical folks to create without touching code.
Community (eventually). Where you’ll provide support and people can contribute back. This is an important part of growing your design system.

You can grow your design system organically. Start with your strengths; this can be a style guide, component library, or a design file to ensure consistency.

To evolve into a full design system, you’ll need a combination of principles, guidance, and assets, like a design file or code patterns. Even basic implementations are helpful.

What a Design System Isn’t

A collection of colors and fonts. A style guide is important for maintaining consistency, but it’s more of a theming layer.
A design file. It can be a good starting point, but a design system is a sum of its parts. It’s like only shipping code alone; it won’t be visible or usable to anyone else.
A Component library. While useful for consistency, there’s no guidance on when or when not to use components. Plus, you need technical knowledge to use it.

Value of a Design System

Design systems help teams focus on important problems specific to their team and user’s needs. They help us easily create cohesive UIs and avoid reinventing the wheel by creating common UI components like mobile menus, accordions, or other similar elements.

Aligning Goals

You’ll need some alignment with your agency or company goals. This is what will show value, get buy-in, and why it’s worth investing.

Principles

Principles are the north star for your design system. They help you outline: how you do things, what to focus on, and drive your roadmap.

Systems-Level Thinking

A design system is a collection of interconnected parts. Having a systems-level mindset means thinking about how all the pieces work together to succeed and scale.

Some considerations when working on features:

Guidance and Documentation
- Why do we need this? What problem does it solve?
- When should this be used or not used?
- Where does that guidance need to go?
- Are there any accessibility considerations?
Understanding Relationships
- Is there another feature that’s similar or is this completely new?
- How does this feature interact with others?
- What are the ripple effects of this change?
- How does this affect performance or security?
- What’s the impact to users?
Building to Scale
- What code can I reuse to build this?
- How can I build it to scale in the future?
- How can I make this as easy as possible to implement and update?
- What are “good” defaults for customization?
- What tests do I need?
Measuring Success
- What does the before/after look like?
- What’s the impact to the codebase?

It’s easy to feel overwhelmed when you’re starting out. Don’t let perfection paralyze you. Work iteratively and make it easy for your features to evolve. This way, you’ll be able to adapt to real-world needs.

Layers of a Design System

Think of your design system as infrastructure for your products. It will be the foundation for the tone, aesthetic, and functionality. Everything else goes on top.

Graphic of layers: Design system, User Research, Brand, Tone, Products.

You can iterate and experiment as fast as you’d like, but changes to the core of the design system should be intentional and well thought out before they’re fully adopted.