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.
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.
Color tokens
6accent
#B0FE93
bg
#070707
surface
#0E0E0E
text/100
#FFFFFF
text/60
#A8A8A8
rule
#FFFFFF · 4%
Typography
5Display / 32
500
H2 / 24
500
H3 / 18
500
Body / 16
400
Caps / 12
500
Spacing ramp
4 → 96Button states
4rest
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.
json · css · figma - 02
Type
Type scale
Variable fonts, type tokens, readability rules and language variants.
6 steps - 03
Components
Component library
Buttons, inputs, cards, tables — a11y-checked, with states and variants.
40+ specs - 04
Tooling
Engineering hand-off
Style Dictionary, Storybook, theming, dark/light, theme-switch.
storybook - 05
Docs
Documentation
Patterns, do/don't, migration guide, sample pages.
mdx - 06
Governance
Versioning
Semantic versioning, change-log, contribution model and reviews.
semver
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.
Booking calendar (Cal.com)
This area embeds the external service Cal.com. By loading it you agree that a connection to Cal.com is established and data may be transferred to the USA.