One system for every screen.
A design system is the collection of building blocks used to design and build your website, platform or app. Buttons, forms, cards, navigation, colours and typography are captured in reusable components. As a result, every screen looks like the same brand, and new pages and features can be created faster. Even when several teams or websites work with it.
We translate your visual identity into a digital system. That starts with the basics: colours, typography, spacing, grid and icons. On top of that we build components, from a button to a complete content section, with variants and rules for use. We design everything in Figma, set up so that it maps one-to-one to the components in the code and the building blocks in your CMS. That way, designers, developers and editors work with the same building blocks. We take accessibility into account according to WCAG 2.1 AA, as well as how components behave on mobile, tablet and desktop.
Laying the foundation
We translate the identity into digital foundations: colour use, type scale, spacing, grid and icons. We test contrast and legibility against accessibility guidelines.
Components
We design reusable components with their variants and states, from buttons and forms to cards, navigation and complete sections. Each component gets clear rules for use.
Connecting to code
We make sure the system in Figma connects to the components in the code and the building blocks in your CMS. That way you can assemble new pages without a developer having to step in.
Documenting and maintaining
We document the system, so new designers and developers can get started with it quickly. And we keep it up to date as your website or platform grows.
What a design system delivers
Consistency
Every screen, every page and every website feels like the same brand.
Speed
New pages and features are designed and built faster with existing building blocks.
Scalable
The system grows with new parts, teams and websites.
Brand guidelines describe how your brand looks and sounds, for all touchpoints. A design system is specific to digital products: it contains the components and rules used to design and build your website, platform or app.
The design system is based on your visual identity, but goes into much more detail. Think of how a form behaves when there is an error, or how a card looks on mobile.
Even for one website, we work with a set of reusable components, because that makes your site consistent and easier to manage. An extensive, documented design system pays off especially when you have several websites, a platform or an app, or when several teams work on your digital products.
For a multisite or digital platform, it is almost indispensable.
We design in Figma. That is where we capture the foundations, components and variants in a shared library. We build the components in code, so they correspond one-to-one with the design.
In a headless CMS such as Strapi, they become available as building blocks you can use to assemble pages yourself. That way, design, code and content management connect.
Accessibility is built into the foundation of the system. We test colour contrast, font sizes, focus states and keyboard navigation against the WCAG 2.1 AA guidelines. Because every page is built with the same components, accessibility is automatically applied correctly everywhere.
During website development, we test this in practice.
Yes. We start with an analysis of what is there: which components are used, where is inconsistency and what is missing? Then we clean up, fill the gaps and document the whole. That way you do not have to start over, but the system becomes a reliable foundation again.
That can be your own team, using the documentation as a manual. Many clients choose to leave the management with us, as part of ongoing design and development. Then we add new components as your website or platform grows, and make sure design and code stay in sync.