---
version: alpha
name: Qonto
description: Premium European business banking — near-black canvas with full-bleed photography, QontoSans at weight 700 for display, a plum-violet brand accent, and a restrained pill-button system that signals confidence without decoration.

colors:
  # Canvas / surface
  background: "#ffffff"
  surface: "#ffffff"
  surface-dark: "#060606"        # near-black hero + nav background
  surface-section: "#f5f5f5"    # light off-white alternate sections

  # Text / ink
  ink: "#1d1d1b"                 # primary dark text (Qonto's near-black)
  ink-secondary: "#616161"       # --color-grey-600 — secondary / muted text
  ink-muted: "#8f8f8f"           # --color-grey-500 — tertiary / placeholder
  on-dark: "#ffffff"             # text on dark/photo surfaces

  # Brand accent — plum-violet
  primary: "#6e45e3"             # --color-plum-500 — primary CTA + accent
  primary-dark: "#3020d8"        # --color-plum-dark — pressed / deeper variant
  primary-container: "#d5c8ff"   # --color-plum-50 — tinted badge background
  primary-light: "#b9a4ff"       # --color-plum-700 — hover / light variant
  on-primary: "#ffffff"          # text on plum CTA

  # Secondary / neutral interaction
  border: "#cccccc"              # detected neutral border
  border-light: "#e5e5e5"        # subtle divider /* estimated */

  # Semantic
  success: "#0f7a3d"             # --color-green-1000
  success-tint: "#e6ffe4"        # --color-success-50
  warning: "#b04e10"             # --color-warning-1000
  error: "#b81818"               # --color-red-1000
  error-tint: "#ffb3b3"          # --color-red-100

  # Shadow tint
  shadow-soft: "#1d1d1b"        # was rgba(29,29,27,0.06) — flattened for hex

typography:
  display-hero:
    fontFamily: "QontoSans, Inter, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.11
    letterSpacing: -1.5px
  display:
    fontFamily: "QontoSans, Inter, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.14
    letterSpacing: -1.0px
  heading-section:
    fontFamily: "QontoSans, Inter, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.29
    letterSpacing: -0.3px
  heading-sub:
    fontFamily: "QontoSans, Inter, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: -0.2px
  body-large:
    fontFamily: "QontoSans, Inter, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  body-light:
    fontFamily: "QontoSans, Inter, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.33
    letterSpacing: 0px
  body:
    fontFamily: "QontoSans, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  body-medium:
    fontFamily: "QontoSans, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "QontoSans, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  nav-link:
    fontFamily: "QontoSans, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  caption:
    fontFamily: "QontoSans, Inter, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.57
    letterSpacing: 0px
  overline:
    fontFamily: "QontoSans, Inter, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.71
    letterSpacing: 0.5px
  small:
    fontFamily: "QontoSans, Inter, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  # Buttons
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"
  button-primary-active:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 11px 23px
  button-secondary-hover:
    backgroundColor: "{colors.surface-section}"
    textColor: "{colors.ink}"

  button-ghost-on-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 11px 23px

  # Cards
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-section:
    backgroundColor: "{colors.surface-section}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px

  # Inputs
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  # Navigation
  nav-bar:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
  nav-link:
    textColor: "{colors.on-dark}"
    typography: "{typography.nav-link}"
    padding: 8px 12px
  nav-link-hover:
    textColor: "{colors.on-dark}"

  # Badge / tag
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-dark}"
    typography: "{typography.small}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-success:
    backgroundColor: "{colors.success-tint}"
    textColor: "{colors.success}"
    typography: "{typography.small}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-error:
    backgroundColor: "{colors.error-tint}"
    textColor: "{colors.ink}"
    typography: "{typography.small}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  # Announcement bar
  announcement-bar:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.caption}"
    padding: 8px 16px
---

# Qonto Design System

## Overview

Qonto's marketing surface is European business banking at its most composed — a design that earns trust through restraint rather than reassurance. The canvas opens onto full-bleed photography of human moments: a hand holding a card terminal, a café entrepreneur. The near-black header (`{colors.surface-dark}`) and navigation float atop these images with white wordmark and soft text, establishing authority without distance. Below the fold, the system shifts to a cool white (`{colors.background}`) with ink-dark body text (`{colors.ink}`) — clean, transactional, professional.

The typography engine is QontoSans, a proprietary grotesque used across all contexts. At 72px weight 700 for the hero headline, it's confident but measured — a far cry from the billboard extremity of a Wise or Revolut. Letter-spacing tightens to -1.5px at the largest sizes, giving display text a purposeful compression without aggression. The body stack operates at 16px weight 400 with a generous 1.63 line-height, creating readable, unhurried prose that suits a platform where business owners need to understand terms and conditions, not just be impressed.

