Design system

The parts sit in layers. At the base are design tokens, the named values for colour, type, spacing and grids. Components are built from those values: buttons, inputs, tables and panels, each drawn with its loading, empty, disabled and error states. Patterns are the ways components combine for a job the product repeats, such as opening a record in a side panel while the list stays in view. The rules say where each part belongs and what it does when the data is missing or too long.

A working system lives in two places that have to match: a library in the design tool for designers, and coded components for engineers. Nielsen Norman Group counts the people who maintain it as part of the system: someone has to decide which version of a part stays when two exist, and keep the file and the code in step.

Products that grow a feature at a time collect small differences. A button saves and closes the panel on one page and saves and stays open on the next. A filter reads one way in the table and another in the report. Together they make people relearn the product as they move through it. A design system gives each decision one home. Engineers build a new screen from parts whose states are already worked out, and a fix to a component reaches every screen that uses it.

We start by auditing the interface you have, writing down every type style, colour, spacing value, icon and component in use. We mark what is duplicated, settle which version of each part stays and agree the list with your designers and engineers, including what each component does: whether saving closes the panel, where validation appears, which action can be undone.

Each part is then drawn in Figma on your product’s own content, with its loading, empty and error states from the start. We build the system in code, in the stack your engineers already use, and check each one in staging. You get the Figma library, the coded components and a rule for each part, in your own accounts. It is scoped as product design, from $10,000 a month.

Say an analytics product has rebranded with a warm, bright palette, and the first screens drawn with it put the new colours everywhere. They compete with the numbers people read all day. The system settles it with one rule. Warm neutrals from the palette take the surfaces, and the accent colour is kept for state, action and selection alone. Dense tables stay quiet, and the brand shows in navigation, empty states and success moments, where nobody is reading a figure.