CURATED · OPEN · FREE

Mollie

Payments infrastructure for modern businesses

fintechpayments

↓ Download design system (19 MB)Open in OpenDesign

Visit: https://www.mollie.com

📦 Browse pack contents →

Identity DNA

paymentsEuropeangrowthB2Binfrastructure

A European Stripe that leads with scale and trust

Color

#D55A00Accent

#111111Ink

#FFFFFFBG

#F4F4F4BG quiet

#A6A6A6Muted

rgba(166,166,166,0.6)Line

High-contrast monochrome with strategic orange accents

Typography

geometric-sans · humanist-sans · monospace

display64px · 400
heading48px · 400
body16px · 400

Display typography uses tight tracking · Font weights range from 400 to 500 for hierarchy · Line heights are generous for readability

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Vertical rhythm based on 4px increments

Surfaces

sm · 4px

md · 8px

lg · 24px

pill · 999px

Subtle 1px borders using rgba(166,166,166,0.6)

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Full-width header and hero sections with constrained content areas

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0.0, 0.2, 1)easing

Subtle hover state transitions · Smooth page scrolling

Subtle color transitions on interactive elements · Immediate visual feedback via state changes

Components

button High-contrast primary (black background, white text) and subtle secondary (gray background)
card Large rounded image cards with generous padding and subtle shadows
chip Not visible in screenshots
input Simple underlined inputs
hero Large typography centered over full-width lifestyle imagery with overlayed UI cards

Voice & Don'ts

Tone Professional, trustworthy, and confident
Headlines Large, bold statements emphasizing scale and reliability
CTAs Direct and action-oriented (Get started, Contact sales)

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
Avoid: Jargon-heavy language
Avoid: Excessive exclamation points
Avoid: Overly casual tone

Inside the pack — real screenshots

Mollie — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko