Swisscanto

Overview

Swisscanto embodies Institutional Minimalism—a design philosophy that prioritizes clarity, trust, and precision in financial services. The visual language combines a deep navy header (rgb(8, 15, 94)) with a clean white canvas and a signature cobalt blue accent (rgb(0, 60, 180)) that signals confidence and actionability. The brand serves Swiss private and professional investors seeking sustainable fund solutions, and the UI evokes calm authority: every element is purposeful, every interaction is predictable, and every color choice reinforces the message that wealth management is both sophisticated and accessible.

The voice is direct, measured, and never hyperbolic. Swisscanto speaks in declarative sentences with precise numbers and timelines: "Invest sustainably. Why not now?" rather than "Discover endless possibilities." The tone avoids jargon while respecting the intelligence of the audience—investors expect clarity over flourish. Typography is professional serif-adjacent (FrutigerLTPro), spacing is generous but not wasteful, and interactive elements respond with subtle, predictable feedback. The brand personality is that of a trusted Swiss advisor: reliable, transparent, and focused on long-term value.

Colors

The color system is anchored in institutional trust. Primary (rgb(0, 60, 180) / #003cb4) is the signature cobalt blue used exclusively on call-to-action buttons, active states, and key links—it signals where the user should direct their attention and is never used for passive elements. The deep navy header (rgb(8, 15, 94) / #080f5e) establishes authority and visual weight, creating a strong frame for the page. Secondary green (rgb(41, 186, 136) / #29ba88) is reserved for positive notifications, success states, and sustainability messaging, reinforcing the brand's commitment to ethical investing. Tertiary blue (rgb(84, 137, 212) / #5489d4) provides a softer accent for secondary information and hover states on non-critical elements.

The surface stack uses pure white (#ffffff) as the primary

Typography

The type system uses FrutigerLTPro (with Helvetica and system sans-serif as fallbacks) across all scales, creating a cohesive, professional voice. Display (56px, 700 weight, -0.02em letter-spacing) is reserved for hero headlines and major announcements; Headline-lg (40px, 700 weight) anchors section titles; Headline-md (28px, 600 weight) breaks up content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent copy; Body-md (16px, 400 weight, 24px line-height) is the default for form labels, list items, and standard body text. Label-md (14px, 600 weight, 20px line-height, 0.01em tracking) is applied to button text and small headings; Label-sm (12px, 500 weight, 16px line-height, 0.02em tracking) is used for captions, badges, an

Layout

The layout follows a 12-column fluid grid with a maximum container width of 1280px, ensuring the design scales gracefully from mobile to desktop. The gutter width is consistently 24px, and section separation uses lg spacing (40px) to create clear visual rhythm. The header is fixed at the top with a dark navy background (rgb(8, 15, 94)) and spans the full viewport width; navigation items are right-aligned with 24px horizontal padding. Hero sections use a two-column layout: the left column (60%) contains headline and body copy, while the right column (40%) is reserved for imagery or modal overlays. Content cards are arranged in a 3-column grid on desktop, 2-column on tablet, and 1-column on mobile, with 24px gaps between cards. Form fields use full-width layout on mobile and tablet, and 50%

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids visual heaviness. Level 1 (Base): flat surfaces with no shadow, used for the main white canvas and input fields. Level 2 (Cards & Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, dropdowns, and modals to lift them slightly above the base. Level 3 (Hover & Focus): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used when cards are hovered or when modals are in focus, creating a subtle sense of depth without overwhelming the interface. The header uses no shadow, relying instead on its dark navy background (rgb(

Shapes

The shape language is Technical Precision—sharp corners with minimal rounding, reflecting the brand's institutional and data-driven nature. Buttons use a 3px border-radius (rounded.DEFAULT), creating a subtle softness that prevents harsh edges while maintaining a professional appearance. Cards and modals use 10px border-radius (rounded.lg) for a slightly more approachable feel. Input fields and form elements use 3px border-radius to align with buttons and maintain visual consistency. Radio buttons and checkboxes use 50% border-radius (rounded.full) for the radio and 2px border-radius (rounded.

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use rgb(0, 60, 180) background with white text, 10px vertical and 24px horizontal padding, and a 3px border-radius. On hover, the background shifts to rgb(10, 108, 255) with a 150ms ease-out transition. On active/pressed, the background darkens to rgb(0, 40, 140) and the button receives a 2px inset box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2). Disabled buttons use surface-container-high (#d8d8d8) background with on-surface-variant text (rgb(84, 137, 212)) and 60% opacity. Secondary buttons have a white background with a 2px solid primary blue border, primary blue text, and the same padding and radius as primary buttons. On hover, the background becomes surface-container-low (#f0f0f0) while the border remai