---
title: "Mollie design system"
variant: extended
source: https://www.mollie.com/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/mollie-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Mollie · Design System

> Quietly confident payments, warmly presented.

**Theme:** light · **Industry:** fintech · **Source:** https://www.mollie.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Mollie pairs a crisp, white canvas and oversized typography with warm-toned payment imagery. Rounded calls to action, restrained orange accents, and alternating product-led sections make a complex financial platform feel approachable.

## North star

Keep the interface crisp and restrained, and let warm real-world payment imagery provide the emotional color.

## Overview

Mollie’s homepage balances a bright white canvas with warm, tactile product imagery. Black headlines and navigation provide strong contrast, while pale warm-neutral panels distinguish payment and account features without making the page feel segmented. Orange appears as a restrained signal in small links and visual details rather than a dominant interface colour; deep brown anchors the primary CTA and select dark media. Inter Variable gives headlines a clean, contemporary presence with tight tracking, while Adamina adds a subtle editorial contrast to body copy. IBM Plex Mono marks compact uppercase eyebrows, and Inter handles navigation and captions. The layout moves from a spacious, asymmetric hero into wide media, compact service links, softly rounded feature cards, customer stories, and a clear closing CTA. Images carry much of the warmth and personality, while the interface itself stays quiet, flat, and legible.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, open section backgrounds, and text on dark media. |
| Pure Ink | `#000000` | `--color-pure-ink` | neutral | Primary headlines, navigation, body text, and dark footer surface. |
| Quiet Silver | `#c4c4c4` | `--color-quiet-silver` | semantic | Measured hairline border colour, most visible in footer details. |
| Warm Porcelain | `#f7f4f1` | `--color-warm-porcelain` | surface | Soft feature-card and section backgrounds, including payment feature panels. |
| Terracotta Glow | `#d66733` | `--color-terracotta-glow` | accent | Warm radial glow within visual treatments; not a dominant UI fill. |
| Soft Graphite | `#808080` | `--color-soft-graphite` | neutral | Muted explanatory copy and secondary headings. |
| Near Black | `#121110` | `--color-near-black` | neutral | Secondary dark text and headings where pure black is softened. |
| Footer Ash | `#919191` | `--color-footer-ash` | neutral | Low-emphasis footer copy and cookie-policy link. |
| Roasted Umber | `#211006` | `--color-roasted-umber` | brand | Deep brown inverse surface and warm dark link treatments. |
| Warm Slate | `#595653` | `--color-warm-slate` | neutral | Subdued supporting text. |
| Espresso Shadow | `#1e0d01` | `--color-espresso-shadow` | surface | Very dark brown surface behind selected cards or media. |
| Mid Ash | `#666666` | `--color-mid-ash` | neutral | Secondary headline and body-copy tone. |
| Pale Divider | `#cccccc` | `--color-pale-divider` | neutral | Light supporting text and subtle low-contrast details. |
| Mollie Orange | `#e07122` | `--color-mollie-orange` | accent | Small orange text accents and link emphasis. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f4f1` (Warm Porcelain) · `--color-surface-2` → `#000000` (Pure Ink) · `--color-surface-3` → `#211006` (Roasted Umber) · `--color-surface-4` → `#1e0d01` (Espresso Shadow) · `--color-text` → `#000000` (Pure Ink) · `--color-text-muted` → `#808080` (Soft Graphite) · `--color-text-subtle` → `#121110` (Near Black) · `--color-border` → `#c4c4c4` (Quiet Silver) · `--color-accent` → `#d66733` (Terracotta Glow) · `--color-accent-2` → `#e07122` (Mollie Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f7f4f1` | 19.17:1 | AAA |
| `#000000` | `#211006` | 1.14:1 | fail |
| `#808080` | `#ffffff` | 3.95:1 | AA-large |
| `#808080` | `#f7f4f1` | 3.6:1 | AA-large |
| `#808080` | `#000000` | 5.32:1 | AA |
| `#808080` | `#211006` | 4.66:1 | AA |
| `#121110` | `#ffffff` | 18.86:1 | AAA |
| `#121110` | `#f7f4f1` | 17.21:1 | AAA |
| `#121110` | `#000000` | 1.11:1 | fail |

