Hello bank!

Overview

Hello bank! is a premium digital banking platform by BNP Paribas that reimagines financial services through a "Vibrant Minimalism" aesthetic. The design combines a clean, white-dominant canvas with two signature accent colors—a bright cyan (#11bad5) and warm coral (#f0767e)—to create an interface that feels simultaneously professional and approachable. The brand serves digitally-native customers who demand both sophistication and simplicity, evoking a sense of clarity, control, and human connection in an otherwise impersonal financial landscape.

The voice is conversational yet authoritative, avoiding jargon while maintaining credibility. Hello bank! speaks to customers as equals—knowledgeable but never condescending. The tone is warm, encouraging, and occasionally playful (e.g., "La banque en ligne, en mieux" — "Online banking, but better"). Typography choices reinforce this duality: Quicksand headlines convey friendliness and approachability, while Figtree body text ensures legibility and professionalism. Example sentence in brand voice: "Rejoignez une banque qui vous parle, vous écoute, vous comprend." (Join a bank that speaks to you, listens to you, understands you.)

Colors

The color system is built on a foundation of clean whites and light neutrals, with two primary accent colors that drive emotional response and interaction. Primary (#11bad5) is the signature cyan used exclusively for call-to-action buttons, interactive elements, and key brand moments—it conveys trust, clarity, and forward momentum. Secondary (#f0767e) is a warm coral that appears in supporting UI, badges, and secondary messaging to add warmth and approachability. Tertiary (#176d8c) is a deeper blue-grey used for secondary headings and informational hierarchies. The surface stack progresses from pure white (#ffffff) through carefully calibrated greys (#f8f9fa, #f4f5f6, #eff0f1) to create subtle depth without visual noise. On-surface text is a deep navy (#073145) for maximum legibility again

Typography

The type system employs a two-font strategy: Quicksand for display and headline scales (64px down to 28px) to establish brand personality and warmth, and Figtree for body and label scales (18px down to 12px) to ensure consistent readability at smaller sizes. Display (64px, 700 weight, -0.02em tracking) anchors hero sections and major page titles with commanding presence. Headline-lg (40px, 700 weight) and headline-md (28px, 600 weight) create visual hierarchy within content sections. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) provide comfortable reading rhythm for descriptive text and form labels. Label-md (14px, 600 weight, 0.01em tracking) and label-sm (12px, 500 weight, 0.02em tracking) are reserved for buttons, badges, and micro-copy.

Layout

The page layout follows a 12-column grid with a maximum container width of 1280px, allowing for flexible responsive behavior across breakpoints. The design employs a fluid-to-fixed approach: on mobile and tablet, the grid adapts to 6 and 8 columns respectively, while desktop maintains the full 12-column structure. White-space is used generously—section separation uses the lg spacing token (40px) vertically, while internal component padding uses md (24px) for cards and inputs. The gutter between columns is consistently 24px. Hero sections span the full viewport width with 64px (xl spacing) padding on desktop, creating breathing room around content. Content cards and promotional blocks are typically 2–4 columns wide on desktop, allowing for multi-column layouts that feel spacious rather than

Elevation & Depth

Depth in Hello bank! is achieved through a restrained shadow system that emphasizes clarity over drama. The elevation scale uses three distinct levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle card separations and micro-interactions, md (0 4px 6px rgba(0, 0, 0, 0.1)) for standard cards and modals, and lg (0 3px 8px rgba(0, 0, 0, 0.15)) for elevated modals and hover states. The hero banner (#0b516a background with 1.5rem border-radius) sits at the base layer with no shadow, allowing the background image and overlay to dominate. Standard content cards use md elevation to lift them subtly fr

Shapes

The shape philosophy is "Friendly Geometry"—rounded corners are used consistently to soften the interface and reinforce the approachable brand personality, but never so aggressively that the design feels childish or loses professionalism. Buttons use full (9999px) border-radius to create pill-shaped CTAs that feel inviting and clickable. Cards and containers use xl (1.25rem / 20px) border-radius for a modern, slightly rounded aesthetic that balances softness with structure. Input fields use full (9999px) border-radius to match button styling and create a cohesive form experience. Smaller UI el

Components

Action Elements Buttons are the primary interaction mechanism and use the full border-radius (9999px) to create distinctive pill shapes. Primary buttons (#11bad5 background, #073145 text, 48px height, 18px 32px padding) are reserved for the most important actions—account opening, form submission, and key CTAs. On hover, the background transitions to #0da4c0 (a darker cyan) with a 200ms ease-in-out transition, providing clear feedback without animation lag. Secondary buttons use a transparent background with a 2px primary-colored border, allowing them to sit alongside primary buttons without competing for attention. Tertiary buttons are text-only with underline decoration, used for "Learn more" or "Reprendre ma demande" links. All buttons use Figtree at 14px weight 600 (label-md) for co

Do's and Don'ts

**Do**

• Do use primary (#11bad5) exclusively for the most important CTAs and interactive states—never dilute its impact by overusing it.
• Do maintain 24px gutters and 40px section spacing to create breathing room and visual clarity across all layouts.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) to small labels over image overlays or busy backgrounds to ensure legibility.
• Do use Quicksand for all display and headline scales to reinforce the warm, approachable brand personality.
• Do transition hover states over 200ms with ease-in-out timing to provide smooth, professional feedback without feeling sluggish.
• Do use the full border-radius (9999px) consistently on buttons and inputs to create a cohesive, friendly interaction model.

**Don't**

• Don't use secondary (#f0767e) or tertiary (#176d8c) as primary action colors—they are supporting accents only.
• Don't apply shadows larger than lg (0 3px 8px rgba(0, 0, 0, 0.15)) to avoid creating visual clutter or making the interface feel heavy.
• Don't mix Quicksand and Figtree at the same scale—maintain clear separation: Quicksand for headlines, Figtree for body and labels.
• Don't reduce border-radius below md (0.75rem) on cards or containers—the brand relies on rounded corners to convey approachability.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds in isolation—always reference the defined color tokens to maintain consistency.
• Don't animate transitions faster than 150ms or slower than 300ms—the sweet spot is 200ms for most interactive elements to feel responsive without feeling jarring.