A design system is the best way possible to start your project faster, saving you so much time and energy. Think of a collection of reusable components, like a library, where you can easily provide consistency on pre-built UI elements.


Creating a design system is the only source of truth to run a project with a whole team of others designers and developers who all work with a unique purpose to focus on the client's project. It gives you and your team more freedom to work without having to worry about the next steps.


To start a design system here are the most important elements that your project needs:


After you are done collecting all the elements that I mentioned before, you can focus on:

: If you can, don't build a design system from scratch all by yourself. Design is increasingly becoming more complex and with all those information inside your head it will decrease the quality of your job. So have all your team involved to brainstorm, create and support a unique process.


There are tons of plugins that can make the whole creation process even quicker!

Generate font combinations with deep learning

There are tons of design systems you can copy or use as an example to build yours. Keep in mind that this process takes time but gives you many benefits. Don't be attached to the details because perfection doesn't exist. Speed first, quality later!

Design system as a support tool for your project

We all know how hard it is to create customizable Apps or Websites UI components, through my career I've always struggled with creating generic components which could be reusable and easily customizable.


Until I find styled-components 🤩, It's a react library that makes reusability looks easy. It allows you "write CSS" into javascript and create customizable components that can be used across your application without stress.


Differently from CSS classes, styled-components concentrate all the logic within a unique component, instead of pilling up classes you can easily pass props that change the appearance of your component, here is an example of how it can simplify your life


Here at Two of Us Tech, we use the styled-components theming feature, which allows us to define a set of variables like margin, padding, and colors and access it within our components. It gives us the ability to speed up our development process and keep all variables within the theme as the only source of truth avoiding inconsistency between different components.


At the end of the day, you should consider various factors before choosing a CSS-like framework, such as the learning curve, project size, team capacity, and much more. To learn more about styled-components we recommend you check their documentation 

See Our Blog

Insights & advice from our team

Design system as a support tool for your project

How we use styled-components to boost our productivity 💅