Design system agency: one shared language for design and code

The short answer: a design system is a single library of colours, typography, components and rules that designers and developers both build from. We create it in Figma and in React, document it and set up a process for who may change what. The price is fixed in a written proposal within 24 hours.

Talk to us about your design system See prices

2.0
Design system delivered for WorkPoint: 4
Layers: tokens, components, patterns, docs: 24
Hours to a fixed price in writing

Sound familiar? Three different blue buttons. A date written four different ways. The new module does not look like the rest of the product because the team could not find the right components. Every new screen means designer and developer starting almost from scratch. A design system fixes that by making the right choices the easy ones. It is not a style guide in a PDF but a living library used every day in UX/UI design and in the code.

What does a design system consist of?

Four layers. Each builds on the one before.

Layer	What it is	Example
Design tokens	The smallest decisions stored as named values	Primary colour, spacing, font sizes, corner radius
Components	Reusable building blocks in Figma and React	Button, input, table, dialog, navigation
Patterns	Standard answers to recurring tasks	Filtering, form validation, empty states
Documentation	When and how each part is used, with code samples	Guidelines for copy, accessibility and tone

Tokens are the layer most often overlooked, and the most important. When a colour or a spacing value is defined in one place and used everywhere, you can switch themes, support dark mode or adapt a white-label product for a new customer without touching every screen. Tokens are also the bridge to your brand: the identity is translated into values the code can read.

Components are also where accessibility gets solved once and for all. When the button, the dialog and the form field have correct contrast, focus and screen-reader support built in, every new screen inherits it automatically. That is far cheaper than fixing the same issues screen by screen, and it makes it easier to document that the whole product meets the requirements.

When does a product need a design system?

Time for a design system

Several products or modules that must look alike
Several teams or suppliers designing and coding
A SaaS product that grows with new features every quarter
Accessibility requirements across the whole product

A component library is enough

One website or one small web app
One small team working side by side
The product is still finding its shape
A few screens that rarely change

A design system is an investment. It has to fit the size of the product.

All our solutions are built on a shared set of components, so even a small web app gets consistency from day one. A full design system with documentation and governance makes sense when several people will build on the same product over several years, typically in SaaS development and larger platforms.

From Figma to code: how we build it

Inventory

We gather every existing screen and find duplicates, inconsistencies and gaps.

Tokens and foundations

Colours, typography, spacing and icons are defined and named.

Components

Each component is built in Figma and React with every state and accessibility in place.

Documentation and handover

Guidelines, code samples and a process for contributions and versions.

Design and code evolve side by side so they do not drift apart.

Governance: who owns the design system?

A design system without an owner decays. Six months in, teams have made their own variants and the library is out of step with the product. So we agree from the start who approves new components, how changes are versioned and how teams propose additions. It sounds bureaucratic, but in practice it is a short process and a steady rhythm that keeps the system in use.

At WorkPoint, in a two-year collaboration, we created Design System 2.0 for WorkPoint Core, Automate and Express 365, with a designer embedded in the product teams. That closeness is often what decides whether a design system lives. For Systematic we did on-site UI design for Columna Cura, the care record for Danish municipalities, where consistency and clarity matter to people who use the system all day.

How much does a design system cost?

Scope varies a lot: a foundation of tokens and core components for one product is very different from a system for a whole product family with several teams. So we write the price as a fixed amount in the proposal within 24 hours, once we have seen your product. Many start with a UX audit that shows where the inconsistency costs most, and build the design system from there. Send us a link and we will take a look.

Selected work

Built by us, in production today

All cases

WorkPoint 365Search projects, cases and documentsMK

ProjectsCasesContractsCustomersSuppliers

Projects

WorkPoint Automate · Process

Step 2 of 6

Enter project information

Fill in the metadata for the new project.

Title *

Harbour Front, phase 2

Project number

Department

Project manager *

Team

Start date

Completion date

Budget

Create project

Project start-up · 6 steps

20%

Select parent companyCompleted
2Enter project informationAwaiting input
3Budget justificationPending
4Creating projectRuns automatically
5Notifying project managerRuns automatically
FinishPending

← BackContinue →

WorkPoint Automate

Approve budget

Harbour Front, phase 2

BudgetAbove limit

24.5m DKK

Phase 2 covers the new quay elements and the revised schedule.

Select parent companyCompleted
Enter project informationCompleted
3Budget justificationAwaiting input
Creating projectRuns automatically

Comment

Add a comment

RejectApprove

SaaS · Microsoft 365 · WorkPoint

