Design Systems Part 2

Congratulations! You’ve decided to build a design system. Now what?

Hopefully, you’ve followed the steps outlined in Design Systems- Part 1 and are ready to design and build your library. As you start, here are a few things to consider to make your design system successful!

Tech Stack

Consider what tech language you want to use to create your design system. Will it use web components or a framework? There are benefits for both.

Web Component Framework Component
  • Built with web standards and is often lightweight
  • Agnostic to frameworks so can be plugged in anywhere
  • Vanilla Javascript so potentially a simpler learning curve
  • Rapid development with lots of built-in functionality
  • Rich ecosystem of open source community
  • Easier to plug into your existing framework
  • Limited functionality out of the box
  • You need to manage more boilerplate code
  • Less ecosystem support when compared to the big frameworks
  • Locked-in to developing with the framework
  • Steeper learning curve to understand rules and plugins
  • Often have larger bundle sizes due to larger feature sets built into the system

Many organizations often use one of the major front-end frameworks such as React, Vue, or Angular. Developers may elect to stick with those frameworks when building their library. If web components seem right for you, Svelte and Lit have had great results and can be used within other frameworks.


When creating your component library, the most common way to manage and host the library is through npm. You’ll want to consider whether to make it public (open source) or private (only internal use). Additionally, it’s important to maintain semantic versioning which leverages major, minor, and patch releases.


If you’ve followed our advice from Design Systems- Part 1 you’ll have a good idea of what components you need to build and are ready to spend time defining functionality and visual styles. Product designers are valuable resources at this step in the process. They know where the new components fit into your applications and how they will be used. Work with them to define component variations, properties, usage guidelines, and visual style.

Don’t have a designer in your organization? Reference publicly available component libraries and design systems for inspiration. Try REI Cedar, the Atlassian Design System, Shopify Polaris, Salesforce Lightning, or Microsoft Fluent


Modern design systems utilize design tokens to create consistent and reusable styles across applications. Design tokens are simply a way to manage design values and properties across a design system. Tokens typically include values for color, typography, spacing, border-radius, z-index, animations, and effects like box-shadow or blur.

Consider using a CSS preprocessor like Sass which allows developers to create variables for the design tokens you defined earlier. Now your tokens can be applied to components maintaining a clean and scalable approach to your UI.

Another option to consider is CSS frameworks like Tailwind CSS. Tailwind allows developers to use predefined utility classes to style components and can be configured with custom colors, spacing, and other token-level attributes.

Building your components

Now that you’ve chosen a tech stack and hosting solution, there are a few things to consider when building the components themselves. Here’s where reusability and a build pattern come into play.

Remember, reusability is key! Keep these principles in mind as you craft your components, paving the way for a robust and adaptable design system.


Testing is Key! Often overlooked, testing is crucial for building a reliable design system. Regular testing throughout development ensures your components function as intended. Utilize both manual testing, to confirm components behave as expected from a user's perspective, and unit testing (using Jest, Mocha/Chai, or Karma/Jasmine depending on your framework) to prevent regressions and unintentional bugs. Integrating testing into your CI/CD pipeline automates testing with each code change, maintaining high code quality. Prioritizing testing lays the groundwork for a robust component library and design system.


To ensure continued success with your design system, it’s important to have well-written and organized documentation. Consider the following when writing your documentation:

Take your documentation to the next level by integrating Storybook. This powerful tool creates an interactive playground where developers can explore your components in real time. They can toggle properties, see responsive rendering updates, and even copy code snippets directly. Storybook seamlessly integrates with the mentioned frameworks and can be made publicly accessible for open-source libraries.

If you need help getting started, our team is ready to lend a hand, schedule time to chat with us.