Design System Inspiration of E.SUN Bank

1. Visual Theme & Atmosphere

E.SUN Bank (玉山銀行) is Taiwan's most digital-forward commercial bank, and its official website — esunbank.com — channels that reputation into a design language that is clean, credentialed, and warmly approachable without feeling corporate-cold. The canvas is pure white (#ffffff), trimmed with a cool light-grey surface (#f4f8fa) for content zones, and the defining brand color is a confident jade teal (#00a19b) that saturates every interactive element from primary CTAs to section headings. The teal is not aggressive: it carries a natural, ESG-conscious warmth — a color language that says "responsible finance" without the stiffness of traditional banking navy.

The typographic system is anchored in Noto Sans TC and Microsoft JhengHei, the two workhorse Traditional Chinese web fonts. At display sizes the browser delivers Noto Sans TC at weight 700 for hero campaign headlines — "一個好的ESG策略就是一個好的企業發展策略" at 38px bold (#007a7a) sets the authoritative yet modern tone. Section headings sit at 32px / weight 500 in teal (#00a19b); sub-feature titles drop to 20px / weight 500, also teal, maintaining the color as the system's consistent semantic signal: teal means important, navigational, or actionable. Body text at 16px / weight 400 in near-black ink (#1c1c1c) keeps information accessible and dense without strain.

Depth in the E.SUN system comes not from shadows per se, but from a distinctive teal-tinted ambient glow: rgb(208, 230, 230) 0px 0px 12px 0px appears on both the white content cards and the exchange-rate table, creating a halo that harmonizes with the brand palette. Cards float on the page with this soft teal luminance — a subtle but brand-consistent elevation signal. The overall atmosphere is of a modern Taiwanese bank that has genuinely invested in its digital product: clean, confident, trustworthy, and oriented toward everyday consumers navigating credit cards, savings, and investments in one cohesive interface.

Key Characteristics:

• Jade teal (#00a19b) as the single interactive and heading color — consistent from nav to CTA to section titles
• Deep teal (#007a7a) reserved for campaign/hero headline weight to add gravitas
• Noto Sans TC / Microsoft JhengHei — Traditional Chinese web font standard for legibility
• Weight 700 for hero display, weight 500 for sections, weight 400 for body and UI
• Teal ambient shadow (rgb(208, 230, 230)) instead of grey/black shadows — brand-colored depth
• Near-black ink (#1c1c1c) for body text; muted grey (#7c7c7c) for secondary
• Strict 4px base radius on interactive elements; 8px on content cards
• ESG and digital banking prominently foregrounded — product and values aligned

2. Color Palette & Roles

Primary

• E.SUN Teal (#00a19b): The primary brand color. CTA button backgrounds, active nav labels, section headings, card borders. A jade-green teal that conveys trust, nature, and digital modernity simultaneously.
• Deep Teal (#007a7a): Reserved for hero campaign headlines and high-impact typography. A darker teal that adds authoritative weight to the brand's most important messages.
• Pure White (#ffffff): Page background, card surfaces, text on teal backgrounds. The dominant canvas.

Surface & Neutral

• Surface Blue-Grey (#f4f8fa): Cool-tinted off-white used for alternating content sections and subtle zone separation.
• Surface Alt (#f5f5f5): Secondary neutral surface for lighter content zones.
• Teal Tint (#d0e6e6): The shadow color — teal-tinted ambient glow that ties card elevation to the brand palette.
• Hairline (#d9d9d9): Thin borders, table dividers, input outlines.

Text

• Ink (#1c1c1c): Primary body text, near-black for maximum legibility without harsh pure-black contrast.
• Muted (#7c7c7c): Secondary nav labels, inactive states, supporting copy.
• Muted Alt (#999999): Tertiary text, fine print, metadata.
• Error (#c92e34): Validation errors (rare but present in form surfaces).

On-Color

• On-Primary (#ffffff): White text on teal CTA buttons and teal backgrounds.

3. Typography Rules

Font Family

• Primary Display: Noto Sans TC (with Arial and Microsoft JhengHei as fallbacks) — loaded for all Traditional Chinese content and UI elements.
• System Fallback: 微軟正黑體 (Microsoft JhengHei) → 新細明體 → sans-serif — ensuring legibility across all Windows and macOS Traditional Chinese environments.

Hierarchy

Principles

• Teal text for structure, ink for content: The teal (#00a19b) appears in headings and section labels, creating instant visual hierarchy without relying on size alone. Body copy stays in near-black (#1c1c1c).
• Weight 500 as the section voice: Unlike Korean peers that use ExtraBold for sections, E.SUN uses Medium (500) — confident but approachable, not loud.
• Consistent line-height at 48px for H2s: The 32px/48px section heading rhythm creates a stable, editorial grid across the homepage.
• Traditional Chinese first: Font stack prioritizes TC-optimized typefaces; spacing and sizing are calibrated for hangul/CJK character density.

4. Component Stylings

Buttons

Primary CTA (線上開戶)

• Background: #00a19b
• Text: #ffffff
• Radius: 4px
• Padding: 10px
• Height: 46px
• Font: 16px / weight 400 / Noto Sans TC
• Border: 1px solid #00a19b
• Use: Primary call-to-action in global nav header (open account online)

Large Return CTA (返回首頁)

• Background: #00a19b
• Text: #ffffff
• Radius: 4px
• Padding: 0px 50px
• Height: 65px
• Font: 16px / weight 400
• Use: Prominent return-home button on error / 404 pages

Hero Ghost Link (線上開戶 secondary)

• Text: #007a7a
• Radius: 4px
• Padding: 8px 20px
• Font: 20px / weight 400
• Border: implicit teal outline
• Use: Secondary CTA within hero campaign banners

Login Link (登入)

• Text: #00a19b
• Radius: 0px
• Padding: 10px 40px 10px 10px
• Font: 16px / weight 400
• Use: Login text-link in the global nav header

Cards & Containers

Feature / Activity Card

• Background: #ffffff
• Radius: 8px
• Shadow: rgb(208, 230, 230) 0px 0px 12px 0px
• Use: Activity cards, news cards — teal-tinted ambient shadow as brand-colored elevation

Exchange Rate Table Card

• Background: #ffffff
• Radius: 4px
• Shadow: rgb(208, 230, 230) 0px 0px 12px 0px
• Use: Exchange rate widget container on the personal banking homepage

Hero Service Item Cards

• Background: transparent (rgba 0,0,0,0)
• Radius: 4px
• Border: 1px solid #ffffff
• Use: Quick-access service link tiles overlaid on the teal hero background

Content Service Card (信用卡 page)

• Background: #ffffff
• Radius: 4px
• Padding: 30px
• Border: 1px solid #00a19b
• Use: Product introduction card on credit card category page (信用卡介紹)

Inputs

Text Input / Form Field

• Background: #ffffff
• Border: 1px solid #d9d9d9
• Radius: 4px
• Font: 16px / weight 400 / Noto Sans TC
• Use: Standard form inputs on white surfaces

Tabs & Navigation

Top-tier Navigation

• Text (default): #7c7c7c / weight 400
• Text (active): #00a19b / weight 500
• Font: 14px / Noto Sans TC
• Height: ~20px nav items (in 70px header)
• Use: Top segment navigation (個人金融, 企業/商家, 私銀/亞資, ESG 永續金融)

Sub-navigation (in-page)

• Text: #1c1c1c
• Padding: 8px 20px
• Height: 42px
• Font: 18px / weight 400
• Use: Secondary nav tabs on product pages (產品與服務, 生活金融, 申辦/繳費)

Badges

Section Heading Badge (teal label)

• Text: #00a19b
• Font: 32px / weight 500
• Use: Section-level heading labels function as visual "badges" for content zones

---

Verified: 2026-06-22 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://www.esunbank.com/zh-tw/personal, https://www.esunbank.com/zh-tw/personal/credit-card Tier 2 sources: getdesign.md/esunbank — 0 results (not listed); styles.refero.design/?q=e.sun+bank — no matching results found Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 16px, 20px, 24px, 30px, 48px, 64px
• Service CTA horizontal padding at 30px inside content cards
• Nav sub-items use 20px horizontal padding

Grid & Container

• Full-width page structure with centered content max-width
• Homepage: hero banner → quick-service tiles → exchange rate widget → news/activities → digital services → articles
• Product pages: breadcrumb header → H1 → sub-nav tabs → service cards in responsive grid
• Cards in a 3-4 column grid on desktop, collapsing to single column on mobile

Whitespace Philosophy

• Generous section padding — teal H2 headings each carry 24px top padding
• Cards breathe within their grid container; shadow provides grouping without tight borders
• The hairline (#d9d9d9) is used sparingly — teal color + shadow do the primary organizing

Border Radius Scale

• Small (4px): buttons, input fields, small card containers — the system default
• Medium (8px): feature cards, activity cards — elevated content containers
• Large (16px): not observed in primary surfaces (reserved for special UI)
• Full (9999px): not the primary pattern (E.SUN avoids pill buttons, preferring 4px conservative radius)

6. Depth & Elevation

Shadow Philosophy: E.SUN uses a distinctly brand-colored shadow — a soft teal rgb(208, 230, 230) glow that ties card elevation to the bank's signature teal palette. This is deliberate: even the depth signal reads as "E.SUN." Traditional black/grey drop shadows are absent from the primary layout. The result is a cohesive, on-brand elevation system where floating elements feel like they belong to the same design language as the buttons and headings.

7. Do's and Don'ts

Do

• Use jade teal (#00a19b) consistently for all interactive elements, headings, and navigational signals
• Use deep teal (#007a7a) for campaign hero headlines to add authoritative weight
• Apply teal ambient shadow (rgb(208, 230, 230)) on all elevated cards and containers
• Use Noto Sans TC at 32px / weight 500 for section headings — maintain the editorial rhythm
• Keep button radius at 4px — E.SUN does not use pill/round buttons
• Use near-black ink (#1c1c1c) for body text; never pure black
• Separate sections via #f4f8fa tinted background shifts and hairline borders
• Maintain Traditional Chinese font priority in stack: Noto Sans TC → Microsoft JhengHei

Don't

• Use grey or black shadows — the system's elevation language is teal-tinted
• Apply rounded corners above 8px on cards or buttons — the aesthetic is structured and precise
• Spread accent colors beyond teal — there is no red, orange, or purple in the primary UI
• Use bold (700) weight for section headings — Medium (500) is the deliberate section voice
• Place pure black (#000000) text in body copy — the system's ink is #1c1c1c
• Create pill-shaped CTAs — the conservative 4px radius is a trust signal in the banking context
• Use muted grey (#7c7c7c) for headings — grey is reserved for inactive/secondary states
• Mix multiple heading colors — teal for structural headings, ink for content, deep teal for hero only

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary CTA "線上開戶" at 46px height — comfortably tappable
• Large return CTA at 65px height — oversized for error page reassurance
• Sub-nav links at 42px height with 20px horizontal padding — generous tap area

Collapsing Strategy

• Hero headline font-size scales down on mobile while maintaining weight 700
• Service tile grid collapses from multi-column to single column
• Exchange rate widget becomes a scrollable table on narrow viewports
• News/activity tabs maintain their 42px height across all breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA / headings: E.SUN Teal (#00a19b)
• Hero headline emphasis: Deep Teal (#007a7a)
• Page background: Pure White (#ffffff)
• Content section background: Surface Blue-Grey (#f4f8fa)
• Card shadow: Teal Tint (#d0e6e6 ambient rgb(208, 230, 230))
• Primary body text: Ink (#1c1c1c)
• Secondary / inactive: Muted (#7c7c7c)
• Dividers: Hairline (#d9d9d9)
• On-primary text: White (#ffffff)

Example Component Prompts

• "Create a primary CTA button: background #00a19b, white text, 4px radius, 46px height, 10px vertical padding, 16px Noto Sans TC weight 400. Label: 線上開戶. Border: 1px solid #00a19b."
• "Design a content card on white (#ffffff), 8px radius, teal-tinted shadow rgb(208, 230, 230) 0px 0px 12px 0px. Section heading inside: 32px / weight 500 / #00a19b. Body text: 16px / weight 400 / #1c1c1c."
• "Build a section layout: white canvas. H2 section title 32px / 500 / #00a19b / 48px line-height. Content zone below uses #f4f8fa background for visual separation."
• "Create top navigation: 70px header height, #ffffff background. Nav items: 14px Noto Sans TC weight 400, #7c7c7c. Active item: #00a19b weight 500. Right-aligned CTA: #00a19b background, white text, 4px radius, 46px height."

Iteration Guide

1. Teal (#00a19b) is the single brand color — use it for all structure, headings, and CTAs
2. Shadow with teal tint (rgb(208, 230, 230)) — the elevation language is on-brand
3. 4px radius on buttons, 8px on cards — structured, not pillowy
4. Noto Sans TC weight 500 for sections, weight 700 for hero only
5. Near-black ink (#1c1c1c) for all body text
6. Background shifts (#f4f8fa) + hairlines (#d9d9d9) separate sections — no black shadows
7. Deep teal (#007a7a) only for the most prominent campaign headline

---

10. Voice & Tone

E.SUN Bank's voice is trustworthy, progressive, and accessible — a traditional commercial bank that has genuinely embraced digital transformation and wants its customers to feel that journey alongside it. The homepage ESG headline "一個好的ESG策略就是一個好的企業發展策略" ("A good ESG strategy is a good business development strategy") exemplifies the register: principled, direct, and surprisingly substantive for a bank homepage. It doesn't pitch; it declares a point of view. Marketing copy positions E.SUN as a partner in daily financial life ("便利你的生活日常" — making your everyday life more convenient) rather than a transactional institution.

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

• "一個好的ESG策略就是一個好的企業發展策略" — hero headline (principled declaration). (verified live 2026-06-22)
• "探索數位服務" — section heading (invitation to digital tools). (verified live 2026-06-22)
• "便利支付，交給玉山Wallet" — feature sub-head (benefit + brand product). (verified live 2026-06-22)

Forbidden register: fear-based urgency ("限時優惠"), predatory lending framing, jargon-heavy financial gatekeeping, aggressive upsell language.

11. Brand Narrative

E.SUN Commercial Bank (玉山銀行) was founded in 1992 as part of the liberalization of Taiwan's banking sector. The name "玉山" (Jade Mountain) references Taiwan's highest peak — a metaphor for aspiration, stability, and the Taiwanese spirit. Over three decades it has grown into one of Taiwan's most respected private banks, consistently recognized for digital innovation, ESG leadership, and customer-centric service.

The bank's digital transformation narrative is visible in every layer of its online presence: the prominent "探索數位服務" (Explore digital services) section on the homepage, the Wallet and mobile banking features foregrounded alongside traditional products, and the ESG positioning as a strategic priority rather than a marketing afterthought. The 2026 homepage ESG campaign headline — treating ESG strategy as equivalent to business development strategy — reflects an institution that has internalized sustainability as a core operating principle, not a PR signal.

E.SUN's design language is the visual embodiment of this evolution: clean enough to feel modern, trustworthy enough to feel like a bank, and warm enough in its teal palette to feel like a partner rather than a creditor. The jade-teal color is not accidental — it ties the bank's digital identity back to its mountainous namesake and to the green ESG values the institution champions publicly.

12. Principles

1. Digital as a first-class offering. E.SUN prominently co-positions mobile banking, Wallet, and online account opening alongside traditional products. UI implication: digital CTAs ("線上開戶") appear in the global nav, not buried in a product tab; digital services have their own homepage section.
2. ESG and finance are inseparable. The bank leads its homepage with an ESG campaign, treating sustainability not as a sidebar but as core identity. UI implication: the ESG navigation item sits at the same tier as personal banking and corporate banking.
3. Teal as trust. The single brand color is warm, natural, and non-aggressive — a deliberate departure from banking's traditional navy-and-gold. UI implication: teal is used consistently rather than strategically reserved, building brand recognition through repetition rather than scarcity.
4. Clarity over decoration. The design system uses functional shadows, clean typography, and minimal ornament. UI implication: no gradients, no illustrations cluttering the interface, no decorative patterns that compete with financial content.
5. Traditional Chinese fluency. The UI is built for TC-reading users — font stacks, sizing, and layout density reflect CJK typographic conventions. UI implication: fonts and spacing are calibrated for character density, not adapted from a Latin-first template.

13. Personas

Personas below are fictional archetypes informed by publicly observable E.SUN user segments (Taiwanese banking customers, digital service adopters), not individual people.

林小雯, 27, 台北. A young professional opening her first savings account. She found E.SUN through the mobile app store, was drawn in by the digital-first positioning, and used "線上開戶" to skip the branch entirely. Trusts the teal-tinted interface as a signal of modernity without sacrificing bank credibility.

陳建志, 42, 台中. A small business owner who uses E.SUN for corporate accounts, foreign exchange, and credit card expense management. Values the exchange rate widget on the homepage and the clear "企業/商家" navigation — everything he needs without digging through menus.

吳美玲, 58, 高雄. A homeowner monitoring her savings and investment portfolio through E.SUN's mobile app. Appreciates the clean layout and large readable type — the 16px body and 32px section headings ensure she can navigate financial information comfortably.

王政道, 35, 新竹. A tech industry worker drawn to E.SUN's ESG positioning as part of his values-aligned financial choices. Uses the digital banking tools and follows the bank's sustainability news. The ESG homepage campaign speaks directly to him.

14. States

15. Motion & Easing

Duration Scale:

Easings:

Motion rules: E.SUN's motion philosophy aligns with its visual system — functional and calm, never flashy. The homepage banner carousel transitions pages at a measured pace. Interactive elements (CTAs, nav items) respond to hover with near-instant feedback (motion-fast). For a bank handling financial transactions, motion must inspire confidence, not excitement; under prefers-reduced-motion: reduce, all transitions collapse to instant, maintaining full functionality.