← Blog Eugene Arutyunov April 6, 2026

What the System Is Made Of

The design system is code in a repository. At the top level, there are five layers:

Layer	Example
Service functions	UI Scheme, Design System Page
Layouts	Authorization, Pricing page, Dashboard
Prototype	Playground, Behaviors, Conversations
Tokens	purple-500 slate-500 purple-300 spacer-s spacer-m spacer-l
Components	Create API key On Voice reports Admin

The core of the system is the combination of components and tokens. This split serves two purposes: knowledge stays concrete and unambiguous, and it's represented at a sufficient level of abstraction.

Tokens are responsible for concreteness. There are many of them, arranged in a flat structure. A token is a name for a specific value — a color, a size, a duration. Tokens don't generalize; they specify.

Components are reference specimens. Their role is not to be the final implementation but to demonstrate how a thing should look and behave — correctly, once. Anyone taking a component gets a working example, not a prescription.

The concreteness of tokens drives speed and reliability.

The abstraction of components enables quality.