Building RUI, Replit's Design System

Replit has been investing in tools that maximize productivity so that a small number of engineers and designers can support millions of users. The result of that effort is the design system RUI.

Previously, there were issues such as designer overload, UI inconsistency across the product, and difficulty reusing code—so much so that there were as many as 7 Avatar components. To solve this, the goal was a system that meets 90% of requirements while being easy to use, and that still allows full access to the power of CSS when needed.

To build RUI, the following various technical approaches were reviewed:

• styled-jsx: Easy to implement, but it encourages reinventing components and composition is difficult.
• Styled Components: Excellent type support and readability, but cumbersome for rapid prototyping.
• Tailwind: High productivity and constrained styling, but has a learning curve.
• Style props (Chakra UI approach): High type safety, but domain logic and styling get mixed together, and CSS control is difficult.
• CSS prop (Emotion approach): Allows intuitive composition, but requires Babel configuration and can lead to longer code.