Company
Date Published
Author
Barron Webster
Word count
835
Language
English
Hacker News points
None

Summary

RUI`, Replit's evolving design system, was built to address the challenges of a growing team and application. The system is structured into layers with patterns that compose each layer above it. Tokens are the most primitive layer, defining core visual attributes such as colors, spacing sizes, font sizes, and more. A clear and predictable token set helps create new interfaces quickly and enables designers and engineers to speak a common language. Improvements were made to naming conventions for tokens, including using descriptive names instead of numbers or arbitrary titling. The number of tokens was reduced while adding categories, eliminating unused tokens, and ensuring each one is visually distinct. Strict typing was implemented to prevent typos and improve code maintainability, with emotion providing a CSS API to access tokens across files. The system is ongoing, and future updates will be shared on the blog.