Design Systems Fundamentals
What a design system is, what it is not, and why the token layer is where every system should start.
What a design system is
A design system is a set of decisions that eliminates a category of future decisions. When you define a spacing scale, you eliminate the decision of how much space to put between elements — the scale makes that decision for you. When you define a component library, you eliminate the decision of how to build a button — the library makes that decision and encodes it in reusable form. A design system is not a style guide, a component library, or a pattern library, though it may contain all three. It is the logic that governs what those artefacts contain.
The token layer
The foundation of any design system is its token layer: the named, reusable values that every design decision inherits from. Tokens define colours (not just 'blue' but a named role — 'color-primary'), typographic sizes (not '18px' but '--font-size-lg'), spacing (not '16px' but '--sp-4'), and surface values. The token layer is what turns a collection of components into a system — because every component inherits from the same set of named values, changes to the token layer propagate automatically.
What a design system is not
A design system is not a Figma file. It is not a set of CSS classes. It is not a component library. These are implementations of a design system — ways of encoding the system's decisions in specific media. The system itself is the set of decisions and the logic that generated them. You can have a very good design system that lives entirely in a single CSS custom properties file. You can have a very poor design system that lives in an elaborate Figma library.
Scale of investment
The appropriate scale of investment in a design system depends on the scale of the product being built and the number of people building it. A freelancer working alone on a client site needs a token layer and a small set of documented components — not a full atomic design hierarchy with contribution governance. Matching the system's complexity to the team's size is one of the most important decisions in design systems work.
Starting point
The most reliable starting point for any design system is the token layer. Before you design a single component, define your colour roles (primary, secondary, surface, text, border), your type scale, and your spacing scale. These three decisions generate the visual language that everything else inherits. The Themex System Builder automates the token generation step — you provide the inputs, it produces the CSS output.
Field Notes in your inbox
Practical observations on design systems, component architecture, and UX methodology. No promotional content. Published when there is something worth saying.