Mollie Payments UX/UI Design and Copywrinting Examples

Stack

Mollie's marketing site (mollie.com) is built on Framer (generator tag: Framer 375af7e). The product dashboard and design system (Mollie UI) is a separate cross-platform system delivered via Figma (design) and Storybook (code). No custom framework or build toolchain is exposed on the public site.

Typography

Three typefaces form the type system:

Inter — primary UI and marketing sans-serif. Used for all headings, body copy, navigation, and UI labels across both the marketing site and the product dashboard.
Fragment Mono — monospaced accent face used for data displays, code snippets, and numeric readouts (e.g. transaction amounts, dashboard figures).
IBM Plex Mono — secondary monospaced face, used alongside Fragment Mono in developer-facing and code contexts.

The type scale follows a clear hierarchy: large display headings (~56–72px) for hero sections, H2 section titles (~32–40px), H3 subsection headers (~22–28px), body text (~16–18px), small labels and captions (~12–14px). Line heights are generous (~1.4–1.6) to support multilingual content across 25+ European languages.

Color Philosophy

Mollie uses a high-contrast, minimal palette anchored in black, white, and a signature electric blue. The current logo and primary brand color is #0092FF (Copper Sulphate blue), supported by pure black (#000000) and white (#FFFFFF). Historical brand references include coral red (#EC4534) and muted steel blue (#C6D6DF), which may still appear in legacy materials. The philosophy emphasises trust and clarity for a fintech audience: a dominant neutral base (dark/light backgrounds) with the blue used sparingly as an action and accent color. Both light and dark themes are fully supported in Mollie UI with per-theme token libraries.

Spacing

Spacing is token-driven with a renamed scale (the naming convention was revised during Mollie UI development). The system uses a base-4 or base-8 grid. Common spacing values inferred from the Framer layout and component matrix: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 80px, 96px. Section padding on the marketing site is large (64–96px vertical), reflecting the editorial Framer aesthetic.

Component Defaults

Mollie UI shipped 46 components at v1, covering inputs, buttons, pills, tables, toasts, segment controls, checkboxes, radios, and detail lists. All components follow a strict definition of done:

States: Default, Hover, Keyboard focus, Active, Pressed, Disabled
Themes: Light and Dark
Screen sizes: Large (desktop/web) and Small (mobile/touch)
Input methods: Mouse, Keyboard, Touch
Accessibility: WCAG 2.1 Level AA compliant
Availability: Figma (design) + Storybook (code)

Buttons use clear visual hierarchy: primary (filled, brand blue), secondary (outlined), and ghost/text variants. Border radius is moderate and consistent across interactive elements.

Layout

The marketing site uses a full-width editorial layout typical of Framer sites: wide hero sections, constrained content columns (max ~1200px), generous vertical rhythm, and sticky navigation. The product dashboard uses a sidebar + content area layout with left-rail navigation (Home, Notifications, Products, Sales, Payment Links, POS, Business Accounts, Cards, Invoicing, Capital, Reports, Acceptance & Risk, Connect, Help, Developers). Responsive breakpoints adapt to mobile with collapsed navigation. Grid is 12-column on desktop, collapsing to single-column on mobile.

/\* ============================================================
   Mollie Design System — CSS Custom Properties
   Derived from: mollie.com (Framer), Mollie UI design system,
   brand color sources, and official documentation.
   Confidence: HIGH for colors/fonts; MEDIUM for spacing/radius
   (inferred from visual analysis; no public :root exposed)
   ============================================================ \*/

