Fubon DESIGN.md

Overview

Visual Theme & Atmosphere

Fubon Financial Holding (富邦金控) and its flagship retail arm Taipei Fubon Bank (台北富邦銀行) share a design language built on trust, approachability, and Taiwanese banking heritage. The canvas is clean white (#ffffff) underpinned by a confident, mid-range blue — #0093c1 on the bank product surface, the marginally deeper #008fc7 on the group holding site — that reads as clear, accessible, and dependably institutional without the heaviness of legacy banking navy. The page motto "正向力量 成就可能" (Positive Power — All Possible) signals this: optimism embedded in the brand DNA, not just compliance.

Typography runs in Roboto as the Latin primary, with Noto Sans TC carrying Traditional Chinese glyphs — the standard pairing for modern TW financial digital products, chosen for legibility across dense financial tables, multilingual UI, and accessibility mandates. Section headings at 24px / weight 700 project confidence; body text at 16px / 400 breathes comfortably. There is no ultra-heavy display font à la Korean fintechs — Fubon uses weight 700 selectively on section titles and button labels, keeping the rest at regular weight for a calm, readable financial interface.

The interactive system is built around the Fubon blue as the sole saturated action color. "了解更多" (Learn More) links appear in #0093c1 text; the primary button fills #0093c1 with white text; the cookie/popup confirm fills the same. Shadows appear on floating elements — a 30px spread card shadow (rgba(0,0,0,0.11) 5px 5px 30px) and the digital service FAB — giving gentle elevation without drama. Section separation relies on flat tinted surfaces (#f5f5f5 grey and #f3fbfe sky-blue) rather than heavy borders.

Key Characteristics:

• Fubon Blue (#0093c1) as the single action and brand anchor color
• Roboto + Noto Sans TC — accessible, multilingual-ready pairing
• Section titles at 24px weight 700; body at 16px / 400 — no display ultra-bold
• White canvas with #f5f5f5 and #f3fbfe tinted surface sections
• Ink text in deep near-black navy (#0c0e1f) instead of pure black
• Secondary text at warm dark-grey (#494a57) for readability with comfort
• Gentle card shadow (rgba(0,0,0,0.11) 5px 5px 30px) — soft elevation not harsh depth
• Rounded corners at 12px for buttons; service icons on circular 50% containers

Primary tasks

• Compare foreign currency rates before every trip abroad
• Open a bank account digitally without visiting a branch
• Find the nearest branch with the 查詢據點 lookup
• Run corporate payroll and FX services as a small-business owner
• Switch to the English-language corporate banking section as a foreign resident

Brand Narrative

Fubon Financial Holding (富邦金控) traces its roots to Taipei City Insurance (台北市產物保險), established in 1961 by the Tsai (蔡) family. Over six decades the group expanded into banking, life insurance, securities, and investment trusts, becoming one of Taiwan's two largest financial holding companies alongside Cathay. The Tsai family remains at the helm — Chairman Tsai Ming-Chung (蔡明忠) and his brother Tsai Ming-Hsing built a conglomerate that spans Taiwan, Hong Kong, mainland China, Vietnam, and beyond.

Taipei Fubon Bank (台北富邦銀行) emerged from the 2005 merger of Fubon Bank and Taipei Bank — pairing the group's financial scale with Taipei Municipal Bank's deep roots in public service. This heritage shapes the brand's dual register: commercially ambitious yet civic in spirit, serving individual depositors and SMEs with the same presence it brings to institutional investors.

What distinguishes the Fubon design approach from peers is this civic-professional balance. Where some TW fintech brands chase a startup aesthetic, Fubon anchors in legibility, multilingual accessibility, and a color identity that signals trust (the blue) without intimidation. The 2024–2026 digital banking push — Fubon+ mobile app, digital account opening, and new branch formats — drives a modernisation push, but the core palette and typographic register remain steady.

Principles

1. Positive progress over risk avoidance. The tagline 正向力量 is not marketing language — it reflects a brand posture that leads with possibility. UI implication: primary actions are always inviting; warning states explain and redirect, not just block.
2. Accessibility for all generations. Fubon serves Taiwan's full demographic range, from young digital-first customers to older branch visitors. UI implication: 16px body minimum, WCAG-compliant colour ratios on blue/white, bilingual layouts with equal TC/Latin legibility.
3. Clarity over decoration. The financial interface should make rates, terms, and actions immediately readable. UI implication: section titles are bold and direct; marketing language is kept off product data cards.
4. Trust through consistency. The brand blue appears identically across all touchpoints — bank, insurance, securities, corporate. UI implication: #0093c1 (bank) and #008fc7 (group) are intentionally close; do not introduce a third blue variant.
5. Digital-forward, branch-aware. Fubon invests in digital UX while maintaining 150+ branch locations. UI implication: service shortcuts (線上申辦, 預約諮詢, 查詢據點) always co-exist; digital and physical are not siloed.

Personas

Personas below are illustrative archetypes informed by Fubon's publicly observable product range and Taiwanese banking demographics — not real individuals.

陳小美, 28, 台北. A young professional who opened a digital account and uses the Fubon+ app for daily payments and currency exchange. Values speed and transparent rates; compares foreign currency before every trip. Chose Fubon because the digital account opening was friction-free and the mobile interface is clean.

林建國, 45, 新竹. An SME owner using Taipei Fubon Bank for corporate payroll and FX services. Trusts the Fubon brand because of its Taipei Bank heritage and the personal relationship with his business banker. Accesses the website mainly for rate lookups and branch location.

吳麗華, 62, 台中. A retiree managing savings and insurance products across the Fubon group. Prioritises clear, unhurried information; appreciates that the site is readable and multilingual-accessible. Uses the 查詢據點 function to find her nearest branch.

Kevin, 32, 台北 (expat). A foreign national working in Taiwan who needs English-language banking. Uses the English-language corporate banking section. Values that Fubon Financial has an international footprint (HK, Vietnam, mainland China).

Colors

Primary

• Fubon Blue (#0093c1): The primary brand CTA color. Button backgrounds (確認, 同意), "了解更多" link text, icon accents, and category chips. Consistent across bank and holding surfaces.
• Fubon Blue Deep (#008fc7): Group financial holding site variant — a slightly deeper blue used for the large group-level CTA buttons (60px height) and member sub-buttons.
• Primary Hover (#005c7a): Darker blue for hover and active states on primary interactive elements.

Accent

• Teal Accent (#00a59b): Used for eco/sustainability-themed labels, success states, and the 富邦人壽 (life insurance) subsidiary badge. A calm, trustworthy green-teal that complements the blue anchor.
• Error Red (#d32f2f): Semantic error color for validation messages and critical alerts. Deep red that reads clearly on white canvas without visual aggression.
• Sky Light (#3cbee7): Light sky-blue for secondary subsidiary buttons (富邦銀行, 富邦證券) and certain promotional callouts.

Neutral & Surface

• Canvas White (#ffffff): Page background, cards, and button text on blue.
• Surface Grey (#f5f5f5): Subtle cool-grey tinted section backgrounds.
• Surface Sky (#f3fbfe): Very light blue-tinted surface for info cards and service sections.
• Hairline (#d7d6db): Thin dividers, input borders, and soft separators.
• Muted Grey (#aeafb4): Disabled states and lower-emphasis metadata.

Text

• Ink Navy (#0c0e1f): Primary text, headings, nav items — a very dark blue-black with financial gravitas.
• Body Grey (#494a57): Secondary body text, sub-nav links, caption text.
• Muted (#7d7f87): Tertiary text, placeholder text.

Typography

Font Family

• Latin: Roboto — clean, neutral, highly legible for dense financial UI
• Traditional Chinese: "Noto Sans TC" — complete TC Unicode coverage, pairs seamlessly with Roboto
• Fallback: Arial, Helvetica, 微軟正黑體, Microsoft JhengHei, Apple LiGothic, 蘋果儷中黑 — broad compatibility across TW Windows/macOS environments

Hierarchy

Principles

• Bilingual first: Roboto + Noto Sans TC maintain equal visual weight across Latin and TC glyphs — no awkward size compensation needed.
• Section headings stay at 700: weight 700 is the maximum used; there is no 800/900 display weight in this system.
• Functional sizing: body at 16px, caption at 14px — comfortable for mixed-age Taiwanese banking users and accessibility compliance.
• No negative letter-spacing: Unlike KR fintech counterparts, Fubon uses default tracking throughout — the system trusts the typefaces' own spacing.

Layout

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px
• Section padding: 48px vertical between major content bands

Grid & Container

• Desktop: centered container with side padding; hero banners extend full-width
• Hot-service icon row: 2×4 grid of quick-access service icons with equal spacing
• Footer: multi-column link grid, Roboto 14px / #494a57

Whitespace Philosophy

• Generous between sections: alternating white/grey/sky-blue bands create separation without heavy borders
• Compact within sections: financial data (exchange rates, announcements) presented densely for efficiency
• Icon-driven shortcuts: the 8-icon quick-access grid replaces prose with visual affordance

Border Radius Scale

• Small (4px): badges, chip labels, form inputs
• Medium (12px): primary/secondary popup buttons — the workhorse interactive radius
• Full (50%): circular floating service button (digital banking FAB)
• Sharp (0px): large full-width group CTA buttons — authoritative, institutional feel

Responsive Behavior

Breakpoints

Touch Targets

• Large group CTA buttons at 60px height — comfortable thumb target
• Quick-service icons: padded icon containers for easy tapping
• Floating digital-service button: circular, clearly distinct from content

Collapsing Strategy

• Section headings maintain 24px / 700 across breakpoints
• Tinted surface bands remain full-width at all sizes
• Exchange rate table: horizontal scrollable on mobile

Elevation & Depth

Shadow Philosophy: Fubon uses elevation sparingly — the dominant pattern is flat tinted bands, not card stacks. The 30px-spread card shadow is soft and diffused; it suggests depth without competing with the brand blue as the visual focal point.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.card: rgba(0, 0, 0, 0.11) 5px 5px 30px 0px
• shadow.soft: rgba(0, 0, 0, 0.25)

Motion & Easing

No motion duration or easing token is promoted. The capture bundle for this reference records no transition or animation property, and no official source consulted publishes a motion scale. The behaviour described below was observed; treat any exact duration or curve as a local extension until a component-level official source verifies it.

Motion rules: Motion is functional and conservative — matching the institution's temperament. Navigation dropdowns ease in smoothly; page banner transitions use a clean fade rather than parallax or spring. Mobile touch targets respond immediately on press (sub-100ms feedback). Under prefers-reduced-motion: reduce, all animated transitions collapse to instant cut; the site remains fully usable.

Components

Buttons

Primary (確認 / 同意)

• Background: #0093c1
• Text: #ffffff
• Radius: 12px
• Font: 16px Roboto weight 700
• Border: 1px solid #0093c1
• Use: Popup confirm, cookie consent, primary action

Secondary / Cancel (取消)

• Background: #eef0f0
• Text: #0c0e1f
• Radius: 12px
• Font: 16px Roboto weight 700
• Border: 1px solid #eef0f0
• Use: Cancel / dismiss in popup dialogs

Large Group CTA (了解更多)

• Background: #008fc7
• Text: #ffffff
• Height: 60px
• Radius: 0px
• Font: 16px Roboto weight 400
• Use: Group-level primary CTA, full-width section buttons

Cards & Containers

White Content Card

• Background: #ffffff
• Text: #0c0e1f
• Shadow: rgba(0, 0, 0, 0.11) 5px 5px 30px 0px
• Use: Product / feature cards with gentle floating elevation

Grey Surface Card

• Background: #f5f5f5
• Text: #0c0e1f
• Use: Alternating section background tint — separates content zones without borders

Sky-Blue Info Card

• Background: #f3fbfe
• Text: #0c0e1f
• Use: Light-blue tinted info sections, product highlights

Navigation

Primary Nav Link

• Text: #0c0e1f
• Font: 18px Roboto weight 400
• Active: text color #0093c1, underline indicator
• Background: transparent on default; hover state shows Fubon Blue text

Badges

Primary Blue Badge

• Background: #0093c1
• Text: #ffffff
• Radius: 4px
• Use: Category tags, service indicators, subsidiary label chips

Teal Success Badge

• Background: #00a59b
• Text: #ffffff
• Radius: 4px
• Use: Success, sustainability, eco-friendly service tags

Inputs

Default Input

• Background: #ffffff
• Border: 1px solid #d7d6db
• Text: #0c0e1f
• Radius: 0px
• Font: 14px Roboto weight 400
• Placeholder: #7d7f87
• Use: Search fields, form inputs

Verified: 2026-06-22 Tier 1 sources: https://www.fubon.com/banking/ (Taipei Fubon Bank personal banking), https://www.fubon.com/ (Fubon Financial Holding Group) Tier 2 sources: getdesign.md/fubon — not found; styles.refero.design/?q=fubon — not found Conflicts unresolved: none (group site blue #008fc7 vs bank site #0093c1 — both are brand blues; bank CTA value used as primary)

States

Do's and Don'ts

Do

• Use Fubon Blue (#0093c1) for primary CTAs, active link states, and icon accents
• Pair Roboto with Noto Sans TC for all bilingual UI — never separate the two
• Use 24px / weight 700 for section titles; keep body at 16px / 400
• Separate content zones with flat tinted backgrounds (#f5f5f5, #f3fbfe)
• Set ink text to deep navy (#0c0e1f) rather than pure black for warmth
• Apply 12px radius to popup/confirm buttons; keep large CTA banners at 0px for authority
• Use the teal accent (#00a59b) for success and sustainability-themed elements
• Keep the shadow soft and diffused — rgba(0,0,0,0.11) 5px 5px 30px not harsh drop shadows

Don't

• Use more than one saturated hue on the same surface — Fubon Blue is the single action color
• Apply ultra-bold display weights (800+) — 700 is the maximum
• Use pure black (#000000) for body text — the system uses #0c0e1f near-black
• Mix the group's deeper blue (#008fc7) and bank blue (#0093c1) on the same page without intent
• Apply heavy box shadows — Fubon elevation is gentle, not dramatic
• Use sharp 0px radius on popup buttons — they are 12px rounded for approachability
• Set negative letter-spacing on headlines — Fubon uses default tracking
• Use pure grey backgrounds — the tint (#f5f5f5) has subtle cool warmth

Voice & Tone

Fubon's voice is reassuring, empowering, and community-grounded — the brand of Taiwan's largest financial group presenting itself as a trusted partner for life, not a faceless institution. The brand tagline "正向力量 成就可能" (Positive Power — All Possible) crystallizes this: financial products framed as enablers of aspiration rather than gatekeepers of access.

Voice samples (verbatim from live site, verified 2026-06-22):

• "正向力量 成就可能" — group brand tagline, homepage hero. (verified live 2026-06-22)
• "全方位守護" — personal banking section heading (all-round protection). (verified live 2026-06-22)
• "北富銀理財學院" — wealth management education section. (verified live 2026-06-22)

Forbidden register: alarming or fear-based financial urgency, excessive promotional superlatives, jargon-first explanations without plain-language accompaniment.

Agent Prompt Guide

Quick Color Reference

• Primary Action: Fubon Blue (#0093c1)
• Group CTA Deep: #008fc7
• Teal Success: #00a59b
• Sky Accent: #3cbee7
• Background: Canvas White (#ffffff)
• Section Tint: Surface Grey (#f5f5f5)
• Info Tint: Sky Blue (#f3fbfe)
• Primary Text: Ink Navy (#0c0e1f)
• Secondary Text: Body Grey (#494a57)
• Muted / Placeholder: #7d7f87
• Hairline / Border: #d7d6db

Example Component Prompts

• "Design a Fubon primary button: #0093c1 bg, white text, 12px radius, 16px Roboto 700, 1px solid #0093c1 border. Cancel button: #eef0f0 bg, #0c0e1f text, same radius."
• "Build a Fubon section: white #ffffff background. Section title 24px Roboto 700, #0c0e1f. Body copy 16px / 400, #494a57. CTA link '了解更多' at 18px / 500, #0093c1."
• "Create a feature card: white bg, rgba(0,0,0,0.11) 5px 5px 30px shadow, no border radius. Section title inside 24px / 700, #0c0e1f."
• "Build a nav: white 112px header. Roboto nav links 18px / 400, #0c0e1f default, #0093c1 on active. Group member dropdown bg #008fc7."

Iteration Guide

1. Fubon Blue (#0093c1) is the single action color — every primary button and active link
2. Roboto + Noto Sans TC — always paired, never separated
3. Weight 700 only for section titles and buttons; 400 everywhere else
4. Flat tinted bands (#f5f5f5, #f3fbfe) do the layout work, not shadows or dividers
5. Ink navy (#0c0e1f) for all primary text — never pure #000000
6. 12px radius on interactive buttons; 0px on large authoritative CTA banners

Governance

Known Gaps

• Contrast, button-primary. Text #ffffff on #0093c1 measures 3.53:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-cta-lg. Text #ffffff on #008fc7 measures 3.65:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-blue. Text #ffffff on #0093c1 measures 3.53:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-teal. Text #ffffff on #00a59b measures 3.06:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.