UBS

Overview

UBS is a global financial services institution delivering wealth management, asset management, and investment banking expertise to clients worldwide. The design system embodies 'Institutional Minimalism'—a refined aesthetic that prioritizes clarity, precision, and trustworthiness through restrained color palettes, rigorous typography hierarchy, and purposeful use of negative space. The visual language conveys stability and sophistication, with a bold red accent (#E60000) that signals confidence, action, and the brand's commitment to client success. The UI evokes a sense of professional competence: every element is deliberate, every interaction is predictable, and every visual choice reinforces the brand's position as a trusted global partner.

The brand voice is authoritative yet approachable, precise yet human. UBS communicates in clear, direct language—avoiding jargon where possible, explaining complex financial concepts with clarity, and always prioritizing the client's perspective. Tone: confident, measured, never condescending. Example sentence: 'Our global network of 4,500+ advisors brings 160 years of expertise to your financial goals.'

Colors

The color system is built on a foundation of institutional neutrals—whites, grays, and near-blacks—with a single, unmissable accent: UBS Red (#E60000). This primary color appears on all call-to-action buttons, critical links, and interactive states, commanding attention without overwhelming the interface. The red is paired with a darker hover state (#8A000A) for depth and tactile feedback. Surface colors range from pure white (#FFFFFF) for primary content areas to carefully calibrated grays (#F9F9F7, #F4F3EE, #E0DFD7) that create visual hierarchy without introducing color. The text hierarchy uses near-black (#1C1C1C) for primary content and mid-gray (#5A5D5C) for secondary information, ensuring 7:1+ contrast ratios for accessibility. Error states use a distinct red (#DA0000) separate from

Typography

The typography system uses Frutiger as the primary typeface, with Arial as a reliable fallback, establishing a professional, corporate voice. The hierarchy spans from Display (60px, 700 weight) for hero statements down to Label-SM (12px, 500 weight) for supporting metadata. Headlines use 600 weight with tight letter-spacing (-0.02em to -0.01em) to create visual impact and authority; body text employs 400 weight with generous line-height (24px–28px) to ensure readability across devices and contexts. The system enforces a 4px baseline grid: all font sizes and line heights are multiples of 4px (16px, 20px, 24px, 28px, etc.), creating visual rhythm and alignment. For small labels over busy backgrounds or low-contrast surfaces, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to maintain legibil

Layout

The page layout employs a 12-column grid system with a maximum container width of 1280px, ensuring content remains readable on large displays while adapting fluidly to smaller screens. The gutter width is 24px, applied consistently between columns and as the primary margin unit for section separation. Vertical rhythm follows the 8px unit scale: sections are separated by lg spacing (40px), cards and components use md spacing (24px) for internal padding, and micro-interactions use sm (12px) or xs (4px) spacing. The hero section spans full-width with a semi-transparent overlay (rgba(0, 0, 0, 0.3)) over a background image, creating visual depth while maintaining text legibility. Content sections use the full 1280px container width on desktop, with 24px side margins on tablet and mobile. White

Elevation & Depth

Visual hierarchy is achieved through a restrained shadow system and subtle background color shifts rather than dramatic depth effects. Level 1 (Base): flat surfaces with no shadow, using only a 1px border in outline-variant (#B8B3A2) for definition. Level 2 (Elevated Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), paired with a surface-container background (#F4F3EE), creating a subtle lift from the base. Level 3 (Modals & Overlays): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with a white background and 1px border, establishing clear separation from the page. Interactive states (hover, focus

Shapes

The shape language follows 'Architectural Precision'—sharp, rectilinear forms that reflect the brand's engineering rigor and institutional heritage. Buttons use a 2px border-radius (rounded.sm), creating a subtle softness without compromising the geometric clarity. Cards and containers use 4px (rounded.DEFAULT) for a slightly more approachable appearance while maintaining the structured aesthetic. Modals and elevated surfaces use 8px (rounded.lg) to signal importance and create visual distinction from standard components. Circular elements (secondary buttons, avatar placeholders, icon buttons)

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. Primary buttons use background: {colors.primary} (#E60000), text-color: white, padding: 8px 24px, height: 44px, border-radius: 2px, and font-weight: 600. On hover, the background shifts to {colors.primary-container} (#8A000A) with a smooth transition (all 150ms ease-out). On active/pressed, the background darkens further to #8A000A with box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2). Secondary buttons use a transparent background with a 1px border in {colors.outline} (#5A5D5C), text-color: {colors.on-surface}, and border-radius: 50% for icon-only variants or 4px for text buttons. On hover, secondary buttons shift to background: {colors.surface-container-high} (#E0DFD7) with the same bord

Do's and Don'ts

**Do**

• Do use UBS Red (#E60000) exclusively for primary CTAs, links, and active states—never for backgrounds or large surface areas.
• Do maintain 7:1+ contrast ratios between text and background colors to meet WCAG AAA accessibility standards.
• Do apply 24px (md spacing) as the default padding for cards and containers; use 40px (lg spacing) for section separation.
• Do use Frutiger with Arial fallback; never substitute with system fonts or web-safe alternatives without design review.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to elevated cards and box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) to modals.
• Do use 2px border-radius for buttons, 4px for cards, and 8px for modals to maintain the architectural precision aesthetic.
• Do include a 1px border in outline-variant (#B8B3A2) on all card and container elements for visual definition.
• Do use 150ms ease-out transitions for all interactive state changes (hover, focus, active).

**Don't**

• Don't use red (#E60000) for error states—use the dedicated error color (#DA0000) instead.
• Don't apply border-radius > 12px on any component; the brand identity depends on geometric precision.
• Don't use drop shadows with blur-radius > 24px or spread-radius > 0; keep shadows subtle and grounded.
• Don't mix typefaces; Frutiger is the only approved primary font; Arial is the fallback only.
• Don't apply padding < 12px (sm spacing) inside cards or containers; maintain visual breathing room.
• Don't use color alone to communicate state; always pair color changes with text labels, icons, or borders.
• Don't apply background colors to large text areas; use white (#FFFFFF) or surface-container (#F4F3EE) only.
• Don't create custom color tokens outside the defined palette; all colors must reference the M3 color system.