Zum Inhalt springen
Kontakt

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.

System-Anfrage starten

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.

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

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.

  • 02

    Type

    Type-Scale

    Variable Fonts, Type-Token, Lesbarkeitsregeln und Sprachvarianten.

  • 03

    Komponenten

    Komponentenbibliothek

    Buttons, Inputs, Cards, Tables — A11y-geprüft, mit Zuständen und Varianten.

  • 04

    Tooling

    Engineering-Hand-off

    Style Dictionary, Storybook, Theming, Dark/Light, Theme-Switch.

  • 05

    Docs

    Dokumentation

    Patterns, Do/Don't, Migrationsleitfaden, Beispielseiten.

  • 06

    Governance

    Versionierung

    Semantic Versioning, Change-Log, Beitragsmodell und Reviews.

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.

Termin buchen