Design Tokens
Design & UXThe named values behind a design system — colors, spacing, font sizes, radii — stored as variables so a single change updates every screen instead of every…
Design & UX
Design System
Robert KlimantCo-founder
What is Design System?
A design system is a documented set of reusable components, design tokens, patterns, and guidelines that a team uses to design and build digital products. It includes things like buttons, forms, spacing rules, color values, and typography — all defined once and referenced everywhere. The goal is consistency across pages and faster shipping, because designers and developers are pulling from the same source of truth instead of inventing each screen from scratch.
Why it matters
Without a design system, every new page is a negotiation. Designers eyeball the spacing. Developers guess the hex code. Three buttons end up with three different paddings, and the brand starts to drift inside its own product. A design system kills that drift. It is the difference between a brand that scales and a brand that gets re-skinned every twelve months. Done right, it is also the fastest way to ship — because the components already exist, decisions are made once, and the team is arguing about strategy instead of border-radius.
How it works
A senior designer audits the product, identifies the recurring patterns, and turns them into reusable components in Figma — buttons, inputs, cards, navigation, modals, dialogs, tables. Each component is tied to design tokens (colors, spacing, typography scales) so a change in one place propagates everywhere. Engineering mirrors the same components in code, usually as a React or Vue library, with the same names and the same props. The system gets documented in a place everyone can read — Storybook, Zeroheight, or the Figma file itself — with guidance on when to use each piece. New page? The team grabs components off the shelf and assembles. New brand color or spacing scale? Change the token once, every screen updates automatically.
Related terms
Component Library
Design & UXA reusable set of pre-built UI pieces — buttons, forms, cards, modals, navigation — that designers and developers pull from instead of building each one fresh…
Typography
Design & UXThe craft of choosing and arranging type on a website — fonts, sizes, weights, line height, letter spacing, line lengths — to make content readable, scannable,…
Color System
Design & UXA defined palette of brand and UI colors — with rules for when and how to use each one — so a product stays visually consistent over time and doesn't quietly…
Brand Identity
Design & UXThe full system that defines how a brand looks, sounds, and behaves — name, logo, type, color, tone, story — not just the logo, but everything that makes the…
Visual Identity
Design & UXThe visual half of a brand — logo, typography, color, imagery, iconography, motion — the parts of the brand you can actually see, designed as a coherent system…
Figma
Design & UXThe browser-based design tool most product and marketing teams use to design websites, apps, and interfaces — collaborative, fast, and the de facto standard…
User Interface
Design & UXThe visible part of a digital product — the buttons, menus, forms, layout, typography, icons, modals — that a person actually touches, clicks, and reads to get…