Fortuneo

Overview

Fortuneo is a digital-first banking platform that transforms financial management into an intuitive, nature-inspired experience. The design system embraces 'Vibrant Minimalism'—a philosophy that pairs sophisticated dark and light surfaces with a signature verdant green (#8fd448) that signals growth, trust, and forward momentum. The brand serves digitally-native French consumers who demand clarity, speed, and visual delight from their financial tools. The UI evokes a sense of calm confidence: clean typography (Sohne), generous whitespace, and strategic color accents create an environment where complex financial data feels approachable and even enjoyable.

Fortune's voice is conversational yet precise, avoiding jargon while celebrating the small wins of financial life. The tone is optimistic without being breathless—think 'Your money, your way' rather than 'Revolutionary fintech.' Sentences are direct and benefit-focused: 'Ouvrir un compte' (Open an account) and 'Payer, ça devrait être gratuit' (Paying should be free) exemplify the brand's belief that banking should remove friction, not add it. The personality is approachable, modern, and unapologetically French.

Colors

The Fortuneo palette centers on a vibrant ecological green (#8fd448, primary) that appears on all call-to-action buttons, interactive states, and brand moments. This green is paired with a deep, sophisticated dark tone (#10190d, on-surface) for body text and a clean white (#ffffff, surface) for primary backgrounds. The secondary accent blue (#0072a8) provides a complementary cool tone for secondary actions and data visualization, while a muted teal (#2b646f, tertiary) grounds supporting UI elements. Surface containers use a refined gray scale: #f7f7f7 (surface-dim) for subtle backgrounds, #ededed (surface-container-lowest) for recessed areas, and #dddddd (surface-container-highest) for elevated cards. The primary green (#8fd448) is never used for body text or large background fills—it is r

Typography

The type system is built on Sohne, a humanist sans-serif that conveys both approachability and professionalism. Display (72px, 400 weight, -0.02em tracking) anchors hero sections and major page titles with generous line-height (84px) to prevent crowding. Headline-lg (48px) and headline-md (32px) establish section hierarchies with subtle negative letter-spacing (-0.015em and -0.01em respectively) to create visual cohesion. Body text (16px–18px, 400 weight, 24–28px line-height) is set with generous leading to ensure readability on screens and maintain a spacious, premium feel. Labels and buttons use 14px or 12px with 500 weight and positive letter-spacing (0.01–0.02em) to add visual distinction and improve scannability. On small labels over busy backgrounds or image overlays, apply text-shad

Layout

Fortuneo uses a 12-column responsive grid with a maximum container width of 1440px, scaling fluidly from mobile (320px) to desktop. The gutter is consistently 24px on tablet and desktop, reducing to 12px on mobile to maximize content area. Section separation follows a semantic spacing scale: lg (40px) for major section breaks, md (24px) for component grouping, and sm (12px) for internal element spacing. The hero section spans full-width with a 40px top margin on desktop, creating breathing room below the fixed header. Cards and content blocks use md (24px) padding internally, with lg (40px) margins between sections to establish clear visual rhythm. Whitespace is treated as a design element, not wasted space—generous margins around headlines and between sections reinforce the premium, unclu

Elevation & Depth

Depth in Fortuneo is conveyed through subtle shadow layering and surface color shifts rather than dramatic drop shadows. Level 1 (Base) uses no shadow—flat surfaces at #ffffff or #f7f7f7. Level 2 (Standard Cards) applies box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) with a background shift to #ededed or #ffffff to create gentle separation. Level 3 (Elevated/Modals) uses box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) and a background of #ffffff with increased z-index. Level 4 (Floating Elements, Popovers) applies box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) for maximum prominence. Hover states on cards t

Shapes

Fortuneo employs 'Soft-Technical' border-radius philosophy: buttons and primary CTAs use full (9999px) to signal action and approachability, while cards and containers use lg (1rem / 16px) for a refined, modern edge. Input fields use DEFAULT (0.5rem / 8px) for subtle definition without softness. Modals and elevated surfaces use xl (1.5rem / 24px) to create a distinct, premium container. This graduated approach—full for actions, lg for containers, DEFAULT for inputs—creates visual hierarchy and guides user attention. The reasoning: full-radius buttons are instantly recognizable as clickable, lg

Components

Action Elements Buttons are the primary interaction mechanism and use full border-radius (9999px) with 48px height and 12px–24px horizontal padding. Primary buttons (#8fd448 background, #003500 text, 500 weight) are used for all main CTAs ('Ouvrir un compte'). Hover state transitions to #5ea025 (primary-container) over 150ms. Active/pressed state darkens further to primary-fixed-dim (#5ea025) with a subtle inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.1)) to signal depression. Secondary buttons use transparent background with a 1px border in primary green and green text; on hover, the background shifts to surface-container-high (#e8e8e8) while maintaining the border. All button text uses label-md typography (14px, 500 weight, 0.01em tracking).

Containers & Surfaces Cards use lg bo

Do's and Don'ts

**Do**

• Do use the primary green (#8fd448) exclusively on interactive elements—buttons, links, focus states, and badges—to maintain visual hierarchy and prevent cognitive overload.
• Do maintain at least 40px of vertical spacing (lg) between major sections to create a premium, uncluttered aesthetic that guides the eye naturally.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to small labels (12px) placed over images or busy backgrounds to ensure legibility.
• Do use full border-radius (9999px) on all primary CTAs and buttons to signal action and approachability; reserve lg (16px) for cards and containers.
• Do transition all interactive states (hover, focus, active) over 150ms using cubic-bezier(0.4, 0, 0.2, 1) to create smooth, responsive feedback without jarring movement.

**Don't**

• Don't use the primary green (#8fd448) for body text, large background fills, or non-interactive elements—it is reserved for CTAs and interactive states only.
• Don't apply shadows stronger than Level 3 (0 4px 12px rgba(0, 0, 0, 0.08)) to standard cards; reserve Level 4 shadows for modals and floating elements only.
• Don't use font-weight heavier than 500 in body copy or headlines; weights above 500 create visual heaviness and reduce the premium, spacious feel.
• Don't reduce padding or margins below the semantic scale (xs: 4px, sm: 12px, md: 24px, lg: 40px) to 'save space'—whitespace is a design feature, not a constraint.
• Don't mix border-radius values arbitrarily; stick to the graduated scale (full for buttons, lg for cards, DEFAULT for inputs) to maintain visual consistency and hierarchy.