Monabanq

Overview

Monabanq is a French digital bank that embodies "Accessible Pragmatism"—a design philosophy that prioritizes clarity, inclusivity, and straightforward functionality over visual complexity. The brand serves everyday people seeking banking without gatekeeping, delivering the autonomy of online banking paired with human-quality customer service. The UI evokes trust through a soft, nature-inspired palette (sage greens and warm creams) combined with decisive, accessible typography. The emotional response is one of calm competence: users feel empowered to manage their finances without friction or jargon.

Monabanq's voice is conversational yet authoritative, avoiding corporate stiffness. The brand speaks in clear, benefit-driven language: "Jusqu'à 280€ pour l'ouverture d'un compte" (Up to €280 for account opening) rather than abstract value propositions. Vocabulary emphasizes autonomy (autonomie), simplicity (sans condition), and human connection (accompagnement). Example sentence in brand voice: "Ouvrir un compte en ligne, c'est reprendre le contrôle de votre argent—sans compromis sur le service."

Colors

The color system centers on a vibrant, nature-derived green (#07CA5A) as the primary accent—the signature of Monabanq's digital-first identity and the dominant CTA color. This green appears on all action buttons ("Ouvrir un compte"), interactive states, and focus indicators, creating a consistent visual anchor across the experience. The surface palette is deliberately warm and inviting: a soft cream background (#f2f5ec) replaces clinical white, paired with a deep teal-green text color (#0a272b) that reads as sophisticated without coldness. Secondary surfaces layer in pale sage (#def5df, #b4efb4) for elevated containers and hover states, creating visual depth through warmth rather than darkness. The error state uses a decisive red (#d50000) for critical alerts, ensuring accessibility and ur

Typography

The type system uses DM Sans exclusively, a geometric sans-serif that balances warmth with precision—ideal for financial services that must feel both approachable and trustworthy. Display (60px, 700) anchors hero sections with commanding presence; Headline-lg (40px, 700) and Headline-md (28px, 700) establish section hierarchy with tight letter-spacing (-0.02em to -0.01em) to enhance readability at scale. Body text (16px, 400) maintains 24px line-height for comfortable reading; labels and CTAs use 700 weight at 16px to signal interactivity. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on small labels (label-sm) when placed over busy backgrounds or images to ensure legibility. All headings use -0.02em letter-spacing to create visual tightness that conveys confidence; body copy uses 0em (

Layout

The layout follows a 12-column fluid grid with a 1280px max-width container, ensuring responsive scaling from mobile (single-column stack) to desktop (multi-column layouts). Page rhythm is governed by the spacing scale: section separation uses lg spacing (40px), internal card padding uses md spacing (24px), and micro-interactions use sm spacing (12px). The hero section occupies the full viewport height with a 40px gutter on desktop, collapsing to 24px on tablet and 12px on mobile. White-space philosophy prioritizes breathing room: cards are never adjacent without 24px separation, and text blocks maintain 28px line-height to prevent visual crowding. Container max-width is enforced at 1280px to prevent line-length from exceeding 75 characters on body text, maintaining cognitive load at accep

Elevation & Depth

Visual hierarchy is conveyed through a three-tier shadow system that creates subtle depth without visual heaviness. Level 1 (Base): No shadow; flat surfaces use only background color differentiation (e.g., surface-container-high at #def5df). Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards, modals, and dropdowns—a soft, close shadow suggesting proximity. Level 3 (Elevated/Modals): box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12)—a multi-layer shadow creating dramatic separation for full-

Shapes

The shape philosophy is "Soft-Technical"—combining rounded corners with geometric precision to signal both approachability and competence. Buttons use full (9999px) border-radius, creating pill-shaped CTAs that feel friendly and clickable; this is the most recognizable shape in the system and appears on all primary actions ("Ouvrir un compte"). Cards and containers use lg (1rem / 16px) border-radius, a moderate curve that softens edges without appearing playful. Input fields use DEFAULT (0.5rem / 8px) border-radius, a subtle curve that maintains form-like formality while avoiding sharp corners

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use {colors.primary} (#07ca5a) background with {colors.on-primary} (#0a272b) text, full border-radius (9999px), and 13px vertical / 24px horizontal padding, resulting in a 48px height. On hover, background shifts to {colors.primary-fixed-dim} with a 200ms transition. Secondary buttons use transparent background with 2px solid border at {colors.on-surface}, maintaining the same padding and height; on hover, background becomes {colors.surface-container-high} (#def5df). All buttons apply {typography.label-md} (16px, 700 weight) for visual prominence. Focus states add a 3px inset ring at rgba(7, 202, 90, 0.1) with 2px offset.

Containers & Surfaces Cards use {colors.surface-bright} (#ffffff) background with

Do's and Don'ts

**Do**

• Do use {colors.primary} (#07ca5a) exclusively on CTAs and interactive states—never on body text or static backgrounds.
• Do apply full border-radius (9999px) to all primary buttons to create unmistakable clickability.
• Do maintain 24px gutter spacing between sections and 40px lg spacing for major section breaks.
• Do use DM Sans at 700 weight for all labels and button text to signal interactivity.
• Do apply 200ms ease-in-out transitions to all hover and focus state changes.
• Do layer shadows using the three-tier system (none, md, lg) rather than inventing custom shadows.

**Don't**

• Don't use primary green (#07ca5a) for body text, backgrounds, or decorative elements—reserve it for actions only.
• Don't apply border-radius less than 0.5rem (8px) to interactive elements; sharp corners reduce perceived clickability.
• Don't exceed 1280px container width; this prevents line-length from exceeding 75 characters and maintains cognitive load.
• Don't mix font families; DM Sans is the sole typeface—never substitute Arial or system fonts in component definitions.
• Don't use shadows darker than rgba(0, 0, 0, 0.15) on standard cards; this maintains the soft, approachable aesthetic.
• Don't apply focus rings via outline; use inset box-shadow at rgba(7, 202, 90, 0.1) for consistent keyboard navigation visibility.