From the source
Our secret is investing in good tools that make us more productive.
In this blog post we'll give you an insider look into how we implemented one such tool - the Replit design system (or RUI for short).
The project started as a collection of growth pains: Designers were stretched thin on multiple projects and they couldn't be involved in small tactical decisions UI was inconsistent across the product Reusing UI code was hard, so engineers built new ones (for example, we had 7 different Avatar components) So, we set to build a design system that would help us scale.
The high level goals: Cover 90% of what we need (don't chase the very special cases) Easy, intuitive and fun to use Retain the full power of CSS when it's needed Technical path Replit's frontend is built on top of React, a very popular library for building user interfaces.
The React ecosystem has dozens of libraries and toolkits for making UIs.
So many, that picking one is a hard problem!
Here's a list of libraries and approaches we have considered, and the pros and cons we weighed: Styled JSX …
