Design system


A design system is a continuously evolving single source of truth for the whole team that’s working on a project or product. It combines a UI kit, behavior and scale rules, code, and a brand book. It is a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications.


You can use a design system to:

  • Align the foundations of a brand’s design language.
  • Streamline UX processes.
  • Create a scalable UI language.
  • Ensure design consistency.
  • Empower your team and your employees.

Once again, if you want to learn more and are interested in creating a design system, I invite you to read my article about it here.


Design Systems Checklist


Start here

  • Is the design system the right tool for your use case?
  • Will your company invest in design? Think about time + money investment + opportunity costs.
  • How will people contribute? Define the process.
  • If your company needs the design system. Make sure designers and developers are on board and aware of the design system benefits.





  • Can you afford starting from scratch?
  • You can choose open-source library: Reakit, Reach UI
  • Language: JavaScript, React, TypeScript, …
  • Javascript library: React, Angular, Vue, …
  • CSS: Vanilla CSS, CSS Modules, Emotion, …
  • Design tokens template: Theme UI



  • How will you name your layers? Naming should be simple.
  • Decide about your design tokens.
  • Make sure new components are easily repeatable
  • Test every component (+ every build)
  • Write documentation for every component
  • Add description where to use each component


Working together

  • What is the scope of our current component library?
  • What is the scope of our design systems library?
  • What types of components will we create?
  • Where will our library live (be continuously updated and available to everyone in the company)
  • Which design tool?
  • Think about the most repeatable tasks and optimize it
  • Who will be responsible for communication between designers and developers?
  • Share useful “optimization hacks” for using design system