BoursoBank

Overview

BoursoBank represents a modern, confidence-driven approach to digital banking, rooted in 18 years of delivering France's most affordable financial services. The design system embodies 'Structured Clarity'—a philosophy that combines professional banking authority with accessible digital design. The interface uses a cool, sophisticated palette anchored by a vibrant magenta accent (#d20073) that signals trust and action, supported by cyan (#009de0) and navy (#006fb7) for secondary interactions. The aesthetic evokes precision and reliability: clean typography hierarchies, generous white space, and purposeful color deployment create an environment where complex financial information feels approachable rather than intimidating.

The brand voice is direct, reassuring, and never patronizing. BoursoBank speaks to financially conscious users who value transparency, speed, and value—the tone is conversational yet authoritative, avoiding jargon while maintaining professional credibility. Vocabulary emphasizes simplicity ('la moins chère', 'gratuit', 'performant') and action ('rejoignez', 'bénéficiez'). Example sentence in brand voice: 'Ouvrez votre compte en quelques minutes, sans frais cachés—c'est aussi simple que ça.'

Colors

The color system is built on a cool, neutral foundation (#f8fafd surface, #1a2e45 on-surface text) that conveys stability and professionalism. Primary accent is magenta (#d20073), used exclusively for high-priority CTAs ('Devenir client', 'Tout accepter'), focus states, and brand-critical interactions—this color appears 103 times in the DOM, signaling its strategic importance. Secondary accent cyan (#009de0, 298 occurrences) supports secondary actions, links, and informational highlights, creating visual rhythm without competing for attention. Tertiary navy (#006fb7, 259 occurrences) anchors form labels, section headers, and data visualization. The surface stack progresses from #f8fafd (base) through #e9ecef (container) to #c7d2e0 (container-highest), enabling subtle depth without dark mod

Typography

The type system pairs ITCAvantGarde (display, headlines) with ProximaNova (body, labels), creating visual hierarchy through weight and scale rather than font switching. Display text (50px, 600 weight) commands attention on hero sections; headline-lg (40px) and headline-md (28px) structure content zones; body-md (16px, 500 weight) ensures readability at standard viewing distance with 24px line-height (1.5x multiplier). The 500-weight body default (not 400) reflects BoursoBank's preference for visual presence over minimalism—every word should feel intentional. Label-md (14px, 600 weight) is applied to buttons and form labels with 0.01em letter-spacing to add subtle formality. For small labels over busy backgrounds (e.g., badge text on colored containers), apply text-shadow: 0 1px 2px rgba(0,

Layout

The layout follows a 12-column grid with 1200px max-width container, maintaining consistent 24px gutter spacing on desktop and 12px on mobile. Page rhythm is established through lg spacing (40px) for major section separation—hero to feature cards, feature cards to testimonials—creating breathing room that prevents cognitive overload. Container-max-width of 1200px ensures text lines stay within 65–75 characters for optimal readability. White-space philosophy prioritizes clarity: cards use md padding (24px), inputs use sm padding (12px), and list items use sm padding (12px) to create visual grouping without cramping. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is used consistently: button padding is always md (24px horizontal), form field padding is sm (12px), and sec

Elevation & Depth

Depth is conveyed through subtle shadows and border treatment rather than dark overlays. Level 1 (base surfaces) uses no shadow; Level 2 (cards, modals) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with 1px solid border at {colors.surface-container-high} (#d8e1ee), creating a soft lift from the background. Level 3 (elevated modals, popovers) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with the same border treatment. Hover states on cards transition to the Level 3 shadow (200ms ease) to signal interactivity. Focus states on inputs use a 3px inset box-shadow: 0 0 0 3px rgba(0, 157, 224,

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used strategically to soften hard edges without introducing organic or playful aesthetics. Buttons and inputs use 0.5rem (8px) border-radius, balancing approachability with professional restraint. Cards use 0.75rem (12px) for slightly more visual softness while maintaining structure. Modals and elevated surfaces use 1rem (16px) to signal importance and create visual separation. Full-radius (9999px) is reserved for badges and pill-shaped elements (e.g., 'Particuliers' tab, status indicators). This tiered approach ensures that the

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. Primary buttons use {colors.primary} (#d20073) background with white text, 44px height, 8px 24px padding, and 0.5rem border-radius. On hover, background shifts to #b8005c (a 15% darkening) with a 200ms ease transition—no shadow addition, as the color shift alone signals state change. Secondary buttons use white background with 1px {colors.outline-variant} border, {colors.on-surface} text, and identical padding/height. On hover, background becomes {colors.surface-container-low} (#eef2f7) and border shifts to {colors.outline} (#869db8). Ghost buttons (tertiary actions) have transparent background, {colors.primary} text, and no border; on hover, background becomes {colors.primary-container}

Do's and Don'ts

**Do**

• Do use {colors.primary} (#d20073) exclusively for primary CTAs and focus states—never dilute its impact by applying it to secondary elements.
• Do maintain 24px gutter spacing on desktop and 12px on mobile; this rhythm is foundational to the layout system and must not be overridden.
• Do apply 200ms ease transitions to all interactive state changes (hover, focus, active) to signal interactivity without jarring the user.
• Do use ProximaNova 500-weight for body text (not 400) to maintain visual presence and ensure every word feels intentional.
• Do reference color tokens ({colors.x}) in all component definitions—never hardcode hex values inside component blocks, as this breaks the system's maintainability.

**Don't**

• Don't use {colors.secondary} (#009de0) or {colors.tertiary} (#006fb7) for primary CTAs; these are supporting accents and will confuse users about action priority.
• Don't apply shadows to buttons—use color shifts only. Shadows are reserved for cards and elevated surfaces to maintain visual hierarchy.
• Don't use border-radius > 1rem on interactive elements (buttons, inputs); this introduces visual softness that conflicts with the Geometric Precision philosophy.
• Don't mix ITCAvantGarde and ProximaNova within a single heading or body paragraph; each font family has a specific role and mixing them creates visual confusion.
• Don't apply opacity changes to primary colors for hover states; instead, use darker hex values (#b8005c for primary hover) to maintain color integrity and accessibility.