# Qonto · Design system migration spec

> Source: https://qonto.com  ·  Curated by OpenDesign  ·  en

> This site exemplifies premium fintech design through its confident monospace palette, direct copywriting style, and AI-focused features that modernize traditional business banking.

## 1. Identity DNA

Qonto's design system is built on the principle of institutional trust, using a high-contrast monochrome palette to establish a premium, authoritative presence. Like a well-constructed vault, the system prioritizes clarity and restraint, using pure white type against near-black fields to signal security and sophistication for modern business finance.

**One-liner:** A comprehensive business finance platform offering accounts, tools, and AI-powered management.
**Keywords:** business account · finance management · company creation · AI agents · trust
**Analogy:** A premium fintech platform combining modern banking with AI-driven financial automation for businesses.

## 2. Color

The color system is a study in high-contrast monochrome, built on near-black backgrounds and pure white text. This binary foundation eliminates chromatic distraction, directing all focus to content and hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#050505` | main background |
| `--bg-soft` | `#1A1A1A` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#626262` | secondary text |
| `--muted` | `#CCCCCC` | placeholder |
| `--muted-soft` | `#C9C9C9` | weak hint |
| `--line` | `rgba(204,204,204,1.0)` | divider |

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

The strict black, white, and gray palette is a deliberate choice to reinforce the platform's premium, professional positioning without the need for decorative color.

## 3. Typography

Typography is handled through a unified geometric sans-serif category, creating a clean, modern voice across all interfaces. Display headlines are set with tight negative letter-spacing for impact, while body copy maintains a generous 1.5 line-height to ensure sustained readability.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1px | hero headlines |
| h2 | 48px | 1.1 | 700 | -0.5px | section headlines |
| body-lg | 18px | 1.5 | 400 | 0px | primary body text |
| body | 16px | 1.375 | 400 | 0px | secondary body text |
| caption | 14px | 1.57 | 400 | 0px | captions and labels |
| overline | 12px | 1.5 | 400 | 0px | overlines and badges |

**Type rules:**
- 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

## 4. Spacing

A consistent 4px base grid establishes the rhythmic foundation, with spacing multiples of 4, 8, 12, 16, and 24 pixels creating a predictable, harmonious density across all components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 56 / 64 / 80 / 96 px
- **Rhythm:** consistent 4px base with spacing multiples of 4, 8, 12, 16, 24 for component density

## 5. Surfaces

Surfaces are defined by subtle, light-based effects rather than heavy shadows. Muted 1px borders and soft white glows or faint black shadows provide just enough depth to separate content layers without visual weight.

- **Radius:** sm 4px · md 8px · lg 24px · pill 33554432px
- **Shadows:**
  - 0px 0px 20px 0px rgba(255,255,255,0.08)
  - 1px 0px 10px 2px rgba(0,0,0,0.1)
- **Borders:** 1px solid borders using rgb(204,204,204) for muted dividers and rgb(255,255,255) for interactive elements

## 6. Layout

The layout skeleton is a 12-column grid with generous 24px gutters, providing a flexible structure for content. This framework supports full-viewport hero sections that use 56px display type to dominate the viewport and establish clear visual entry points.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is applied with institutional restraint, favoring smooth, purposeful transitions over flashy effects. Background reveals via background-size and gentle width animations for loading states are preferred, with all CSS properties transitioning by default at subtle durations.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Patterns:**
  - background-size transitions for image reveals
  - width animations for loading states
  - smooth transform animations for interactive elements

- **Hover:** Subtle background color transitions with 0.5s ease-out timing
- **Click:** Immediate visual feedback with transform states
- **Transition:** All CSS properties transition by default, with specific timing for background and transform properties
- **Keyboard:** Standard focus states with visible indicators for accessibility

## 8. Voice & Don'ts

The editorial voice is professional, confident, and direct, using short, punchy headlines terminated with periods for emphasis. Copy favors clear, action-oriented verbs and plain business language, avoiding jargon and casual tone.

- **Tone:** Professional, confident, and straightforward with direct value propositions
- **Headline style:** Short, punchy statements ending with periods for emphasis (e.g., 'Business account.')
- **CTA style:** Action-oriented with clear verbs (e.g., 'Open an account', 'Find the right plan')
- **Avoid:** avoid excessive exclamation points — screenshot shows calm, period-terminated statements / avoid complex financial jargon — screenshot uses plain business language / avoid overwhelming feature lists — screenshot presents one clear value per section / avoid cluttered interfaces — screenshot maintains generous whitespace / avoid flashy colors — screenshot uses restrained monochrome palette / avoid casual language — screenshot maintains professional tone throughout

### Don'ts
- ❌ 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

The system deliberately avoids colorful gradients, excessive animations, and decorative typography, committing instead to a restrained, functional aesthetic that builds trust through consistency.

## System Prompt (paste into AI tool)

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