Design System 2.0 for WorkPoint Core, Automate and Express 365.

Columna Cura

⌕Søg på navn, CPR eller adresse

Distrikt Nord ▾AHAnna HolmSocial- og sundhedshjælper

Else Marie Jensen

120437-•••• · 89 år · Grenåvej 212, 8240 Risskov

● Penicillinallergi▲ FaldrisikoHjemmepleje · Distrikt Nord

PårørendeEgen lægePeter Jensen (søn) · 21 44 87 10Lægehuset Vejlby

OverblikTilstandeIndsatserJournal

Helbredstilstande

Se alle 5 →

Bevægeapparat

Problemer med mobilitet og bevægelse

3 · Svære

Hud og slimhinder

Problemer med sår

2 · Moderate

Ernæring

Uplanlagt vægttab

2 · Moderate

Seneste notater

+ Nyt notat

Anna Holm, SSHI dag 07.58

Else var træt i morges og spiste kun en halv skive brød. Proteindrik stillet frem.

Observation

Lene Skov, sygeplejerskeI går 14.21

Sår på venstre hæl renset og skiftet. Mindre rødme i kanten end sidst.

Sår

I dag · tirsdag 29. sep.

07.30 · Personlig pleje
Udført
Anna Holm, SSH
12.00 · Medicingivning
I gang
Mikkel Dahl, SSA
14.00 · Sårpleje
Lene Skov, sygeplejerske
18.00 · Medicingivning
Aftenvagt

Aktive indsatser

Personlig pleje, morgen30 min.

Medicingivning5 min.

Sårpleje20 min.

Træning efter § 8645 min.

07.52

‹ Min dag · 07.30

Else Marie Jensen

Grenåvej 212, 8240 Risskov

● Penicillinallergi▲ Faldrisiko

Opgaver · 2 af 4

✓Hjælp til bad og påklædning

✓Morgenmedicin fra doseringsæske

Tjek hud på hæle

Vejning, notér i journal

Notat

Tryk for at skrive eller indtale et notat

Afslut besøg

Health & care · Systematic

UI design on site for Columna Cura, the care record for Danish municipalities.

What our clients say

We have worked with Ceptiv on several of our digital offerings, and they have become a natural part of the team. They move fast, turning ideas into new designs and clickable prototypes quickly, so we can test with customers early instead of debating on paper.

Szabolcs Nagy · Lead Global Product Manager, GrundfosRead the case

When we started working with Ceptiv, Kirppu was one store in Herlev and a lot of ambition. We needed a booking system our renters could use without calling us, and we needed it fast. Ceptiv took charge of the whole experience, from the prototype and the design to testing it with real renters, and they were honest about what belonged in the first version and what could wait.

Claus Andreassen · CEO and co-owner, Kirppu Group ApSRead the case

FAQ

FAQ: design systems

What is the difference between a design system and a style guide?

A style guide describes how things should look: logo, colours and typefaces, often in a PDF. A design system is a tool used directly in the work. It holds tokens, components in both Figma and code, patterns and documentation. The style guide tells you what a button should look like. The design system hands the developer the finished button.

What are design tokens?

Design tokens are named values for the smallest design decisions, such as the primary colour, standard spacing or heading size. They are defined in one place and used in both Figma and code. When a token changes, the change flows through everywhere. That makes it possible to switch themes, support dark mode or create white-label versions without reworking every screen.

Do you build components in code or only in Figma?

Both. A design system that exists only in Figma quickly drifts away from what is actually in the product. We build the components in React and TypeScript so they can be used directly in your product, and keep the Figma library in sync. If your product is built in another technology, we factor that in before writing the proposal.

What does a design system cost?

It depends on how many products, components and teams the system must cover, and whether you need a designer embedded in your team over a longer period. We write the price as a fixed amount in a written proposal within 24 hours. A good starting point is a short review of your current screens, so the scope becomes concrete.

Can you build a design system for an existing product?

Yes, that is the most common case. We start by mapping the screens you have and finding the components that repeat and the ones that deviate. From there we build the foundation and replace components gradually, so the product does not have to freeze. New features are built in the new system from day one, and old screens are updated as they get touched anyway.

How do we make sure the design system gets used?

By making it easier to use the system than to ignore it. That takes good documentation, components that work in code and a clear owner who approves changes. At WorkPoint our designer sat inside the product teams, which made the system part of daily work. We agree governance from the start, so you know who does what after handover.

Tell us what you need built

You get a written fixed-price proposal within 24 hours. No sales calls required.

Talk to us about your design system