Qonto

Overview

Qonto is a professional business banking platform designed for entrepreneurs and independent professionals who demand clarity, efficiency, and control over their finances. The design system embodies a philosophy of "Purposeful Minimalism"—stripping away unnecessary visual noise while maintaining warmth and accessibility. The interface prioritizes legibility and task completion, using a neutral monochromatic foundation (#050505 on #ffffff) punctuated by strategic accent colors (golden yellow #ffe017 for secondary actions, deep red #e5283f for alerts and tertiary elements) that guide user attention without overwhelming. The emotional response is one of confidence and trust: users feel they are in command of their financial data, not subordinate to it.

The brand voice is direct, professional, and reassuring—never patronizing, never breathless. Qonto speaks to business owners as peers, using precise language and concrete examples. Example sentence in brand voice: "Your invoices are sent. Payment arrives in 2–3 business days. No surprises." The typography system relies on QontoSans, a custom sans-serif that balances geometric clarity with human warmth, ensuring that dense financial information remains scannable and approachable across all screen sizes.

Colors

The color palette is anchored in a high-contrast, accessible foundation: pure white (#ffffff) as the primary surface, paired with deep near-black (#050505) for text and interactive elements. This extreme contrast (WCAG AAA compliant) ensures legibility even in financial dashboards where users must parse tables and transaction lists for extended periods.

Secondary accent colors serve distinct functional roles: Golden yellow (#ffe017) is reserved for secondary CTAs, highlights, and non-critical notifications—it draws attention without alarm. Deep red (#e5283f) is used for error states, alerts, and tertiary interactive elements that require caution or confirmation. A supporting palette of grays (from #f5f5f5 surface-dim to #b8b8b8 outline) provides visual hierarchy and container differentiat

Typography

The typography system is built on QontoSans, a proprietary typeface optimized for financial clarity and professional presence. The scale spans from display (68px, 700 weight) for hero headlines down to label-sm (12px, 500 weight) for metadata and helper text. Each level is calibrated for its context: display and headline-lg use tighter line-height (76px and 48px respectively) to create visual impact, while body-md and body-lg employ generous line-height (24px and 28px) to support readability in dense transaction lists and explanatory copy. Font weights are deliberately restrained—only 400 (regular) and 600 (semibold) are used, avoiding the visual clutter of multiple weights. Letter-spacing is applied conservatively: display and headline-lg receive -0.02em and -0.015em respectively to tight

Layout

The layout system uses a fluid 12-column grid with a maximum container width of 1440px, ensuring that content scales gracefully from mobile (320px) to ultra-wide displays (2560px+). The spacing scale is semantic and hierarchical: unit (8px) is the atomic increment; sm (12px) and md (24px) are used for component padding and internal spacing; lg (40px) and xl (64px) separate major sections and create breathing room between content blocks. Gutter spacing is fixed at 24px on desktop, reducing to 16px on tablet and 12px on mobile to respect viewport constraints. The philosophy is "generous but not wasteful"—white space is used to reduce cognitive load and guide the eye, not to create empty voids. Container max-width (1440px) prevents text lines from exceeding 80 characters, maintaining optimal

Elevation & Depth

Depth in Qonto's design system is achieved through a restrained shadow vocabulary that avoids the visual heaviness of drop shadows. Three elevation levels are defined: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle separation of interactive elements like buttons and form inputs; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards, modals, and floating UI components that require clear visual separation from the background; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modal overlays and top-level UI surfaces that demand maximum prominence. Shadows are always soft and diffuse—never sharp or theatrical. The mo

Shapes

The shape philosophy is "Geometric Warmth"—rounded corners are used strategically to soften the precision of financial interfaces without introducing organic or playful aesthetics. Border-radius values follow a deliberate scale: sm (0.25rem / 4px) for small, tightly-grouped elements like inline badges and small buttons; DEFAULT (0.5rem / 8px) for form inputs and compact components; md (0.75rem / 12px) for list items and secondary containers; lg (1rem / 16px) for primary cards and modal content; xl (1.5rem / 24px) for hero sections and large card containers; full (9999px) for pill-shaped button

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants: primary (solid white background, 8px radius, 44px height, 12px 16px padding), secondary (transparent with 1px outline, same dimensions), and ghost (no border or background, used for tertiary actions). Primary buttons use {colors.primary} background with {colors.on-primary} text; on hover, the background shifts to {colors.primary-container} and elevation-md shadow is applied (0 3px 8px rgba(0, 0, 0, 0.15)). Hover transitions use 150ms ease-out timing to feel responsive without being jarring. Secondary buttons maintain a 1px border in {colors.outline} and shift to {colors.surface-container-high} background on hover. All buttons use {typography.label-md} (14px, 600 weight) for consistent visual weigh

Do's and Don'ts

**Do**

• Do use the monochromatic foundation (white #ffffff on near-black #050505) as the default; reserve yellow #ffe017 and red #e5283f for functional accents only.
• Do apply elevation-md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to interactive elements on hover to provide tactile feedback without overwhelming the interface.
• Do maintain consistent padding (12px 16px) across all form inputs and buttons to create a cohesive, predictable interaction model.
• Do use QontoSans at 600 weight for labels and CTAs, 400 weight for body text; avoid mixing weights within a single component.
• Do respect the 1440px container max-width and use lg spacing (40px) to separate major sections, ensuring users never feel lost on long pages.

**Don't**

• Don't introduce new accent colors beyond yellow #ffe017 and red #e5283f; the monochromatic palette is the brand's defining constraint.
• Don't use drop shadows with blur radius greater than 8px; Qonto's shadows are subtle and diffuse, never theatrical or heavy.
• Don't apply border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii break the geometric consistency.
• Don't mix QontoSans with system fonts or web-safe fallbacks; always declare the full font stack (QontoSans, PolySans, sans-serif) to maintain typographic integrity.
• Don't exceed 2 font weights (400 and 600) in a single design; additional weights create visual noise and undermine the minimalist aesthetic.