First Bank DESIGN.md

Design System Inspiration of First Bank

Overview

Visual Theme & Atmosphere

First Bank is a Taiwanese bank whose history begins in 1899 as Taiwan Savings Bank. Its company introduction describes the later changes of name, its entry into the First Financial Holding group in 2003, and its customer-first service philosophy. The same page explains its identity: interlocking gold and dark-green arcs form a round coin with a square centre. Gold represents accumulated wealth; dark green represents the earth and continuity; the square expresses stability and professionalism.

That established identity accompanies an evolving public voice. The 2025 brand film announcement centres on everyday digital finance through iLEO and a younger brand image. The September 2026 announcement introduces Your All-Round Partner (《你的全方位夥伴》), connecting trust, the bank's history, financial services and sustainability with the promise 「就在你左右」— being by the customer's side.

The measured homepage is the Traditional Chinese personal-banking edition (www.firstbank.com.tw/sites/fcb/personalhome, HTML lang="zh-hant"). Its visual expression combines green actions, pale green section grounds, white rounded cards, line illustrations and photographs of everyday life. These observations describe the public website; they do not establish the iLEO app's design tokens.

Brand Narrative

Continuity and renewal are explicit parts of the identity explanation: the company introduction says the mark retains basic elements of the earlier identity while expressing new energy through a modern treatment. The 2026 film extends the “by your side” promise across the bank's history, core services and sustainability activities. On the measured homepage, family photography, life-goal links and an illustrated service counter give that promise concrete settings.

Principles

The documented operating philosophy is 「顧客至上，服務第一」. For this website reference, the measured patterns translate into three practical rules: keep financial actions easy to distinguish, separate dense service navigation from promotional imagery, and preserve visible keyboard feedback. Those implementation rules are a reading of the captured surface, not additional principles attributed to the company.

Personas

No persona research was opened; no user segments or persona attributes are specified.

Colors

These role names describe measured values; they are not names published by the bank. The census found 30 root custom properties, also 30 declared properties: 28 Bootstrap-default properties and two --aqi-* properties for the footer air-quality display. The rendered green comes from the bank's CSS rules, despite the framework's unused-for-this-role --primary value of blue. No bank-wide palette namespace was found in this capture.

Gold is documented as an identity colour, but no logo-gold hex was measured or promoted into the palette. Alpha shadows are recorded with their full rgba(...) values below.

Typography

Official product use: no first-party typography specification was found in the opened company and brand pages.

Live-loaded: document.fonts reports Noto Sans TC, normal, at weights 400, 500 and 700. The computed family on body, h1 and button starts with Noto Sans TC. Its first-party font stylesheet provides local-face sources followed by WOFF2/WOFF URLs under /sites/FirstBankWebRevision/webfonts/. The capture does not distinguish a local source from the network URL actually selected. Loaded Font Awesome 5 Duotone 900 and Font Awesome 5 Pro 300/400 are icon fonts, excluded from the UI family token.

Official distributed assets: the same bank-hosted stylesheet declares Noto Sans TC 300/400/500/700. This is distribution evidence for the website, not a separate assertion that the bank commissioned these faces or uses them throughout its products. No licence document was opened.

Declared-only: Noto Sans TC 300 is declared but absent from the loaded-face census. Other fallback names appear in the computed stack without loaded-face confirmation. No specimen is assigned to these declarations.

Unresolved: typography inside iLEO and other banking applications was not inspected. Substitute: none chosen.

Measured sizes retain their component context:

Layout

At the measured 1440 × 1000 viewport, the logo occupies a 250 × 120px link beside a two-level header: a 40px utility bar over an 80px product-navigation row. A broad photographic carousel follows, with text and a filled action at the left and a vertical service rail at the right.

Below it, the page places category tabs beside a row of four news cards, then a pale green cloud-counter section of illustrated service tiles. A life-goal section uses four circular photographic links—study abroad, retirement, marriage and buying a home—followed by a three-card product panel and a multi-column service footer. These are desktop arrangements observed in the full-page capture, not a reconstructed grid specification.

Responsive Behavior

Only the 1440 × 1000 desktop viewport was rendered for measurement; mobile layout and responsive interaction states were not measured.

Elevation & Depth

Rest shadows were none on the six selected controls. The service tile's hover and held-press shadow is rgba(0, 0, 0, 0.125) 0px 0px 15px 0px. The more-products held press uses rgba(108, 171, 157, 0.5) 0px 0px 0px 3.2px.

Five controls show an authored keyboard-focus box shadow: rgba(0, 109, 217, 0.85) 0px 0px 0px 3px. The bank's main stylesheet explicitly supplies that shadow under .js .container--has-focus *:focus. Each measured focus shadow disappears after blur. The accompanying outline-style: auto is browser-resolved and supplies no brand outline token; the component focus entries retain only the authored shadow and any measured fill/border change.

