Design system

A design system has three layers, and confusing them is the most common mistake. The bottom layer is tokens: named values for colours, sizes, typefaces, radii, shadows and spacing. The middle layer is components: button, input, card, modal, each with every state it can hold (default, hover, focus, pressed, disabled, loading, error). The top layer is rules: when to reach for which component, how the grid works, how labels and error messages are written. Without that top layer you get a parts bin rather than a system.

The return appears with volume and with time. A single landing page does not need a design system, because the system would cost more than the page. It starts paying off where there are dozens of screens, regular releases and several people on the product: a new screen then takes hours instead of days, a button colour change propagates everywhere through one token, and developers stop asking what the spacing here should be and inventing an answer. A separate benefit is testability: a component with documented states is verified once rather than on every page.

The main trap is a design system that exists only in Figma. Once the component library in the design files and the code diverge, every screen still gets built from scratch and the system turns into attractive documentation nobody opens. The working arrangement is shared tokens feeding both the design files and the styles in code, plus a live component library the front end genuinely references. The second trap is trying to describe everything at once: a system starts with the ten to fifteen most frequent components and grows with real demand.

Related terms

• WireframeA wireframe is a rough screen schematic without colour, typography or imagery: it fixes which blocks exist, their priority and the transitions between screens, so the interface logic is agreed before expensive visual design starts.
• Responsive designResponsive design is an approach where a single layout reorganises itself to the viewport: grid, typography and block order change at defined breakpoints instead of sending the visitor to a separate mobile version on its own subdomain.
• Usability testingUsability testing is checking an interface with real people: participants from the target audience carry out realistic tasks while thinking aloud, and the team records where they stall, where they go wrong and what they fail to find.
• RefactoringRefactoring is changing the internal structure of code without changing its external behaviour: the functionality before and after is identical, what changes is readability, coupling and the cost of the next change, verified by tests and regression checks.
• Technical debtTechnical debt is the accumulated gap between how a system is built and how it should have been built: every shortcut taken to hit a deadline turns into a permanent surcharge on the cost and duration of everything built afterwards.

Related services

• UX/UI design for websites and appsWe design interfaces that survive contact with production: research, structure, UI kit and a clean handoff to the developers. Everything lives in Figma as components with real states and real breakpoints, not as a folder of flat mockups. The same process covers landing pages, corporate sites, e-commerce, web apps and mobile.
• Branding, logo and visual identityWe build the visual system of a brand: positioning and naming through to logo, palette, typography and a brand book any future contractor can work from. You get vector source files, not just a PNG on a white background. We work with new companies and with rebrands, where an identity exists but has stopped doing its job.
• Website development, end to endWe build sites that still hold up a year later: from a one-page CMS build to a store or a web application on React and Next.js. One team for design, code, integrations and launch.

Read more

• Design Systems: When They Pay Off and When They Are an Expensive ToyMost teams asking for a design system need a component library and naming discipline instead. Where the line sits, how to calculate the payback before you start, and what actually belongs in a minimum viable version.
• Branding for a Startup: The Minimum Set at Launch and What It CostsStudios sell 200-page brandbooks while a startup needs a set that fits in one PDF and lets you launch ads next week. The minimum scope, staged payment, market prices and the legal step almost everybody skips.