Banca Mediolanum

Overview

Banca Mediolanum is a premium Italian financial institution that bridges institutional gravitas with contemporary digital accessibility. The design system embodies 'Institutional Modernism'—a movement that rejects both austere corporate formality and trendy minimalism in favor of a confident, human-scaled aesthetic. The brand serves affluent Italian families and professionals seeking personalized wealth management through the 'Family Banker' model, where every interaction feels guided by a trusted advisor rather than an algorithm. The UI evokes clarity, precision, and approachability through a restrained palette of deep navy (#192d6e), sky blue (#1e96d7), and pristine white, layered with generous whitespace and serif-accented headlines that signal heritage and stability.

The voice is warm yet authoritative, never breathless or overly casual. Mediolanum speaks in complete, measured sentences that respect the user's intelligence and time. Example: 'Il tuo Family Banker è sempre disponibile per costruire insieme il tuo futuro finanziario'—notice the emphasis on partnership ('insieme') and long-term vision ('futuro'), not transactional urgency. Typography pairs a distinctive serif (Mediolanum LT) for headlines with a clean sans-serif for body text, creating visual rhythm that guides the eye from aspiration to action.

Colors

The color system is anchored by Primary (#192d6e), a deep navy that commands authority without coldness—it appears on CTAs, navigation highlights, and focus states, signaling where users should direct their attention. Secondary (#1e96d7), a vibrant sky blue, provides warmth and approachability; it's used for supporting actions, accent elements, and secondary CTAs to create visual hierarchy without competing for dominance. The surface stack (white #ffffff down to surface-container #e8eaf1) provides subtle depth through micro-contrast: cards and input fields use surface-container-low (#f0f2f7) to sit slightly recessed from the page background, while surface-container-high (#e0e3ed) is reserved for hover states and elevated content. Outline (#bac0d4) and outline-variant (#c4c7c8) define borde

Typography

The type system establishes a clear hierarchy through serif-and-sans pairing: Mediolanum LT (serif) is reserved for display, headline-lg, headline-md, and title-lg, creating a distinctive brand voice and visual anchor for page structure. Body text and labels use Mediolanum Sans (or system sans-serif fallback) at 16–18px with 1.5 line-height (24–28px), ensuring comfortable reading on screens and print. Display (60px, 700 weight, -0.04em letter-spacing) is used sparingly for hero headlines; headline-lg (40px, 600 weight) anchors major sections; body-md (16px, 400 weight) is the workhorse for paragraphs and descriptions. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons and form labels to create visual distinction from body text. On small labels over busy backgrounds or withi

Layout

The layout system uses a 12-column grid with a max-width of 1280px (container-max), centering content on desktop and flowing full-width on mobile (320px breakpoints). Horizontal rhythm is governed by the spacing scale: gutter (24px) separates major sections, lg spacing (40px) creates breathing room between hero and content blocks, md spacing (24px) is used for card padding and component internal spacing, and sm spacing (12px) tightens up form fields and list items. The page follows a 'content-first' philosophy: hero sections occupy 60–80% of viewport height with generous padding (40px top/bottom on desktop, 24px on mobile), followed by modular card grids that stack to 1 column on mobile and 2–3 columns on tablet/desktop. Container max-widths scale responsively: 540px (mobile), 720px (table

Elevation & Depth

Depth is conveyed through a restrained shadow system that respects the Italian aesthetic of clarity over drama. Level 1 (Base): the page background is pure white (#ffffff) with no shadow; content sits flush. Level 2 (Standard Card): cards and modals use box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), a soft, diffuse shadow that lifts elements 4–8px above the surface without creating visual noise. Level 3 (Elevated/CTA): prominent CTAs and hover states use box-shadow: 0 12px 36px rgba(0, 48, 135, 0.2), a deeper shadow tinted with primary blue to reinforce brand identity and signal interactivity. Bu

Shapes

The shape philosophy is 'Refined Geometry'—sharp enough to feel modern and trustworthy, rounded enough to feel approachable and human. Buttons use rounded.lg (1rem / 16px) for a subtle softness that avoids the 'pill' aesthetic except in specialized CTA components. Cards and containers use rounded.DEFAULT (0.375rem / 6px) or rounded.md (0.5rem / 8px) to create a clean, architectural feel aligned with institutional design. The signature CTA pill button (cta-btn-pill) uses rounded.full (60px) to create a distinctive, memorable shape that stands out from standard buttons—this is used exclusively f

Components

Action Elements Buttons follow a two-tier system: button-primary (#192d6e on white, 48px height, 12px 24px padding, rounded.lg) is the default for primary actions and appears in navigation, forms, and CTAs. On hover, the background darkens to #142458 and receives box-shadow: 0 12px 36px rgba(0, 48, 135, 0.2) plus a subtle -1px translateY to signal interactivity. Button-secondary uses a transparent background with a 2px solid border in primary (#192d6e) and the same text color; on hover, the background fills with primary-container (#e9f0ff) while the border remains primary, creating a 'reveal' effect. The signature CTA pill (cta-btn-pill) is a flex container with 28px 40px 28px 28px padding, a 2px border in outline (#bac0d4), rounded.full (60px), and a gap of 48px between label and arro

Do's and Don'ts

**Do**

• Do use primary (#192d6e) exclusively for CTAs, focus states, and navigation highlights—never for body text or backgrounds.
• Do apply the serif font (Mediolanum LT) only to headlines and display text; reserve sans-serif for body, labels, and UI text to maintain readability.
• Do maintain minimum 24px gutter spacing between major sections and 40px+ margins around hero content to create visual breathing room.
• Do pair button-primary with box-shadow: 0 12px 36px rgba(0, 48, 135, 0.2) on hover to signal elevation and interactivity without animation jank.
• Do use the full-rounded CTA pill (60px border-radius) sparingly—only for hero CTAs and high-priority actions—to preserve its visual distinctiveness.
• Do ensure all text meets 4.5:1 contrast ratio against its background; test with WCAG contrast checkers before deployment.

**Don't**

• Don't use secondary (#1e96d7) or tertiary (#dc3545) as primary CTA colors; they are supporting accents only and dilute the brand hierarchy.
• Don't apply rounded.full (60px) to standard buttons, cards, or form fields—reserve it for badges and the signature CTA pill to maintain visual distinction.
• Don't exceed 36px blur or spread in box-shadows; this keeps the design grounded and prevents the 'floating' effect that contradicts institutional trust.
• Don't mix serif and sans-serif fonts within a single line of text; maintain clear separation: serif for headlines, sans-serif for body and UI.
• Don't reduce spacing below 12px (sm) in form layouts or below 24px (md) between major sections; whitespace is a design feature, not a constraint to minimize.
• Don't use color alone to indicate state (e.g., red text for errors without a border or icon); always pair color with shape, border, or icon for accessibility.