Design System
Eine Quelle für Brand, Design und Code.
Wir bauen Design Systeme, die Engineering und Marketing auf dieselbe Sprache verpflichten — Tokens, Komponenten, dokumentiert und versioniert.
Anatomie
Tokens, Type, Spacing, Komponenten — alles ein zusammenhängendes Werk.
Jeder Layer hat seine Verantwortung: Tokens definieren die Grundlage, Komponenten bauen darauf auf, die Dokumentation schließt den Kreis.
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
Lieferumfang
Was Sie bekommen.
Sechs Bestandteile, die ein Design System produktiv machen — keine "Inspiration", sondern Engineering-fähige Artefakte.
- 01
Tokens
Design Tokens
Color, Typo, Spacing, Radius, Shadow — als JSON, CSS-Variablen, Figma-Variablen.
json · css · figma - 02
Type
Type-Scale
Variable Fonts, Type-Token, Lesbarkeitsregeln und Sprachvarianten.
6 stufen - 03
Komponenten
Komponentenbibliothek
Buttons, Inputs, Cards, Tables — A11y-geprüft, mit Zuständen und Varianten.
40+ specs - 04
Tooling
Engineering-Hand-off
Style Dictionary, Storybook, Theming, Dark/Light, Theme-Switch.
storybook - 05
Docs
Dokumentation
Patterns, Do/Don't, Migrationsleitfaden, Beispielseiten.
mdx - 06
Governance
Versionierung
Semantic Versioning, Change-Log, Beitragsmodell und Reviews.
semver
In Zahlen
Das ist hafencity.dev
15+ Experten
Entwickler, Designer und Strategen aus unserem Hamburger HQ — eingespielt als ein Team.
50+ Kunden
Unternehmen aus Consumer, Healthcare und B2B vertrauen uns ihre digitalen Produkte an. Langfristige Partnerschaften sind die Regel, nicht die Ausnahme.
97% Weiterempfehlung
Wiederkehrende Engagements und Referenzen, die unsere Kunden tatsächlich anrufen. Vertrauen wächst, wenn Lieferung stimmt.
50+ Launches
Maßgeschneiderte Mobile- und Web-Produkte vom Konzept bis zur Wartung — Ende-zu-Ende verantwortet von unserem Team.
100% In-House
Strategie, Design und Entwicklung aus unserem Hamburger HQ. Ein Team, eine Projektleitung, Ihnen gegenüber verantwortlich von Kickoff bis Launch.
Seit 2023
Wir begleiten Unternehmen bei ihren digitalen Produkten — und wachsen mit den Teams, mit denen wir arbeiten.
Nächste Schritte
Lassen Sie uns über Ihr Projekt sprechen
30-minütiges Erstgespräch. Wir besprechen Ihre Ziele, klären offene Fragen und skizzieren den möglichen Projektablauf.
Buchungskalender (Cal.com)
Dieser Bereich bindet den externen Dienst Cal.com ein. Mit dem Laden stimmen Sie zu, dass eine Verbindung zu Cal.com hergestellt und dabei Daten in die USA übertragen werden können.