---
name: Qonto
description: "This site exemplifies premium fintech design through its confident monospace palette, direct copywriting style, and AI-focused features that modernize traditional business banking."
version: alpha

colors:
  background: "#050505"
  primary: "#FFFFFF"
  secondary: "#626262"
  neutral: "#CCCCCC"
  bg-soft: "#1A1A1A"
  muted-soft: "#C9C9C9"
  line: "rgba(204,204,204,1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  h2:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.5px"
  body-lg:
    fontFamily: geometric-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.375
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.57
    fontWeight: 400
    letterSpacing: "0px"
  overline:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

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

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

## Colors

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

- **Background (`#050505`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#626262`)** — uses `ink-soft` token
- **Muted (`#CCCCCC`)** — uses `muted` token
- **Borders (`rgba(204,204,204,1.0)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

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

## Elevation & Depth

- 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

## Shapes

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

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

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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