CURATED · OPEN · FREE

Qonto

A comprehensive business finance platform offering accounts, tools, and AI-powered management.

fintechsaas

↓ Download design system (25 MB)Open in OpenDesign

Visit: https://qonto.com

📦 Browse pack contents →

Identity DNA

business accountfinance managementcompany creationAI agentstrust

A premium fintech platform combining modern banking with AI-driven financial automation for businesses.

Color

#FFFFFFInk

#626262Ink soft

#050505BG

#1A1A1ABG soft

#CCCCCCMuted

rgba(204,204,204,1.0)Line

High-contrast monochrome palette with near-black backgrounds and pure white text for premium feel.

Typography

geometric-sans

display56px · 700
h248px · 700
body-lg18px · 400
body16px · 400
caption14px · 400
overline12px · 400

Display text uses tight negative letter-spacing (-1px) for impact · Body text maintains generous line-height (1.5) for readability · All text uses geometric sans-serif category for modern consistency

Spacing

4px

8px

12px

16px

24px

32px

48px

56px

64px

80px

96px

consistent 4px base with spacing multiples of 4, 8, 12, 16, 24 for component density

Surfaces

sm · 4px

md · 8px

lg · 24px

pill · 33554432px

1px solid borders using rgb(204,204,204) for muted dividers and rgb(255,255,255) for interactive elements

0px 0px 20px 0px rgba(255,255,255,0.08) · 1px 0px 10px 2px rgba(0,0,0,0.1)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

12-column grid with generous white space and large hero sections that dominate viewport

Motion & Interaction

200msmicro

300mssmall

500msmedium

cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

background-size transitions for image reveals · width animations for loading states · smooth transform animations for interactive elements

Subtle background color transitions with 0.5s ease-out timing · Immediate visual feedback with transform states

Components

button High-contrast buttons with 24px border-radius, white background on dark, and black background on light sections
card Large rounded containers (24px radius) with subtle shadows for feature sections
chip Small rounded tags with 12px radius for labels and badges
input Clean input fields with 1px borders and rounded corners
hero Full-viewport hero sections with large typography (56px) and product photography

Voice & Don'ts

Tone Professional, confident, and straightforward with direct value propositions
Headlines Short, punchy statements ending with periods for emphasis (e.g., 'Business account.')
CTAs Action-oriented with clear verbs (e.g., 'Open an account', 'Find the right plan')

don't use colorful gradients — screenshot shows solid black backgrounds with white text
don't add excessive animations — screenshot shows subtle transitions and static layouts
don't use decorative fonts — screenshot uses clean geometric sans-serif throughout
don't overcrowd the layout — screenshot maintains generous padding (56px) and spacing
don't use small text for headlines — screenshot uses 56px display type for hero sections
don't mix multiple accent colors — screenshot maintains strict black/white/gray palette
Avoid: avoid excessive exclamation points — screenshot shows calm, period-terminated statements
Avoid: avoid complex financial jargon — screenshot uses plain business language
Avoid: avoid overwhelming feature lists — screenshot presents one clear value per section
Avoid: avoid cluttered interfaces — screenshot maintains generous whitespace
Avoid: avoid flashy colors — screenshot uses restrained monochrome palette
Avoid: avoid casual language — screenshot maintains professional tone throughout

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a premium fintech SaaS platform for business finance management. The design DNA uses a high-contrast monochrome palette with near-black backgrounds (#050505, #1A1A1A) and pure white text (#FFFFFF) for premium positioning. Typography employs geometric sans-serif categories with tight letter-spacing on headlines and generous line-height for body text. Key hex colors include #050505 for backgrounds, #FFFFFF for primary text, and #CCCCCC for muted elements. The layout uses 12-column grid with 24px gutters and large hero sections (56px headlines). Critical donts: avoid colorful gradients, excessive animations, and decorative fonts. Maintain the restrained, confident tone with period-terminated headlines and generous whitespace throughout all components.

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