---
name: Mollie
description: "Clean, professional execution that effectively communicates scale and trust through generous whitespace and confident typography."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#111111"
  tertiary: "#D55A00"
  neutral: "#A6A6A6"
  bg-quiet: "#F4F4F4"
  line: "rgba(166,166,166,0.6)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 64px
    lineHeight: 1.05
    fontWeight: 400
    letterSpacing: "-1.5px"
  heading:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 24px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Payments infrastructure for modern businesses

*A European Stripe that leads with scale and trust*

## Colors

High-contrast monochrome with strategic orange accents

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#111111`)** — uses `ink` token
- **Accent (`#D55A00`)** — uses `accent` token
- **Muted (`#A6A6A6`)** — uses `muted` token
- **Borders (`rgba(166,166,166,0.6)`)** — uses `line` token

## Typography

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

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

## Layout

Full-width header and hero sections with constrained content areas

*Rhythm:* Vertical rhythm based on 4px increments

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 24px
- `pill`: 999px

## 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

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```