:root {
  /_ --- Brand Colors --- _/
  --color-brand-blue:        #0092FF;   /_ Primary brand / Copper Sulphate _/
  --color-brand-blue-dark:   #006FCC;   /_ Hover / pressed state _/
  --color-brand-blue-light:  #CCE8FF;   /_ Tint / background accent _/
  --color-brand-black:       #000000;   /_ Logo black _/
  --color-brand-white:       #FFFFFF;   /_ Pure white _/

  /_ --- Legacy / Secondary Brand --- _/
  --color-legacy-coral:      #EC4534;   /_ Former primary red-coral _/
  --color-legacy-steel:      #C6D6DF;   /_ Former light blue-grey _/

  /_ --- Semantic: Light Theme (default) --- _/
  --color-background:        #FFFFFF;
  --color-background-subtle: #F5F6F8;   /_ Subtle section backgrounds _/
  --color-background-muted:  #EAECF0;
  --color-surface:           #FFFFFF;
  --color-surface-raised:    #F9FAFB;
  --color-border:            #DDE1E7;
  --color-border-focus:      #0092FF;

  /_ --- Text --- _/
  --color-text-primary:      #0A0B0D;   /_ Near-black for body _/
  --color-text-secondary:    #4A5568;   /_ Secondary / muted labels _/
  --color-text-tertiary:     #718096;   /_ Placeholders, captions _/
  --color-text-on-brand:     #FFFFFF;   /_ Text on blue backgrounds _/
  --color-text-disabled:     #A0AEC0;

  /_ --- State Colors --- _/
  --color-success:           #16A34A;
  --color-success-bg:        #DCFCE7;
  --color-warning:           #D97706;
  --color-warning-bg:        #FEF3C7;
  --color-error:             #DC2626;
  --color-error-bg:          #FEE2E2;
  --color-info:              #0092FF;
  --color-info-bg:           #CCE8FF;

  /_ --- Typography --- _/
  --font-family-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono:        'Fragment Mono', 'IBM Plex Mono', 'Fira Code', monospace;

  --font-size-xs:            12px;
  --font-size-sm:            14px;
  --font-size-base:          16px;
  --font-size-lg:            18px;
  --font-size-xl:            22px;
  --font-size-2xl:           28px;
  --font-size-3xl:           36px;
  --font-size-4xl:           48px;
  --font-size-5xl:           64px;

  --font-weight-regular:     400;
  --font-weight-medium:      500;
  --font-weight-semibold:    600;
  --font-weight-bold:        700;

  --line-height-tight:       1.2;
  --line-height-snug:        1.35;
  --line-height-normal:      1.5;
  --line-height-relaxed:     1.625;

  --letter-spacing-tight:    -0.02em;
  --letter-spacing-normal:   0em;
  --letter-spacing-wide:     0.02em;
  --letter-spacing-wider:    0.05em;

  /_ --- Spacing (base-8 scale) --- _/
  --space-0:    0px;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;

  /_ --- Border Radius --- _/
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;   /_ Pills, badges, avatar rings _/

  /_ --- Shadows --- _/
  --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);

  /_ --- Z-Index Scale --- _/
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;

  /_ --- Transitions --- _/
  --duration-fast:   100ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;
  --easing-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in:       cubic-bezier(0.4, 0, 1, 1);
  --easing-out:      cubic-bezier(0, 0, 0.2, 1);

  /_ --- Layout --- _/
  --max-width-content: 1200px;
  --max-width-narrow:  720px;
  --max-width-wide:    1440px;
  --sidebar-width:     240px;
}

/\* ============================================================
   Dark Mode Overrides
   Mollie UI explicitly ships dark theme token libraries
   ============================================================ \*/
@media (prefers-color-scheme: dark) {
  :root {
    --color-background:        #0A0B0D;
    --color-background-subtle: #111318;
    --color-background-muted:  #1A1D24;
    --color-surface:           #111318;
    --color-surface-raised:    #1A1D24;
    --color-border:            #2D3240;
    --color-border-focus:      #0092FF;

    --color-text-primary:      #F0F2F5;
    --color-text-secondary:    #9AA5B4;
    --color-text-tertiary:     #6B7A8D;
    --color-text-disabled:     #4A5568;

    --color-success-bg:        #052E16;
    --color-warning-bg:        #1A1200;
    --color-error-bg:          #1A0000;
    --color-info-bg:           #001F3D;

    --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.40);
    --shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.50), 0 1px 2px -1px rgba(0, 0, 0, 0.40);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.50), 0 2px 4px -2px rgba(0, 0, 0, 0.40);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.50), 0 4px 6px -4px rgba(0, 0, 0, 0.40);
  }
}

/_ Explicit dark class override (Mollie UI theme switching) _/
[data-theme="dark"] {
  --color-background:        #0A0B0D;
  --color-background-subtle: #111318;
  --color-surface:           #111318;
  --color-surface-raised:    #1A1D24;
  --color-border:            #2D3240;
  --color-text-primary:      #F0F2F5;
  --color-text-secondary:    #9AA5B4;
}

Color Tokens

Token	Value	Usage
`color.brand.blue`	#0092FF	Primary CTA buttons, links, focus rings, brand accent
`color.brand.blue.dark`	#006FCC	Hover/pressed state for primary actions
`color.brand.blue.light`	#CCE8FF	Info backgrounds, badge fills, tinted surfaces
`color.brand.black`	#000000	Logo, high-emphasis text on light backgrounds
`color.brand.white`	#FFFFFF	Page backgrounds, text on dark/brand surfaces
`color.text.primary`	#0A0B0D	Body copy, headings (light mode)
`color.text.secondary`	#4A5568	Labels, meta information, secondary copy
`color.text.tertiary`	#718096	Placeholders, captions, disabled text hints
`color.background.default`	#FFFFFF	Primary page/panel background
`color.background.subtle`	#F5F6F8	Alternating rows, section backgrounds
`color.border.default`	#DDE1E7	Input borders, dividers, card outlines
`color.success`	#16A34A	Success states, "Paid" status badges
`color.error`	#DC2626	Validation errors, failed payment indicators
`color.warning`	#D97706	Warning alerts, pending states
`color.legacy.coral`	#EC4534	Legacy brand red (historical only, avoid in new UI)

Spacing Tokens