### Gradients

- `radial-gradient(circle, rgb(214, 103, 51) 0%, rgba(0, 0, 0, 0) 70%)`
- `linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%)`
- `linear-gradient(rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 100%)`
- `linear-gradient(45deg, rgb(6, 11, 14) 0%, rgb(37, 71, 100) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-inter` | webfont | 400, 500, 600 | Navigation, captions, and compact interface text. | Inter |
| Inter Variable | `--font-display` | webfont | 400, 500, 600, 700 | Display headlines and major section headings. | Inter |
| Adamina | `--font-body` | webfont | 400 | Editorial body copy. | Lora |
| IBM Plex Mono | `--font-mono` | webfont | 500, 400 | Uppercase eyebrow labels and compact technical markers. | IBM Plex Mono |

- **Inter:** Mostly regular to medium; compact tracking, with a clear, restrained UI voice.
- **Inter Variable:** Regular-weight display with tight negative tracking; large titles stay clean and unforced.
- **Adamina:** Regular serif provides quiet contrast to the sans-serif interface and large headlines.
- **IBM Plex Mono:** Medium-weight uppercase labels with generous tracking, used sparingly.

### Type scale — Custom (ratio ≈ 1.724, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 82px | 400 | 1 | -0.029em | — | Inter Variable | Oversized hero headline and prominent display statements. |
| h1 | 56px | 400 | 1.1 | -0.02em | — | Inter Variable | Primary page headline and major feature titles. |
| h2 | 32px | 400 | 1.2 | -0.02em | — | Inter Variable | Section titles and secondary feature headings. |
| body | 16px | 400 | 1.3 | -0.006em | — | Adamina | Editorial explanatory and supporting paragraphs. |
| caption | 13px | 400 | 1.3 | -0.025em | — | Inter | Small labels and supporting image or interface captions. |
| nav | 14px | 500 | 1.3 | -0.023em | — | Inter | Header navigation and other compact navigation links. |
| eyebrow | 11px | 500 | 1.3 | 0.03em | uppercase | IBM Plex Mono | Uppercase section labels above key headings. |
| code | 11px | 500 | 1.3 | 0.03em | uppercase | IBM Plex Mono | Compact uppercase technical-style labels where needed. |

OpenType features in use: `"cv08", "cv12", "cv13", "ss03"`, `"cv08", "cv10", "cv12", "cv13", "dlig"`, `"cv12", "cv13", "ss03"`, `"cv12", "cv13"`.

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 1, 2, 3, 4, 6, 8, 9, 10, 12, 16, 20, 22, 24, 40, 49 px.
- Section rhythm 40px · element gap 10px · card padding 10px · max content width 1320px.

Use a centered, wide page frame, with the measured maximum width of 1320px, and generous side breathing room. The hero is asymmetric: a large left-aligned headline balances a smaller copy-and-actions column. Follow with broad media, compact link rows, and softly rounded cards arranged in varied-width grids. Alternate full-width warm panels with white sections; keep headings left-aligned or centered according to block purpose. Section transitions feel spacious, while local link lists and footer navigation remain compact.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `24px` · nav `9999px` · link `16px` · xs `2px` · sm `3px` · md `4px` · lg `5px` · xl `8px` · 2xl `9px` · pill `9999px`
- Shadow `hairline` (other): `rgb(245, 242, 240) 0px 0px 0px 1px`
- Shadow `inset` (other): `rgba(255, 255, 255, 0.17) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.18) 0px -1px 0px 0px inset, rgba(255, 255, 255, 0.13) -1px 0px 0px 0px inset, rgba(255, 255, 255, 0.13) 1px 0px 0px 0px inset`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) -25px 50px 42px 0px`
- Shadow `inset-2` (button): `rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset`
- Shadow `inset-3` (link): `rgba(255, 255, 255, 0.17) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.18) 0px -1px 0px 0px inset, rgba(255, 255, 255, 0.13) 1px 0px 0px 0px inset, rgba(255, 255, 255, 0.13) -1px 0px 0px 0px inset`
- Shadow `inset-4` (other): `rgba(0, 0, 0, 0.05) 0px 0.71px 15.8656px 0px, rgba(0, 0, 0, 0.02) 0px 0.36px 0px 0.36px, rgba(0, 0, 0, 0.04) 0px 0px 63.4624px 0px, rgb(255, 255, 255) 0px 0px 0px 0.36px inset`
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The design is mostly flat, relying on white space and warm surface bands rather than prominent shadows. Cards use softly rounded corners and restrained boundaries. Dark media and product mockups create depth through photography and contrast; subtle inset highlights appear on selected controls, while hairlines stay quiet and sparse.

## Imagery

Use large, rounded lifestyle and product photography showing payment in context: phones, terminals, cards, laptops, and real businesses. Warm natural light, rich browns, and subdued backgrounds echo the page’s neutral palette. Mix wide video-like hero media with cropped product panels, UI mockups, and customer-story imagery. Keep interface overlays legible and minimal; imagery, rather than decorative graphics, supplies most of the visual energy.

## Components

### Header navigation

A light, uncluttered row with a compact wordmark, black Inter links, and a dark brown pill-shaped sign-up action.

### Hero statement

Uppercase IBM Plex Mono eyebrow above an oversized, tightly tracked Inter Variable headline; supporting copy and paired actions sit in a separate column.

### Primary action

Rounded deep-brown CTA with white text and a subtle inset highlight; pair with a pale warm-neutral secondary action.

### Media hero

Wide, rounded photographic or video frame featuring payment in use, with restrained floating status labels where appropriate.

### Feature cards

Warm Porcelain (#f7f4f1) panels with rounded corners, compact mono labels, black headings, and prominent payment or terminal imagery.

### Footer directory

Dense multi-column link groups on a dark surface, with subdued grey secondary text and subtle dividers.

### Measured component styles

- **Primary button** (“Get started now”): background #3b281d · text #0000ee · radius 140px · padding 16px 24px · 400 12px sans-serif · shadow rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset
- **Secondary button** (“Contact sales”): background #f7f4f2 · text #0000ee · radius 142px · padding 16px 24px · 400 12px sans-serif
- **Link** (“Learn more about our customers”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Card** (“ONLINE PAYMENTS Accept 38 payment method”): background #f7f4f1 · text #000000 · radius 16px · padding 40px 0px 0px 0px · 400 12px sans-serif
- **Navigation item** (“Products Partners Resources Customers Pr”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use white as the dominant canvas.
- Set major headlines in Inter Variable with tight tracking.
- Reserve IBM Plex Mono for compact uppercase eyebrows.
- Use Warm Porcelain for selected feature panels.
- Make the primary CTA a deep-brown rounded pill.
- Let warm product photography carry the visual character.

## Don't

- Do not make orange the dominant interface colour.
- Do not crowd the hero headline with supporting copy.
- Do not add heavy shadows to every card.
- Do not use decorative gradients as a substitute for product imagery.
- Do not make every section a uniform card grid.
- Do not use all-caps for long headlines or body copy.

## Agent prompt

Build a new fintech page in Mollie’s restrained, warm editorial style. Use Gallery White (#ffffff) as the main canvas, Pure Ink (#000000) for primary text, and Warm Porcelain (#f7f4f1) for selected feature panels. Keep Terracotta Glow (#d66733) and Mollie Orange (#e07122) as small accents; use Roasted Umber (#211006) for a prominent pill-shaped CTA. Set display headlines in Inter Variable with tight tracking, body copy in Adamina, and compact uppercase eyebrows in IBM Plex Mono. Compose a spacious, asymmetric introduction followed by broad product imagery and varied feature blocks. Use rounded media and cards, minimal elevation, quiet borders, and real-world payment photography in warm natural light. Preserve clear hierarchy and generous breathing room; avoid loud gradients, dense decoration, and generic repeated card grids.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Wide white footer region with five aligned link columns and a left-aligned hierarchy. | Grouped site links, Social links, Language selector, Legal links | Compact column grid, Small uppercase labels, Muted secondary text, Sparse dividers |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/mollie-com