Skip to content
Contact

Design System

One source of truth for brand, design and code.

We build design systems that bind engineering and marketing to the same language — tokens, components, documented and versioned.

Start a system request

Anatomy

Tokens, type, spacing, components — one connected body of work.

Each layer has its job: tokens define the foundation, components build on top, documentation closes the loop.

design-system.tokens.jsonv1.4.2

Color tokens

6

accent

#B0FE93

bg

#070707

surface

#0E0E0E

text/100

#FFFFFF

text/60

#A8A8A8

rule

#FFFFFF · 4%

Typography

5
Aa

Display / 32

500

Aa

H2 / 24

500

Aa

H3 / 18

500

Aa

Body / 16

400

Aa

Caps / 12

500

Spacing ramp

4 → 96
4
8
12
16
24
32
48
64
96

Button states

4

rest

hover

pressed

disabled

Deliverables

What you get.

Six pieces that make a design system productive — not "inspiration", but engineering-ready artifacts.

  • 01

    Tokens

    Design tokens

    Color, typo, spacing, radius, shadow — as JSON, CSS variables, Figma variables.

  • 02

    Type

    Type scale

    Variable fonts, type tokens, readability rules and language variants.

  • 03

    Components

    Component library

    Buttons, inputs, cards, tables — a11y-checked, with states and variants.

  • 04

    Tooling

    Engineering hand-off

    Style Dictionary, Storybook, theming, dark/light, theme-switch.

  • 05

    Docs

    Documentation

    Patterns, do/don't, migration guide, sample pages.

  • 06

    Governance

    Versioning

    Semantic versioning, change-log, contribution model and reviews.

By the numbers

This is hafencity.dev

15+ Experts

Engineers, designers, and strategists working as one practice from our Hamburg HQ.

50+ Clients

Companies across consumer, healthcare, and B2B trust us with their digital products. Long-term partnerships are the default.

97% Recommendation rate

Repeat engagements and references our buyers actually call. Trust compounds when delivery does.

50+ Launches

Custom mobile and web products shipped from concept to maintenance — owned end-to-end by our team.

100% In-house

Strategy, design, and engineering all live at our Hamburg HQ. One team, one project lead, accountable to you from kickoff to launch.

Since 2023

Helping companies ship digital products — and growing alongside the teams we work with.

Next steps

Let's talk about your project

Book a 30-minute discovery call. We'll review your goals, surface unknowns, and outline how we would run the engagement.

Schedule a call