Motion & Easing

The raw computed transition strings were:

• Hero and more-products links: color, background-color, border-color, box-shadow 0.15s, 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s.
• Corporate navigation, search trigger and service tile: all 0.2s ease 0s.
• News card: all 0.12s ease 0s.

These are element-level computed declarations. No global motion scale or carousel easing is specified.

---

Tier 1 sources: https://www.firstbank.com.tw/ (rendered Traditional Chinese personal-banking homepage and controls, 2026-11-03); https://www.firstbank.com.tw/zz-this-does-not-exist (HTTP 404 control); https://www.firstbank.com.tw/sites/fcb/AboutUS (history, operating philosophy and identity symbolism); https://www.firstbank.com.tw/sites/fcb/FixedAnnouncement#atab5-tab (privacy/copyright notice and operator footer); https://www.firstbank.com.tw/sites/fcb/zh_TW/1565708751624 (2025 digital-finance brand film); https://www.firstbank.com.tw/sites/fcb/zh_TW/1565713938795 (2026 all-round-partner brand film); https://www.firstbank.com.tw/sites/FirstBankWebRevision/css/font-noto.min.css (font declarations); https://www.firstbank.com.tw/sites/FirstBankWebRevision/css/styles-all.min.css (framework defaults, green action overrides and authored focus shadow); https://www.firstbank.com.tw/sites/FirstBankWebRevision/css/aqi.css (AQI namespace ownership); https://www.firstbank.com.tw/sites/FirstBankWebRevision/css/styles-home-2023.css (homepage tile and card styling). All opened 2026-11-03.

Components

The hero 瞭解更多 link, identified with the 青安貸款3.0 campaign URL, is 114.1 × 40.9px with a 6px radius, 7.44px 16.24px padding, a 1px green border and white 16px/500 text. Its rest background is #297d6b. Its interaction states were not measured successfully, so it has no interactive component entry.

The 更多優質商品 link below the product cards uses the same green/white pairing at 179.6 × 52.2px, 6px radius and 11.6px 26.4px padding. It has measured hover, pressed and keyboard-focus changes; use this link as the verified filled-action reference.

The 企業金融 navigation link is 92 × 40px with square corners and 0px 16px padding. The 搜尋 trigger, a link with role="button", is 58 × 40px with the same geometry rules. Both are transparent at rest on the green top bar. Their hover and held-press readings are white-backed with green foreground. The search icon additionally changes its SVG sprite position from 50% -96px to 50% -464px; its background size remains 46px 736px.

The measured news-card link is 260.5 × 160px, white, with a 12px radius and 36px 20px 20px padding. Its brief is green, its category label uses the dark foreground, and the date and trailing action use muted ink. The blue category ribbon ends in an angled pseudo-element. Keyboard focus is measured; hover and pressed remain unmeasured.

The 預約服務 tile link is 120 × 120px, white, with a 16px radius, zero padding and a bold green label. Its calendar illustration is a background SVG. Hover and held press change the label to #236c5c and add a soft shadow.

States

“Focus shadow” below means the authored 3px rgba(0, 109, 217, 0.85) box shadow; the browser auto outline is excluded. All five measured focus shadows return to none after blur.

The “same” readings compare the control, its label, descendants and their pseudo-elements, plus three ancestor levels. The search trigger has two descendants, the service tile one and the corporate link none. External SVG internals and pixels are outside that comparison. Disabled states were not exercised and are not specified.

Do's and Don'ts

• Use the measured green progression for filled actions: #297d6b, #236c5c, #1a5145.
• Keep the distinction between square top navigation, 6px action corners, 12px news cards and 16px service tiles.
• Preserve the separate news-card inks and the search sprite's state change.
• Keep the framework defaults and the footer AQI settings out of the bank's core palette. An unmeasured state supplies no implementation value.

These are implementation recommendations derived from the observed homepage, not an official brand manual.

Voice & Tone

The homepage pairs concise functional labels—搜尋, 預約服務 and 瞭解更多—with the life-goal heading 「夢想啟航」. The accompanying paragraph offers the bank's help while the visitor pursues a dream. The 2025 brand announcement explicitly connects its digital-finance campaign with a warm and reassuring experience. These are observed copy and stated campaign aims, not a general tone-of-voice specification.

Agent Prompt Guide

• “Build a First Bank website action link with Noto Sans TC 18px/500, 52.2px height, 6px corners and 11.6px 26.4px padding. Use white text on green; preserve the measured hover and held-press fill and border progression.”
• “Build a 120px white service tile with 16px corners, a calendar background illustration and a 16px/700 green label. Hover changes the label colour and adds the measured 15px soft shadow.”
• “Use a square 40px utility-navigation item on the green bar. Hover and held press use a white background with green text; keep the authored keyboard-focus shadow separate from the browser outline.”