The brand accent is a plum-violet (`{colors.primary}`) — deep, composed, and unmistakably European. This color anchors CTAs and interactive elements across both light and dark surfaces, and the full `--color-plum-*` scale from `{colors.primary-container}` through `{colors.primary-dark}` gives the system expressive range while staying within a single hue. Shadows are present but whisper-quiet: a 3px blur at 6% opacity provides just enough lift to separate cards from canvas without drama.

**Key Characteristics:**
- Full-bleed photography hero on a near-black header (`{colors.surface-dark}`) — editorial, not corporate
- QontoSans at weight 700, 72px, letter-spacing -1.5px — confident display without excess
- Plum-violet (`{colors.primary}`) as singular brand accent — European premium tone
- Rich `--color-plum-*` semantic scale for interactive states: `{colors.primary-container}` → `{colors.primary}` → `{colors.primary-dark}`
- Pill buttons (9999px) with 1px outlined variant — interaction without color overload
- Light section alternation: `{colors.background}` + `{colors.surface-section}` for rhythm without drama
- Whisper-quiet shadows: `rgba(29,29,27,0.06) 0px 3px 6px` — barely there, always useful
- Uppercase overline labels at 14px weight 600 for feature callouts and category prefixes
- Body at 16px / 1.63 line-height — built for reading, not scanning
- Comprehensive product-facing semantic palette: plum, blueberry, mint, sakura, peach, mustard

## Colors

### Canvas
- **Near-Black** (`{colors.surface-dark}`): Header background, dark hero surfaces, dark card variants.
- **White** (`{colors.background}`): Primary light canvas — product sections, forms.
- **Light Gray** (`{colors.surface-section}`): Alternate section surface — rhythm without contrast.

### Text / Ink
- **Qonto Dark** (`{colors.ink}`): Primary text on light surfaces.
- **Mid Gray** (`{colors.ink-secondary}`): Secondary / supporting text.
- **Light Gray** (`{colors.ink-muted}`): Placeholder, metadata, tertiary.
- **On-Dark White** (`{colors.on-dark}`): Text on dark or photo surfaces.

### Brand Accent
- **Plum Violet** (`{colors.primary}`): Primary CTA buttons, links, active states, interactive highlights.
- **Plum Dark** (`{colors.primary-dark}`): Pressed button states, deep accent.
- **Plum Light** (`{colors.primary-light}`): Hover state, subtle accent.
- **Plum Tint** (`{colors.primary-container}`): Badge backgrounds, tinted container surfaces.

### Borders
- **Standard Border** (`{colors.border}`): Default component borders and dividers.
- **Subtle Divider** (`{colors.border-light}`): Low-contrast separators.

### Semantic
- **Success Green** (`{colors.success}`): Positive states, confirmation copy.
- **Success Tint** (`{colors.success-tint}`): Success badge backgrounds.
- **Warning** (`{colors.warning}`): Amber warning states.
- **Error Red** (`{colors.error}`): Destructive / error states.
- **Error Tint** (`{colors.error-tint}`): Error badge backgrounds.

## Typography

### Font Family
- **Primary**: `QontoSans`, with fallbacks: `Inter, sans-serif`
- QontoSans is Qonto's proprietary grotesque — a clean, professionally-spaced geometric sans with no declared web fallback. Inter is the closest commercially-available match.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.) rather than hardcoding values.

| Token | Use |
|---|---|
| `display-hero` | 72px QontoSans 700 — primary hero headline |
| `display` | 56px QontoSans 600 — feature section headers |
| `heading-section` | 28px QontoSans 600 — within-section titles |
| `heading-sub` | 24px QontoSans 600 — card and sub-feature titles |
| `body-large` | 18px QontoSans 400 — hero sub-copy, feature leads |
| `body-light` | 18px QontoSans 300 — supporting light text |
| `body` | 16px QontoSans 400 — standard body reading text |
| `body-medium` | 16px QontoSans 500 — emphasized body, list items |
| `button-ui` | 16px QontoSans 600 — all button labels |
| `nav-link` | 16px QontoSans 400 — navigation items |
| `caption` | 14px QontoSans 400 — metadata, footnotes |
| `overline` | 14px QontoSans 600 — category labels, uppercase callouts |
| `small` | 12px QontoSans 400 — badges, legal copy |

### Principles
- **QontoSans as the single voice**: one typeface across all contexts — display, body, UI, nav — creating a monolithic visual identity.
- **Weight as hierarchy**: 700 for hero, 600 for headings and UI, 500 for emphasis, 400 for reading, 300 for supporting light text.
- **Tight tracking at scale**: -1.5px at 72px, -1.0px at 56px — display text that locks together without cramping.
- **Generous reading line-height**: 1.63 at 16px body — built for business operators reading pricing, terms, and feature explanations.
- **Uppercase overlines**: 14px weight 600 with positive letter-spacing used as category labels and feature prefixes — a restrained editorial touch.

