Mega Bank DESIGN.md

Design System Inspiration of Mega Bank

Overview

Visual Theme & Atmosphere

Mega Bank (兆豐銀行) is the Taiwanese commercial bank formed when the International Commercial Bank of China and Chiao Tung Bank merged on 21 August 2006, taking the name Mega International Commercial Bank. Its own history emphasizes international trade, foreign exchange and financing. The headquarters operates in Taipei; the legal disclosure names Mega International Commercial Bank Co., Ltd. History, legal disclosure, page 1.

The public homepage pairs a gold-coloured logo with white space, purple links, a purple-to-pink login gradient and substantial rounded controls. The hero separates a large text block from campaign artwork; practical service links, market information and a currency calculator follow. These are observations of the homepage, rather than a published corporate palette.

In its 28 November 2025 redesign announcement, the bank identifies functionality and ease of use as its design axes, describes reorganizing menus and categories through user research, and reports WCAG 2.1 AA certification. That is the bank's account of the redesign; this capture does not independently certify accessibility. Official redesign announcement.

The measured homepage is the Traditional Chinese personal-banking edition (www.megabank.com.tw/personal), reached from /; its HTML language is zh-Hant-TW.

Brand Narrative

The current bank name dates to the 2006 merger. Its history connects that combined institution to trade and foreign-exchange services. Its company page states values of respect and inclusion, professional trust, and integrity and accountability. The public website translates that institutional setting into service navigation and approachable life-stage entry points. The last sentence is a reading of the captured interface. History, company.

Principles

The bank's published redesign priorities are functionality and ease of use, with menu organization informed by user research. For this reference, the measured implementation cues are separate pointer and keyboard treatments, rounded form controls and a gradient on the header action. The implementation cues are observations, rather than additional official principles. Redesign announcement.

Personas

No user-persona study was opened; no persona claims are supplied.

Colors

These role names organize live computed values. The census exposes no first-party custom-property colour palette.

The login background image is linear-gradient(90deg, rgb(144, 63, 152) 0px, rgb(196, 46, 108) 50%, rgb(232, 77, 141) 100%). Its size is 200% 100%; rest position is 0% 50%. The computed background colour is rgba(0, 0, 0, 0) and the image supplies the visible fill.

The survey's paragraph-ink count is one, collected while the anti-fraud popup was open. It supports that observed paragraph, not a comprehensive census of article body copy.

Typography

Official product use: none verified in the opened company or redesign writing; neither identifies a product typeface.

Live-loaded: the census's loaded list contains only swiper-icons 400 normal, an embedded WOFF icon font belonging to the carousel library. It supplies no evidence for the interface's text face and is excluded from typography family tokens.

Official distributed assets: no font binary or font licence was opened. Distribution and licensing are unresolved.

Declared-only: body and H1 declare "Microsoft JhengHei", PingFang, Arial, Helvetica, sans-serif. The first button sampled by the census declares Arial, Baskerville, monospace; the six selected product controls declare Microsoft JhengHei. The stylesheet walk also finds Phudu at ../media/fonts/Phudu-Regular.woff2 and GridGlyphs at ../MvcGrid/Fonts/GridGlyphs.woff. Neither appears in the loaded list. These names describe declarations, with no specimen or family token.

Unresolved: actual local text-face selection, per-script glyph fallback, font licensing and an officially designated brand face. Substitute: none chosen.

Measured metrics remain useful independently of a resolved family:

Layout

At the survey's 1440×1000 desktop viewport, the market-information section H2 spans 1200px, starting at x=120. The sticky header is 100px high and has a channel row above the product navigation. The split hero precedes a four-column service block, market-rate tabs and the calculator. Further down are needs-based service tabs, news alongside video links, offers, awards and the footer. Homepage capture.

Use the measured component paddings as local recipes: 8px 20px on login, 8px 12px on the secondary action, and 12px 16px on the input. The declared --gap: 40px utility is not evidence of a universal spacing scale.

Responsive Behavior

Only a 1440×1000 desktop viewport was measured; mobile layout and breakpoint behaviour are unverified.

Elevation & Depth

All six sampled product controls have box-shadow: none at rest; their measured changed-state lists add no shadow. The clear viewport also shows a floating quick-service rail, but its shadow was not sampled as a reusable elevation value. No shadow scale is declared here.

Motion & Easing

Raw computed transitions are background 0.3s ease 0s for login and the hero action; color 0.3s ease 0s for channel navigation, the video-card link and the cash-rate tab; and all 0s ease 0s for the amount input. Login's observed moving property is background position; the gradient stops remain unchanged. No additional motion timing, custom curve or reduced-motion behaviour is inferred.

Components

Six product controls were selected. The anti-fraud popup was closed, and the cookie reject button was explicitly clicked before states. Measurements below use the first states pass; the second pass adds only a failed pointer retry for the hero action.

The hidden site-search input was absent from the visible survey rows. The amount input above is the visible financial calculator, not a search-field specimen.

States

The 企業金融 link is the clearest re-measurement target: rest foreground #111111, radius 0px; hover and held-press foreground #6b206c; keyboard focus 2px solid #c42e6c, outline offset 2px, radius 6px. Focus-only changes disappear after blur; the data's persistsAfterBlur list is empty.

The same authored outline is measured on login, the hero action, the amount input and the video-card link. It has outline-style: solid, rather than the browser's auto ring. Login and the hero action retain 12px corners; the video link takes the same 6px focused radius as channel navigation. Input focus additionally changes the 1px border to #6b206c.

Input hover's “no change” is limited to self, ::before/::after, zero descendants, and three ancestor levels with their pseudos, across the probe's computed-style and DOM-attribute property list. Canvas/video pixels, sibling elements, external sprite internals and cross-origin frames are outside that comparison. Hero hover/pressed and the cash tab's keyboard focus are UNMEASURED, not unchanged. Disabled, validation-error and selected-tab states were not measured.

Do's and Don'ts

• Use purple for actions and the separate pink outline for the measured keyboard-focus treatment.
• Preserve the login gradient's background-position behaviour and the secondary action's outlined white treatment.
• Use 12px corners for the sampled action and input; preserve the channel link's measured 0px resting and 6px focused radii.
• Keep text-family selection unresolved until stronger evidence exists. Loaded carousel icons do not establish a text family.
• Keep hero pointer states and the unselected tab's keyboard focus absent from component tokens.

Voice & Tone

The homepage combines practical labels such as “了解更多” with life-stage language such as “陪您打造第一個家” and “陪您一起白頭到老”. Those observed phrases support a helpful, personal tone for service discovery; no wider editorial style guide was verified. Homepage.

Agent Prompt Guide

“Build a Mega Bank-style public banking header on white. Give its login menu a 100×40px button, 12px radius, 8px 20px padding and white 16px/700 text. Use the measured 90-degree purple-to-pink gradient at 200% width, positioned 0% 50% at rest and 100% 0px on hover and held press. Keyboard focus draws a 2px solid pink outline, offset 2px. Use the colour values in §2; leave the text family unresolved.”

“For the secondary hero action, use a 140×48px link with white fill, a 1px primary-purple border, 12px radius and 18px/700 purple text. Apply only the measured keyboard-focus treatment; leave pointer states unspecified.”