Skip to content
Contact
Issue №01 — Hamburg

Cover · Hafencity

Design that holds up.

We design products that survive contact with reality — researched, tested, documented in detail, and tightly coupled to your engineering constraints.

Six disciplines · One design language · One Hamburg team
Start a design conversation

Disciplines

Six disciplines — one continuous trace.

Each discipline carries its own depth in the studio. Click through — the stage shows the live work.

Auto-cycling
Active01 / 06
Settings / Notifications
2 of 4

Notification channels

Choose how we reach you when something needs your attention.

EmailDaily digest
Mobile pushReal-time alerts
In-app bannerCritical only
⌘S
CancelSave changes

Toggle · states

off
on
focus

IA

  • · Settings
  • · Account
  • · Notifications ●
  • · Privacy

Specs

type13 / 18radius6pxmotion220mseaseout-quart

UX/UI Design

Research, information architecture and visual interface — designed straight from the use case.

See UX/UI

Design language

We work in systems, not in screens.

Color, type, spacing, radius — every primitive is a token with a name and a value. Hover to read it.

Hover for token value

Color

—

Type

DisplayEight pt grid2.25rem
H2Write specifically1.5rem
BodyReadability is the product1rem
CaptionDocumented · v1.00.75rem
—

Spacing

—

Radius

—

Anatomy

One component — pulled apart in plain sight.

Every property of a button — radius, padding, weight, states — exposed as a live playground. Move the sliders.

radius10pxpadding12 20weight500stateDefault

Weight

States

Padding ⇕ vertical · ⇔ horizontal · Radius measured at edge · 8 · 16 · 24 px grid

How we work

From brief to release — in documented steps.

Every phase has a clear target state, a tangible artifact, and a stakeholder sign-off. No hand-offs into the void.

No.Phase
  1. 01
    DiscoveryStakeholder brief, research plan, risk list

    Discovery

    stakeholders · 6

    • · Goals & guardrails
    • · Constraints (tech, time)
    • · Success metrics
  2. 02
    StrategyPersonas, customer journey, design principles

    Strategy

    journey

    DiscoverSign upSet upUseRenew
    Persona
    Principles
    Pillars
  3. 03
    UX conceptIA, user flows, low-fi wireframes

    UX concept

  4. 04
    UI designHigh-fi mockups, components, style spec

    UI design

    AccountSave
  5. 05
    Prototype & testClickable prototype, test report, iterations

    Prototype & test

    tasks · 4 / 5 done

  6. 06
    Hand-offDesign tokens, engineering specs, a11y report

    Hand-off

    tokens.json{ "color.accent": "#B0FE93" }
    A11y
    Specs
    Assets

Live audit

Check contrast — instantly, in your browser.

Pick a foreground and background, read the ratio, watch WCAG AA and AAA flip in real time. A tool, not marketing.

Presets

Sample

Reading is a load-bearing task.

Pick a foreground and background, read the ratio, watch WCAG AA and AAA flip in real time. A tool, not marketing.

Ratio

19.30:1

Body text

AAA

Large text

AAA

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