## Layout

### Spacing System
The complete spacing scale lives in the `spacing:` token block above. Base unit: 8px. Section padding escalates to 80–120px (`{spacing.4xl}` / `{spacing.5xl}`) for major visual separations.

### Grid & Container
- Max content width: approximately 1260px (breakpoint anchor)
- Full-bleed hero photography under the nav — no contained box
- Below the fold: 12-column grid, 2- to 3-column feature cards
- Centered content on light sections with generous lateral margins

### Whitespace Philosophy
- Generous breathing room between sections — the design never rushes
- Section alternation (`{colors.background}` / `{colors.surface-section}`) creates rhythm without requiring heavy borders
- Internal card padding at 24–32px — information presented with space to be read

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Nav on dark; text on photography |
| Card (Level 1) | `rgba(29,29,27,0.06) 0px 3px 6px` | Feature cards on white sections |
| Elevated (Level 2) | `rgba(0,0,0,0.10) 1px 0px 10px 2px` | Modals, dropdowns, overlays |
| Dialog (Level 3) | `rgba(0,0,0,0.16) 0px 7px 6px 1px` | Popovers, floating panels |
| Focus Ring | `0 0 0 3px {colors.primary-container}` | Keyboard focus on interactive elements |

**Shadow Philosophy**: Qonto's shadow system is intentionally quiet — shadows exist but never assert. The 6% opacity at 3px is barely visible, just enough to lift cards off a white surface without drama. Dark sections (nav, hero) use zero shadow because photography provides its own depth. The system trusts the photography and typography to create dimensionality; shadows are structural tools, not decorative statements.

## Shapes

The complete radius scale lives in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed photo containers; dividers |
| `sm` | 4px | Inline badges, small chips |
| `md` | 8px | Input fields, small cards |
| `lg` | 16px | Standard cards, feature panels |
| `xl` | 24px | Section containers, large cards |
| `pill` | 9999px | All button variants |

The radius system reads as a deliberate two-zone structure: structured rectangles with gentle softening (8–24px) for containers and information, and full pills (9999px) for all interactive buttons. This contrast makes buttons unmistakably interactive without requiring strong fills.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants
- **`button-primary`** — Plum pill (`{colors.primary}`, 9999px radius), white text, 12px 24px padding. Hover: `{colors.primary-light}`. Active: `{colors.primary-dark}`. Used for the principal CTA on each section.
- **`button-secondary`** — White pill with 1px `{colors.border}` outline, ink text, 11px 23px padding (1px less to optically match primary). Hover: light gray fill (`{colors.surface-section}`). Used for secondary actions alongside the primary CTA.
- **`button-ghost-on-dark`** — Transparent pill on dark surfaces, white text, thin white border. Used in the hero and dark sections.

### Cards
- **`card`** — White background, 16px radius, 24px padding. Standard feature card.
- **`card-dark`** — Near-black background, white text, 16px radius. For dark-themed feature tiles.
- **`card-section`** — Off-white background, 24px radius, 32px padding. Large container panels within light sections.

### Inputs
Standard field with 8px radius and 12px 16px padding. Focus state uses the plum ring.

### Badges / Tags
- **`badge`** — Plum tint background (`{colors.primary-container}`), plum-dark text — brand accent without full saturation.
- **`badge-success`** / **`badge-error`** — Semantic tint backgrounds with dark-value text for readability.

### Navigation
- **`nav-bar`** — Near-black background (`{colors.surface-dark}`), white text. Positioned above the hero photography with low z-index visual weight.
- Announcement bar above the nav with a gold/mustard inline badge CTA for limited offers.

## Do's and Don'ts

### Do
- Use `{colors.surface-dark}` for the nav and hero overlay — the near-black ground makes photography sing
- Apply `{colors.primary}` to primary CTAs only — preserve its plum identity; one stamp per section
- Use pill buttons (9999px) for every interactive button variant — the pill shape is the system's signal for "click me"
- Reference the full `--color-plum-*` scale for interactive states: tint (`{colors.primary-container}`) → medium (`{colors.primary}`) → deep (`{colors.primary-dark}`)
- Keep shadows at 6% opacity on white sections — just enough lift, nothing decorative
- Use `{typography.overline}` (14px weight 600 uppercase) for category prefixes and feature callouts
- Alternate sections between `{colors.background}` and `{colors.surface-section}` for rhythm without dividers
- Reserve the rich semantic palette (plum, mint, sakura, peach, blueberry) for product UI surfaces — not marketing

