Design system
A design system is a collection of reusable design building blocks — colours, typefaces, spacing (design tokens) and ready-made components such as buttons or forms — together with rules for their use.
Instead of designing each page individually, you assemble it from proven building blocks. If a token changes, such as the brand colour, the whole product adapts.
This saves time in design and development, prevents sprawl and ensures a consistent experience — especially when website, client portal and app work together.
A design system is the digital continuation of corporate design. Circle builds websites and software component-based with design tokens as a matter of principle.
What to look out for
- Start with design tokens: define colours, fonts, spacing, radii and shadows centrally.
- Identify recurring building blocks — buttons, form fields, cards, notices — and build them properly once.
- Document each building block with its states: default, focus, disabled, error.
- Build accessibility into the components so it applies everywhere automatically.
- Consistently assemble new pages from existing building blocks.
Common mistakes
- Colours and spacing are hard-coded into individual pages instead of maintained centrally.
- The design system exists as a document but is not used in development.
- Every special requirement produces a new, almost identical building block.
Frequently asked questions
Yes, in a lean form: just a few centrally defined colours, fonts and building blocks keep website, offers and later extensions consistent.
Named base values such as “primary colour” or “large spacing” that are maintained in one place and used everywhere. If a token changes, the whole product adapts.
More in our article: Design system: why consistent design saves money