The Flatpay design system

What this is for

The system documents how Flatpay's product surfaces are built — what fonts, tokens, and spacing scales they share, which UI components are sanctioned, and how to compose those components into the patterns our customers recognize. It's where designers, engineers, and AI agents like Claude Code go before adding something new.

New to @flatpay-dk/ui? Start at Getting started — four steps from pnpm install to a working component.

When to consult it

• Beforespinning up a new prototype — confirm a component already exists before building one from scratch.
• Duringimplementation — when a question of color, spacing, or copy comes up, this is the source of truth.
• Aftershipping — pattern pages explain how individual components fit together. Use them to QA flows, not just screens.

Three sections

Foundations are the smallest decisions every interface inherits. Components are the named pieces you assemble. Patterns are how those pieces solve a specific customer problem.

• 01 Foundations

  Foundations

  The decisions every component inherits — type, color, space, motion, and the brand assets that hold them together.

  19 written · 1 in progress · 0 pending

  20 pages total

  →

• 02 Content

  Content

  How Flatpay sounds — voice, grammar, formats, and the rules that keep eight markets reading the same product.

  5 written · 0 in progress · 0 pending

  5 pages total

  →

• 03 Components

  Components

  The interface vocabulary for portal.flatpay.com and every prototype that pulls from @flatpay-dk/ui.

  52 written · 0 in progress · 5 pending

  57 pages total

  →

• 04 Patterns

  Patterns

  How the system gets used in real product flows. Compositions, not components.

  1 written · 0 in progress · 3 pending

  4 pages total

  →

House rules

1. 01

   Copy is the chrome.

   Words first, layout second, ornament last. If a screen is hard to scan, fix the words first.

2. 02

   Restraint is the brand.

   Match Flatpay's instinct to remove rather than add. Underdesigned and over-considered, never the other way around.

3. 03

   Status as visual language.

   Pills and tags carry meaning. Color earns its place by communicating state, never by decorating.

4. 04

   Editorial pacing.

   Space breathes; headings command; body reads. Internal tooling can be beautiful without being busy.

5. 05

   Operational legibility.

   When something is data — a repo path, a command, a model name — set it in mono and align it tabularly.