### Don't
- Don't use colored backgrounds for marketing sections — only white, off-white, and near-black
- Don't introduce mid-weight shadows — the system is either no-shadow (dark) or whisper-soft (light)
- Don't use QontoSans below weight 300 — the system uses 300 as the floor, not lighter
- Don't apply the plum accent to more than one CTA per section — dilution kills the stamp quality of `{colors.primary}`
- Don't use non-pill shapes for buttons — mixing 8px-radius buttons with pill buttons breaks the button language
- Don't scale the hero headline beyond 72px without compressed tracking — the letter-spacing is calibrated for the size
- Don't use the semantic color palette (sakura, peach, sandgold, blueberry) for marketing chrome — they belong in the product app

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <600px | Single column, hero text scales to ~40px |
| Mobile | 600–768px | Compact navigation, stacked feature cards |
| Tablet | 768–1024px | 2-column feature cards, condensed nav |
| Desktop | 1024–1260px | Full layout, 3-column grids |
| Large Desktop | >1260px | Centered content, max-width cap at ~1260px |

### Touch Targets
- Pill buttons have generous padding (12px 24px) ensuring minimum 44px tap height at the 16px button-ui font size
- Navigation collapses to a hamburger at mobile — full-screen dark overlay menu

### Collapsing Strategy
- Hero headline scales from 72px (desktop) to approximately 40px (mobile) with proportional letter-spacing reduction
- Feature card grids collapse from 3-col → 2-col → single-col across breakpoints
- Nav transitions from horizontal link row to hamburger with animated overlay

### Image Behavior
- Hero photography is always full-bleed — never contained within a box at any breakpoint
- Feature images use `object-fit: cover` within rounded card containers
- Photography scales proportionally; no hard crops on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background (light): `{colors.background}`
- Background (dark): `{colors.surface-dark}`
- Primary text: `{colors.ink}`
- On-dark text: `{colors.on-dark}`
- Brand accent: `{colors.primary}`
- Secondary text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- CTA button: `{colors.primary}`

### Example Component Prompts

- "Create a Qonto hero section: full-bleed background image with a near-black overlay (`{colors.surface-dark}` at opacity 0.5). Headline at 72px QontoSans weight 700, letter-spacing -1.5px, `{colors.on-dark}` text. Two pill buttons: primary (`{colors.primary}`, white text, 12px 24px) and outlined ghost (`{colors.on-dark}` border, `{colors.on-dark}` text, transparent fill)."
- "Build a Qonto feature card: `{colors.background}` background, 16px radius, 24px padding, shadow `rgba(29,29,27,0.06) 0px 3px 6px`. Overline at 14px QontoSans 600 uppercase `{colors.ink-secondary}`. Title at 24px QontoSans 600 `{colors.ink}`. Body at 16px QontoSans 400 `{colors.ink-secondary}` with 1.63 line-height."
- "Create a Qonto pill CTA button: `{colors.primary}` background, white text, 9999px border-radius, 12px 24px padding, 16px QontoSans 600. Hover: background shifts to `{colors.primary-light}`. Active: `{colors.primary-dark}`. Transition: 0.2s ease-in-out."
- "Build a Qonto navigation bar: `{colors.surface-dark}` background. Left: QontoSans wordmark in white. Center: nav links at 16px QontoSans 400 `{colors.on-dark}`, 8px 12px padding, 0.2s ease-in-out hover opacity. Right: 'Sign in' text link and 'Open an account' outlined pill button (`{colors.on-dark}` border + text)."
- "Create a Qonto badge: `{colors.primary-container}` background, `{colors.primary-dark}` text, 12px QontoSans 400, 9999px radius, 4px 10px padding. Use for feature labels and account type tags."
- "Build a Qonto pricing section: `{colors.surface-section}` background, 24px radius container, 32px padding. Heading at 28px QontoSans 600 `{colors.ink}`. Price at 56px QontoSans 600 `{colors.ink}`. Body at 16px QontoSans 400 `{colors.ink-secondary}`. CTA: primary plum pill (`{colors.primary}`, white text, 12px 24px, 9999px radius)."

### Iteration Guide

1. Start with the canvas: dark nav + full-bleed photography (`{colors.surface-dark}`) for hero, then white (`{colors.background}`) for feature sections
2. One plum CTA per section — `{colors.primary}` stamps the primary action; everything else gets the outlined secondary
3. QontoSans weight hierarchy: 700 for hero → 600 for headings/UI → 400 for body — never mix weights within a hierarchy level
4. Shadows are structural, not decorative: `rgba(29,29,27,0.06) 0px 3px 6px` on light-surface cards only; zero shadow on dark
5. Section rhythm via background alternation (`{colors.background}` / `{colors.surface-section}`) — no border dividers needed
6. All buttons are pills (9999px) — the pill is the universal signal for "interactive" in this system
7. Reserve the semantic palette (`--color-plum-*`, `--color-mint-*`, `--color-sakura-*`, etc.) for product app surfaces, not the marketing layer

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Qonto. Brand names and trademarks belong to their respective owners.