Token	Value	Usage
`space.1`	4px	Inline icon gaps, tight internal padding
`space.2`	8px	Chip/badge padding, small component gaps
`space.3`	12px	Input padding (vertical), compact list rows
`space.4`	16px	Default component padding, card padding (sm)
`space.6`	24px	Card padding (md), section internal gaps
`space.8`	32px	Card padding (lg), between-component gaps
`space.12`	48px	Section top/bottom padding (compact)
`space.16`	64px	Section padding (standard), hero content gap
`space.20`	80px	Large section separation
`space.24`	96px	Marketing hero vertical padding

Typography Tokens

Token	Value	Usage
`font.family.sans`	Inter, system-ui, sans-serif	All UI text, headings, body copy, nav
`font.family.mono`	Fragment Mono, IBM Plex Mono, monospace	Amounts, transaction IDs, code snippets
`font.size.xs`	12px	Captions, legal fine print, badge text
`font.size.sm`	14px	Secondary labels, table data, helper text
`font.size.base`	16px	Primary body copy
`font.size.lg`	18px	Lead text, intro paragraphs
`font.size.xl`	22px	H3 / subsection headings
`font.size.2xl`	28px	H2 / section headings
`font.size.4xl`	48px	H1 / page titles
`font.size.5xl`	64px	Hero display headings
`font.weight.regular`	400	Body text
`font.weight.medium`	500	Nav items, secondary labels
`font.weight.semibold`	600	Subheadings, button labels
`font.weight.bold`	700	H1/H2 headings, emphasis
`line-height.normal`	1.5	Body paragraphs
`line-height.tight`	1.2	Display/hero headings

Border Radius Tokens

Token	Value	Usage
`radius.sm`	4px	Inline tags, small badges, input fields
`radius.md`	8px	Buttons, dropdowns, form elements
`radius.lg`	12px	Cards, panels, modals
`radius.xl`	16px	Large cards, promotional blocks
`radius.2xl`	24px	Feature cards on marketing site
`radius.full`	9999px	Pills, avatar rings, status dots, chip badges

Shadow Tokens

Token	Value	Usage
`shadow.xs`	0 1px 2px rgba(0,0,0,0.05)	Subtle lift on inputs, inline badges
`shadow.sm`	0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)	Cards at rest, dropdowns
`shadow.md`	0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)	Hovered cards, popovers
`shadow.lg`	0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)	Modals, drawers, focused panels
`shadow.xl`	0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)	Floating action sheets, tooltips

Framework & Tooling: The mollie.com marketing site is built with Framer (confirmed via meta-generator: Framer 375af7e), which means all layout, animation, and component composition is managed within Framer's visual editor. The product UI (dashboard, checkout components) is a separate system called Mollie UI — a cross-platform design system with delivery in Figma and Storybook. No public npm package or open-source repo for Mollie UI has been identified.

Theme Support: Mollie UI explicitly supports light and dark themes, with token libraries separated by theme in Figma. All 46 components at v1 are verified across both themes. Theme switching is attribute-based (data-theme) in the product, with prefers-color-scheme as the OS-level fallback.

Data Confidence:

HIGH — Typography (Inter, Fragment Mono, IBM Plex Mono): confirmed via multiple sources including web search, Mollie team publication on Medium, and visual inspection of the site.
HIGH — Framework (Framer): confirmed from meta-generator tag in the page HTML.
HIGH — Primary brand blue #0092FF: confirmed from SchemeColor logo palette extraction.
HIGH — Design system structure (46 components, Figma + Storybook, light/dark, WCAG 2.1 AA): confirmed from Mollie's own Medium publication by their Design Systems lead.
MEDIUM — Exact spacing scale, border radius values, shadow values: inferred from visual analysis of the Framer-rendered site and common design system conventions. No public token file was available.
LOW — Exact dark mode hex values for background/surface tokens: derived from visual estimation; Mollie has not published their internal token spec publicly.

Notable Patterns:

Dual-system architecture: Marketing (Framer, editorial) and product (Mollie UI, component-driven) are maintained as separate systems with shared brand tokens but different toolchains.
Monospaced numerics: Financial data (balances, transaction amounts, chart axes) consistently uses monospaced type (Fragment Mono) for tabular alignment and readability at-a-glance.
Motion & brand shapes: Mollie's motion design concept uses two primary geometric shapes — a circle and a square — that converge dynamically to express transparency and simplification. This shape language appears in UI illustrations and marketing animations.
Accessibility-first: Every Mollie UI component is built to WCAG 2.1 Level AA. Color contrast ratios, keyboard navigation, and focus states are part of the definition of done.
Status color semantics: Payment statuses (Paid, Pending, Failed) are colour-coded with semantic green/amber/red tokens, prominent in dashboard tables and transaction lists.
Multilingual by design: With 25+ language variants, the type system and layout use generous line heights and flexible containers to accommodate text expansion in languages like German and Polish.
Storybook as source of truth: Component implementation is validated in Storybook before release. The final review phase requires all stakeholders to test implemented components directly in Storybook.