Spuerkeess

Overview

Spuerkeess is Luxembourg's leading retail bank, serving individuals and families with comprehensive financial solutions rooted in trust and expertise. The design system embodies 'Institutional Minimalism'—a aesthetic that combines the gravitas of traditional banking with the clarity and accessibility of modern digital interfaces. The brand personality is authoritative yet approachable: confident in its expertise, never condescending, speaking to customers as partners in their financial journey. The visual language uses a deep navy primary (#003060) as the anchor of institutional trust, paired with a vibrant teal secondary (#5fd1a5) that signals innovation and forward-thinking. Every interface element is designed to reduce cognitive load and build confidence in complex financial decisions.

The tone is precise, reassuring, and action-oriented. Spuerkeess avoids jargon when possible, explains features in plain language, and always prioritizes the customer's control and understanding. Example sentence in brand voice: 'Gérez vos comptes en toute sérénité—vos données sont protégées avec les normes les plus strictes du secteur.'

Colors

The color system is built on a foundation of institutional trust anchored by the primary navy (#003060), which appears on all primary CTAs, navigation highlights, and key interactive elements. This deep blue conveys stability and financial authority while remaining accessible and modern. The secondary teal (#5fd1a5) is reserved for positive actions, confirmations, and success states—it signals progress and customer empowerment. The tertiary orange (#ff7700) is used sparingly for alerts, warnings, and secondary information that requires attention but is not critical. Error states use a bold red (#de0000) to ensure immediate recognition. The surface stack progresses from pure white (#ffffff) for primary content areas through carefully calibrated grays (surface-container: #e6eaef, surface-con

Typography

The type system pairs Futura PT for headlines and display text with Open Sans for body and UI labels, creating a hierarchy that balances institutional gravitas with modern approachability. Futura PT's geometric precision reinforces the bank's technical competence and forward-thinking positioning, while Open Sans provides warmth and legibility in dense information layouts. Display (64px, 700 weight, -0.02em tracking) is reserved for hero statements and major page titles; Headline-lg (40px, 600 weight) anchors section introductions; Headline-md (28px, 600 weight) structures subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent descriptions, while Body-md (16px, 400 weight, 24px line-height) handles standard content and form labels. Label-

Layout

The layout system uses a 12-column grid with a maximum container width of 1120px, allowing content to breathe on desktop while maintaining focus on mobile. The gutter spacing is consistently 24px, creating a rhythm that feels both spacious and organized. Section separation uses the lg spacing token (40px) between major content blocks, while internal card padding uses md spacing (24px). The design favors asymmetric layouts that guide the eye toward primary actions: hero sections often use a 60/40 split (content left, imagery right) to establish visual hierarchy. Input fields and form containers use 12px (sm spacing) for internal padding, with 24px (md spacing) between form groups. The container max-width of 1120px ensures that even on ultra-wide displays, content remains scannable and focus

Elevation & Depth

Depth in this system is achieved through subtle shadows and layering rather than dramatic visual separation. The base elevation (Level 1) is the white surface (#ffffff) with no shadow, establishing the primary content plane. Level 2 (standard cards and containers) uses a medium shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to lift content slightly above the background, creating a sense of containment and focus. Level 3 (modals, popovers, and elevated overlays) uses a larger shadow (0 8px 24px rgba(0, 0, 0, 0.12)) to establish clear separation and draw attention. Hover states on interactive elements t

Shapes

The shape philosophy is 'Soft-Technical'—combining the precision of banking with human-friendly rounded corners. Buttons and primary CTAs use the full rounded token (1408px border-radius), creating pill-shaped elements that feel modern and inviting while maintaining professional polish. Standard cards and containers use lg rounding (24px), providing enough curvature to feel contemporary without appearing playful or casual. Input fields and form controls use xl rounding (32px), slightly more rounded than cards to signal their interactive nature and reduce the visual weight of dense forms. Small

Components

Action Elements Buttons are the primary mechanism for user intent in financial interfaces. The primary button (background: #003060, text: #ffffff, padding: 16px 32px, height: 48px, border-radius: 1408px) uses the navy primary color and full rounding to maximize visibility and encourage action. On hover, the background transitions to #b10000 (200ms ease-in-out) to provide clear feedback. The active/pressed state uses #850000 with a border-color: #850000 to indicate commitment. Secondary buttons (background: #e6eaef, text: #003060) are used for alternative actions or less critical paths; they use the same 48px height and full rounding for consistency but employ the surface-container color to visually deprioritize them. Tertiary buttons (background: #5fd1a5, text: #ffffff) are reserved fo

Do's and Don'ts

**Do**

• Do use the primary navy (#003060) for all primary CTAs, navigation highlights, and focus states—it is the visual anchor of institutional trust and must be instantly recognizable.
• Do apply generous whitespace (lg spacing: 40px) between major sections to reduce cognitive load and guide users through complex financial information.
• Do use the secondary teal (#5fd1a5) exclusively for positive confirmations, success states, and progress indicators—never use it for warnings or neutral actions.
• Do maintain consistent button heights (48px) and full rounding (1408px) across all primary actions to create a unified, clickable visual language.
• Do include focus rings (0 0 0 3px rgba(0, 48, 96, 0.1)) on all interactive elements for accessibility and clear keyboard navigation.
• Do use Futura PT for headlines and Open Sans for body text—this pairing signals both institutional authority and modern approachability.

**Don't**

• Don't use the error red (#de0000) for general warnings or secondary information—reserve it only for critical errors and destructive actions.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) to avoid creating visual chaos or making the interface feel heavy and dated.
• Don't mix rounded corners inconsistently—buttons must use full rounding (1408px), cards must use lg rounding (24px), and inputs must use xl rounding (32px) to maintain visual hierarchy.
• Don't use the tertiary orange (#ff7700) on primary CTAs or navigation—it is reserved for alerts and secondary information that requires attention but is not the primary action.
• Don't reduce padding below 12px (sm spacing) on form inputs or cards—financial interfaces require breathing room to reduce error rates and cognitive strain.
• Don't apply text-shadow or complex effects to body text—keep typography clean and legible, reserving effects only for small labels over busy backgrounds.