Fubon Bank

Overview

Fubon Bank is a Hong Kong-based financial services institution serving personal, commercial, and investment banking customers with a modern, accessible digital-first interface. The design system embodies a "Professional Clarity" aesthetic—combining institutional trust with contemporary usability. The UI prioritizes information hierarchy through a restrained color palette anchored by a vibrant teal primary (#007dbc), paired with neutral grays and supporting blues, creating a visual language that feels both authoritative and approachable. The brand personality is confident yet service-oriented, speaking to customers with precision and respect. Voice example: "Manage your finances with clarity—view balances, transfer funds, and track spending in one secure dashboard."

Colors

The color system is built on a foundation of clean whites and light grays (surface stack: #ffffff → #f5f5f5 → #eeeeee → #dddddd) that provide visual breathing room and reduce cognitive load. Primary (#007dbc) is the signature accent used exclusively for CTAs, active navigation states, and key interactive elements—it conveys trust and financial authority. Secondary (#428bca) and Tertiary (#01b5ae) provide supporting accent roles: secondary appears in secondary buttons and informational highlights, while tertiary (a teal variant) is reserved for success states and confirmatory actions. The on-surface text hierarchy uses three tones: #333333 for primary content, #777777 for secondary labels, and #999999 for disabled or tertiary information. Error states employ #a94442 (a muted red) with a lig

Typography

The type system uses Open Sans as the primary typeface, paired with system fallbacks (Optima, Arial, 微軟正黑體, Heiti TC) to ensure consistent rendering across browsers and devices. Display (56px, 700 weight) anchors hero sections and major announcements with -0.02em letter-spacing to maintain visual tightness. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure page sections and card titles, using -0.01em and 0em letter-spacing respectively. Body text (18px and 16px, 400 weight) maintains 28px and 24px line-heights for comfortable reading at arm's length. Labels (14px and 12px, 600 and 500 weights) use positive letter-spacing (+0.02em to +0.03em) to enhance legibility in dense UI contexts. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) on small labels (label-sm) when

Layout

The layout follows a 12-column responsive grid with a fixed max-width of 1280px, centering content on desktop while allowing full-bleed sections for hero imagery and promotional banners. The spacing scale uses an 8px unit base: xs (4px) for micro-adjustments, sm (12px) for compact groupings, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for full-page rhythm. Gutter spacing is consistently 24px on desktop, collapsing to 12px on tablets and 8px on mobile. Container padding follows the md spacing token (24px) on all sides, creating a consistent frame around content blocks. White-space is treated as a first-class design element—sections are separated by lg spacing (40px) to reduce visual density and improve scannability. The header and navigation

Elevation & Depth

Depth is conveyed through a subtle shadow system rather than color shifts. Level 1 (Base/Surface) uses no shadow, maintaining a flat foundation. Level 2 (Standard Cards) applies {elevation.md}: 0 3px 8px rgba(0, 0, 0, 0.15), creating a gentle lift that separates cards from the background without visual heaviness. Level 3 (Elevated/Modals) uses {elevation.lg}: 0 8px 24px rgba(0, 0, 0, 0.12), providing clear separation for overlays and modal dialogs. Hover states on interactive elements transition to Level 3 shadow over 200ms (ease-in-out), signaling interactivity. Inset shadows (inset 0 -1px 0

Shapes

The shape system follows a "Structured Softness" philosophy—combining sharp, geometric precision with subtle rounding to balance institutional formality with modern approachability. Buttons use lg radius (10px) to signal interactivity and reduce visual harshness. Cards and containers use lg radius (10px) for primary content blocks and xl radius (15px) for hero sections and promotional banners, creating visual hierarchy through increasing roundness. Input fields and form controls use DEFAULT radius (4px) to maintain a compact, focused appearance. Badges and small UI elements use full radius (99

Components

Action Elements Buttons are the primary call-to-action mechanism. button-primary uses {colors.primary} (#007dbc) background with white text, 12px 24px padding, and 44px height—sized for comfortable touch targets on mobile. On hover, the background darkens to #005784 with a 200ms transition (ease-in-out). button-secondary uses a transparent background with a 2px solid {colors.primary} border, maintaining the same padding and height; on hover, it fills with {colors.primary-container} (#e5f8f7) and text shifts to {colors.on-primary-container} (#01b5ae). button-tertiary is a compact variant with rounded pill shape (full radius), 2px 15px padding, and 28px height—used for secondary actions and inline links. All buttons use {typography.label-md} (14px, 600 weight, 0.02em letter-spacing) for

Do's and Don'ts

**Do**

• Do use {colors.primary} (#007dbc) exclusively for primary CTAs, active states, and focus indicators—never dilute the primary color by overusing it on secondary elements.
• Do maintain consistent 24px (md) spacing between major sections and 12px (sm) spacing within component groups to create visual rhythm and reduce cognitive load.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and containers to establish a clear visual hierarchy without excessive shadow depth.
• Do use Open Sans at 14px (label-md) with 0.02em letter-spacing for all button and label text to ensure crisp, legible typography at small sizes.
• Do implement 200ms ease-in-out transitions on all hover and focus states to provide smooth, predictable feedback without feeling sluggish.

**Don't**

• Don't use colors outside the defined palette—avoid introducing new accent colors or gradients that conflict with the primary (#007dbc) and secondary (#428bca) system.
• Don't apply rounded corners larger than {rounded.xl} (15px) on standard UI elements; reserve xl radius for hero sections and promotional banners only.
• Don't mix typeface families within a single component; always use Open Sans with system fallbacks, never introduce serif or decorative fonts.
• Don't use box-shadows with blur radii greater than 24px or opacity greater than 15%—excessive shadows create visual noise and reduce clarity.
• Don't disable buttons by reducing opacity; always use a dedicated disabled state with {colors.surface-container-high} background and {colors.on-surface-variant} text to maintain accessibility.