From the source
Replit is growing fast, as an application and a team.
New features are being added, new people are joining the platform, and new designers and engineers are building it all.
Unfortunately, this means that different parts of the product start to look and behave differently, because no single designer or engineer can keep all the interface states in their head.
With dozens of people working on Replit, what happens when you want to update your color or text scheme across the whole site?
What if you want users to be familiar with how components work anywhere they see them?
It doesn't happen by accident — it requires strong infrastructural basics that you can rely on.
So, we spent a few months this year building a stronger foundation for our design system.
This is how our system is structured now: Each layer is a set of patterns that are used to compose the layer above it.
We started with the most primitive layer: tokens.
Tokens are just core visual attributes that we can apply in design tools (Figma) and on in our codebase (CSS).
They describe appearance, but don’t describe behaviour.
…
