A quick guide on creating a design system

Every product team eventually runs into the same problem: chaos. As designs scale and codebases grow, decisions get repeated, duplicated, and eventually contradicted. What started as a clean vision becomes a cluttered mess of mismatched buttons, inconsistent layouts, and forgotten design choices. A design system is how you fight back. It’s not just a UI library—it’s a shared language, a tool for alignment, and a long-term investment in quality and speed. This article is a practical guide to creating a design system from scratch—based on what I’ve learned building systems for real teams, scaling real products.

This article consists of 3 parts:

1. Understanding design systems (what are they and when to create one)

2. Creating a design system (creation process and activities involved)

3. Additional considerations (other concepts and references to consider)

*I use the term “product” throughout this article as an umbrella term to describe a website, application, online service, etc.

I published the design system I created to illustrate concepts in this article. Feel free to use it in your work.

Understanding design systems

A design system is a unified language that helps a team solve problems consistently. Pieces of a design system can include guiding principles, brand elements, voice and tone guidelines, code standards, and a UI library.

Why create a design system?

A design system unifies product development and helps prevent technical debt. Building a design system might slow you down at first, but it will pay dividends as you scale your team and product.

Benefits of a design system:

• Single source of truth

• Increased consistency

• Cost/time savings

When should you create a design system?

I like to wait until the product and team have had time to develop before creating a design system. However, other people like to start with a design system in place.

There is no right answer, but if you go too long without one, inconsistency and inefficiencies will compound, destroying productivity and morale. If you start to notice this happening, it might be time to get the team together to define a system.

The necessity of collaboration

The best way to gain adoption is through inclusion. Make sure to involve all product stakeholders in the process. Not everyone needs to be an active contributor, but everyone must have a voice.

Design system creation process

Conduct a design audit

1. Organize your team to take screenshots of the components of your current product. Make sure to look at all the properties of your product like the help site, internal tools, different apps, etc.

2. Use presentation software like Google Slides to organize your screenshots or consider printing out each screenshot and pin them on foam-core boards.

3. Review each category to observe inconsistencies and note areas for improvement with your team.

Consider collecting all your product’s design components and documenting it in a slide deck. It’s usually a very eye-opening process that shows the necessity of creating a design system.

Organize screenshots into categories like:

• Buttons

• Navigation

• Forms

• Tables

• Charts

• Lists

• Cards

• Icons

• Color

• Typography

• Etc.

Taking inventory of your product’s UI often illuminates embarrassing inconsistencies. It is very eye-opening to see how many different button styles and text sizes get implemented over the life of a product.

Define basic design elements

Design elements are the basic building blocks of a user interface. The first step in creating a comprehensive design system is to define its base level elements. These elements combine to determine the components of your product.

Elements to consider including:

• Color

• Typography

• Sizing

• Spacing

• Grids

• etc.

Define design components

Design components are functional pieces of a user interface. Components are created from design elements and come together in various ways to create a composition.

Basic design elements are combined to create essential UI components.

Components to consider including:

• Forms

• Buttons

• Tabs

• Icons

• Alerts

• Etc.

The image above shows examples of design components categories including buttons, forms, and tabs.

Don’t forget to include different states of each component. For example, what does an input look like when a user clicks/taps into it?

Define views (screens, pages, compositions)

After you define your design elements and components, you can combine them to create views.

Design elements and components come together to create views. The example above shows a signup form that includes tabs, form inputs, buttons, and typography.

Examples:

• Dashboard

• Signup forms

• Overviews

• Details

• Etc.

The example above shows how design elements and components combine to create a signup view.

Include design patterns

Design patterns consist of common user flows and interactions.

Examples include:

• Filtering

• Creation flow

• Progressive disclosure

• Continuous scrolling

• Onboarding walkthroughs

• Etc.

Create documentation

As you build your design system, it is essential to document your thinking and best practices for elements, components, views, and patterns. Documentation can also include your guiding principles and code snippets.

Pieces to consider including:

• The rationale behind design choices

• Implementation guidelines

• Dos and don’t

• Code snippets

Additional considerations and references

Great design systems evolve

Your design system must adapt and evolve with your product and team. Think of it as a living organism. It will never be perfect, its always growing, and it needs love.

Eventually, you might need to dedicate a team to it

If your company grows big enough, it might be necessary to dedicate a team to its maintenance and further development.

At first, the design system is maintained by a few individuals on a part-time basis. Later, someone is assigned to it full-time. Eventually, a whole team consisting of designers, engineers, and product managers own it.

When your company is small — like a few people small — your team might not need a design system. It might even hold you back as you iterate and pivot your way to product-market-fit.

Once the team grows and is working on various parts of the product, the need for some type of system becomes apparent. When your company has many teams and departments working on different initiatives, a design system is a must.

Don’t let perfection stop you

Creating a design system doesn’t need to be a massive undertaking. Don’t let its complexity and time commitment lead to procrastination. Define the base and let the rest evolve as your product grows. When things get a little crazy, dedicate time to refine it. The hardest part is getting started!

Design systems are never finished. They grow, break, adapt, and evolve alongside the product they serve. But what matters most is that you begin. Start small. Define the foundations. Get your team involved. The payoff is more than consistency—it’s clarity, momentum, and trust. If you found this helpful, I publish more articles like this on systems thinking, UI design, and building better products. Follow along—I’m building in the open, and I’d love for you to be part of it.