BG Suisse Private Bank

Overview

BG Suisse Private Bank represents institutional Swiss banking heritage reimagined for the digital era. The brand serves high-net-worth individuals and families seeking sophisticated wealth management rooted in Alpine tradition and Italian excellence. The aesthetic is 'Architectural Minimalism with Institutional Warmth'—leveraging large-format photography of heritage buildings, restrained typography, and a singular accent red (#C21B17) that commands attention without aggression. The emotional response is one of quiet confidence: the user feels they are in the hands of seasoned professionals who value precision, discretion, and long-term stewardship.

The brand voice is measured, authoritative, and deeply Swiss: it avoids hyperbole, speaks in concrete terms, and privileges clarity over flourish. Vocabulary patterns include 'patrimonio' (heritage), 'eccellenza' (excellence), 'orizzonti' (horizons), and 'consulenza' (counsel). The tone is never breathless or trendy; instead, it conveys timeless competence. Example sentence in brand voice: 'Nuovi orizzonti al tuo patrimonio—gestiti con la precisione che merita.'

Colors

The color system balances institutional restraint with decisive action. Primary (#C21B17) is the brand's signature accent—a deep, confident red deployed exclusively on call-to-action buttons ('Accetta tutti i cookie', 'HOME BANKING'), active navigation states, and critical alerts. It is never used for body text or large surface areas, preserving its impact. Secondary (#6C757D) is a neutral gray that anchors the interface, used for disabled states, secondary labels, and dividers. Tertiary (#007BFF) is a bright blue reserved for informational elements, links, and secondary CTAs.

The surface stack is anchored in light neutrals: surface (#ECECEC) serves as the default page background, while surface-bright (#FFFFFF) is used for cards, modals, and elevated containers. Surface-container variants

Typography

The type system uses a single typeface family—Roboto paired with HelveticaNeueLTPro as a fallback—to reinforce institutional consistency. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major section breaks; headline-lg (40px, 600 weight) anchors page sections; headline-md (28px, 600 weight) introduces subsections; title-lg (20px, 600 weight) labels cards and modular components. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and hero copy; body-md (16px, 400 weight, 24px line-height) is the default for all body text. Label-md (14px, 700 weight, 0.01em tracking) is applied to button text and form labels; label-sm (12px, 500 weight, 0.05em tracking) is used for captions, badges, and helper text. When small labels appear over b

Layout

The layout operates on a 12-column fluid grid with a maximum container width of 1440px. The page rhythm is deliberate and spacious: major sections are separated by lg spacing (40px) on mobile, xl spacing (64px) on tablet, and xl spacing (64px) on desktop, creating breathing room that reflects the brand's unhurried confidence. The gutter (24px) is consistent across all breakpoints, ensuring content never touches the viewport edge. Hero sections occupy 100% viewport height with a dark overlay (rgba(0, 0, 0, 0.4)) over architectural photography, positioning white or light-gray text for maximum contrast. Card-based content sections use md spacing (24px) between cards and lg spacing (40px) between sections. The container max-width of 1440px ensures readability on ultra-wide displays without exc

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic effects. Level 1 (Base): flat surfaces with no shadow (body background #ECECEC, header background #262626). Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used on cards, input fields, and dropdown panels. Level 3 (Elevated/Modal): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), applied to modals, popovers, and floating action elements. Hover states transition smoothly (200ms ease-in-out) from Level 2 to Level 3, signaling interactivity without jarring jumps. The cookie consent banner uses Level 3 elevat

Shapes

The shape philosophy is 'Restrained Geometry'—favoring subtle, functional rounding that softens without compromising institutional precision. Buttons use rounded DEFAULT (0.5rem / 8px) for a slightly softened rectangle that feels contemporary without appearing playful. Cards and containers use rounded md (0.75rem / 12px) to create visual distinction from buttons while maintaining a cohesive family. Input fields use rounded DEFAULT (0.5rem / 8px) to align with button styling, creating a unified interaction language. Badges and pills use rounded full (9999px) for maximum softness, appropriate fo

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. Button-primary uses backgroundColor: {colors.primary} (#C21B17), textColor: white, padding: 8px 32px, height: 44px, rounded: DEFAULT (8px), and typography: label-md (14px, 700 weight). The primary CTA ('Accetta tutti i cookie') uses this treatment. On hover, transition to button-primary-hover with backgroundColor: {colors.primary-container} (#E4312E) over 200ms. On active/pressed, use #A01410 (a darker shade) to provide tactile feedback. Button-secondary is transparent with a 1px border in {colors.outline} (#6C757D), textColor: primary, and the same padding and height. Secondary buttons are used for 'Personalizza' and other non-critical actions. On hover, fill the background with {colors

Do's and Don'ts

**Do**

• Do use primary red (#C21B17) exclusively for CTAs, active states, and critical alerts—never for body text or large backgrounds.
• Do maintain generous white-space (lg/xl spacing) between major sections to reflect the brand's unhurried, premium positioning.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to small labels overlaid on architectural photography to ensure legibility.
• Do use the full 12-column grid and respect the 1440px container max-width to prevent line-length bloat on ultra-wide displays.
• Do transition all interactive elements (buttons, cards, inputs) over 200ms ease-in-out to signal responsiveness without jarring jumps.

**Don't**

• Don't use primary red for body text, backgrounds, or non-interactive elements—it dilutes its impact as an accent.
• Don't apply blur effects, glassmorphism, or transparency overlays; the aesthetic is grounded in print-like clarity and institutional restraint.
• Don't use border-radius values greater than 1.5rem (lg) on any component; excessive rounding undermines the professional, architectural aesthetic.
• Don't mix typefaces; Roboto + HelveticaNeueLTPro is the only approved family. System fonts (system-ui, -apple-system) are not permitted.
• Don't reduce contrast below 4.5:1 (WCAG AA) for any text-on-background combination; verify all color pairs meet accessibility standards.