# Mollie · Design system migration spec

> Source: https://www.mollie.com  ·  Curated by OpenDesign  ·  en

> Clean, professional execution that effectively communicates scale and trust through generous whitespace and confident typography.

## 1. Identity DNA

Mollie's design system is constructed like a modern European financial institution: its facade is the confident, monochrome certainty of infrastructure, while strategic orange accents function as the trusted signage that directs traffic. The visual language is not decorative; it is an engineered expression of payments infrastructure, built for businesses that require scale and reliability.

**One-liner:** Payments infrastructure for modern businesses
**Keywords:** payments · European · growth · B2B · infrastructure
**Analogy:** A European Stripe that leads with scale and trust

## 2. Color

The color system is a study in high-contrast restraint, where a minimalist monochrome base establishes a professional baseline and strategic orange accents provide essential navigational cues.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#F4F4F4` | quiet area |
| `--ink` | `#111111` | body text |
| `--muted` | `#A6A6A6` | placeholder |
| `--accent` | `#D55A00` | single accent |
| `--line` | `rgba(166,166,166,0.6)` | divider |

**Color principle:** High-contrast monochrome with strategic orange accents

The guiding principle is that color must serve clarity and hierarchy, never distraction.

## 3. Typography

The typographic voice pairs geometric sans-serif display fonts with generous line heights, creating a hierarchy that is both authoritative and readable. The scale is purpose-built for impactful hero statements and clear body text, with weights carefully constrained to a 400–500 range.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.05 | 400 | -1.5px | Hero headlines |
| heading | 48px | 1.1 | 400 | -1px | Section headlines |
| body | 16px | 1.5 | 400 | 0px | Primary text |

**Type rules:**
- Display typography uses tight tracking
- Font weights range from 400 to 500 for hierarchy
- Line heights are generous for readability

## 4. Spacing

The vertical rhythm is founded on a precise 4px increment system, ensuring consistent and harmonious spacing throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Vertical rhythm based on 4px increments

## 5. Surfaces

Surfaces are defined by subtle, layered depth rather than overt decoration, using a limited set of soft shadows and fine, semi-transparent borders to create a sense of layered information. The generous border-radius on cards and components softens the overall geometry.

- **Radius:** sm 4px · md 8px · lg 24px · pill 999px
- **Shadows:**
  - 0px 4px 8px 0px rgba(0, 0, 0, 0.08)
  - 0px 16px 32px 0px rgba(0, 0, 0, 0.08)
  - 0px 0px 1px 0px rgba(0, 0, 0, 0.15)
- **Borders:** Subtle 1px borders using rgba(166,166,166,0.6)

## 6. Layout

The layout skeleton employs full-width headers and hero sections that command attention, with content then constrained within a disciplined 1280px container. This structure creates a clear visual passage from broad, impactful imagery to focused, detailed information.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width header and hero sections with constrained content areas

## 7. Motion & Interaction

The motion philosophy prioritizes subtlety and immediate feedback, treating animation as a functional indicator rather than a spectacle. Transitions are kept smooth and consistent, with durations calibrated to feel responsive without lingering.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0.0, 0.2, 1)`
- **Patterns:**
  - Subtle hover state transitions
  - Smooth page scrolling

- **Hover:** Subtle color transitions on interactive elements
- **Click:** Immediate visual feedback via state changes
- **Transition:** Consistent 0.2s ease-in-out for standard transitions
- **Keyboard:** Standard focus indicators likely present

## 8. Voice & Don'ts

The editorial voice is professional, trustworthy, and direct, mirroring the confidence of the visual system. Headlines are bold statements of scale and reliability, while calls to action are clear and action-oriented, avoiding both corporate jargon and excessive informality.

- **Tone:** Professional, trustworthy, and confident
- **Headline style:** Large, bold statements emphasizing scale and reliability
- **CTA style:** Direct and action-oriented (Get started, Contact sales)
- **Avoid:** Jargon-heavy language / Excessive exclamation points / Overly casual tone

### Don'ts
- ❌ Don't use bright or neon colors — screenshot shows muted palette with black, white, and gray dominance
- ❌ Don't use decorative or serif display fonts — screenshot shows clean geometric sans-serif for headlines
- ❌ Don't clutter the layout with excessive elements — screenshot shows generous whitespace and focused content
- ❌ Don't use small, cramped typography — screenshot shows large, legible type with generous line heights
- ❌ Don't use sharp, rectangular corners on all elements — screenshot shows generous border-radius (up to 24px)
- ❌ Don't use thin, spindly buttons — screenshot shows solid, substantial primary buttons with clear contrast

The system deliberately rejects bright neon colors, decorative serif typography, and cramped, cluttered layouts in favor of a premium and restrained execution.

## System Prompt (paste into AI tool)

```
Mollie is a European payment processing platform designed for businesses of all sizes. The visual system uses a high-contrast monochrome palette (black, white, gray) with strategic orange accents for emphasis. Typography features geometric sans-serif display fonts with tight tracking for headlines and humanist sans-serif for body text. The layout emphasizes generous whitespace and large, impactful imagery. Critical design rules include: never use bright neon colors, maintain clean geometric typography, and ensure generous spacing between elements. The site positions itself as a trusted, professional infrastructure partner, requiring a premium and restrained visual approach.
```