Hang Seng Bank DESIGN.md

Design System Inspiration of Hang Seng Bank

Overview

Visual Theme & Atmosphere

Hang Seng is a Hong Kong bank founded in 1933, serving individuals and businesses with banking, investment and wealth management. Its bank profile connects its mobile app and physical service network as one customer experience. The official history traces its start to a small money-changing shop in Sheung Wan.

The expression combines a red emblem and bilingual wordmark with a predominantly white interface, green actions, pale service icons and domestic lifestyle photography. In the captured homepage, an insurance promotion sits beside a white text panel; below it, compact service tiles lead into larger photographic offer cards.

The January 2026 brand campaign, “Deeply Rooted. Ever Evolving”, develops the bank's heritage through its spade-coin emblem, presented as an entrance to the future. Children portraying bank staff express connections across generations.

The measured homepage is the Hong Kong Traditional Chinese edition (www.hangseng.com/zh-hk/home/, HTML lang="zh-Hant"), reached from the requested /zh-hk/ address.

Primary tasks visible here are account opening, access to banking, finding everyday financial services, and exploring offers.

Brand Narrative

The bank's 2020 anniversary account explains its name as ever-growing, linking growth to its relationship with Hong Kong. The 2026 campaign carries that continuity forward through the historic emblem and imagery of younger generations. This supports a design direction that pairs familiar identity with approachable, contemporary scenes.

Principles

The bank profile describes its services as reliable, friendly and centred on customers. As implementation guidance drawn from this homepage: make task entry points easy to scan, distinguish filled and outlined actions, and retain the measured keyboard indication. The latter are design observations, not published corporate principles.

Personas

No researched personas were verified.

Colors

These role names describe measured values; the census exposed no first-party custom-property palette. All 28 captured root variables belong to bundled Bootstrap defaults and are excluded.

The service anchor itself is transparent: rgba(0, 0, 0, 0). Its child supplies the white panel. Keep that distinction when implementing the card. The red logo colour was not sampled and has no token here.

Typography

Official product-use documentation: no opened source identifies an official product typeface.

Live-loaded: the census lists only Flama 500 normal and Open Sans 400 normal. The En utility link declares Open Sans and measures 12px/400 with 20px line height. The account-opening anchor declares Flama and measures 19px/500 with 22px line height. These observations do not identify which face draws Chinese glyphs.

First-party font references: the site's common CSS declares local names followed by relative TrueType URLs, including rwd-assets/resources/fonts/flama/Flama-Medium.ttf and rwd-assets/resources/fonts/open-sans/OpenSans-Regular.ttf. The capture does not distinguish a local match from a font network response. No separate font distribution package or reuse licence was verified.

Declared-only: body, h1 and button share this computed stack, which is not proof that any named face rendered:

"Microsoft JhengHei", 微軟正黑體, "PingFang HK", "Noto Sans CJK TC", Arial, "Helvetica Neue", "Noto Sans", Helvetica, "sans-serif", -apple-system, system-ui

The remaining declared @font-face variants were not loaded: Flama normal 300/400/600/700 and italic 300/400/500/600/700; Open Sans normal 600/700 and italic 400/600/700. They have no specimen here.

Unresolved: the rendered Han face, font licensing and any official type hierarchy. Substitute: none chosen.

Measured metrics remain useful independently of family resolution: hero action 19px/500, line height 24px; offers navigation 16px/400, line height 24px; FX tile's visible paragraph label 14px/400. Its anchor computes to 16px/400, so use the child label's metric for the visible text. A heading size scale was not measured.

Layout

At the captured 1440×1000 viewport, the six service links run from x=227 to x=1199: a 972px row of 152px tiles with 12px gaps, derived from survey geometry. A three-level header separates utility links, identity/actions and product navigation. The hero spans beyond the content column; its white copy panel sits over the left side of the photographic area.

The full-page capture shows three-column photographic promotions, another three-column editorial row on a pale background, three information cards, help links and a grey footer. Use these distinct content densities when translating the reference into a page.

Responsive Behavior

Only the 1440×1000 desktop surface was measured; mobile layout and authored breakpoints are unverified.

Elevation & Depth

The six controls use no rest shadow. Hierarchy comes from white and pale surfaces, thin panel borders, photography and the keyboard-focus shadow. No general elevation scale was measured.

Motion & Easing

All six controls report the raw computed transition all 0s ease 0s. Their state snapshots therefore support no nonzero transition duration or brand easing curve. Other page motion was not measured.

---

First-party narrative and legal sources: bank profile, milestones, 2026 campaign release, anniversary account, online notices, registered-office terms. The legal entity is Hang Seng Bank Limited; the registered-office terms locate it at 83 Des Voeux Road Central, Hong Kong. The notices footer states membership of HSBC Group. Live measurements were captured on 2026-11-03.

Components

Six product controls were sampled with matched hover, held pointer press and a real Tab walk. The cookie notice was closed using its 關閉 button. No control was activated to navigate, open an account or submit a form. Pointer-state values were read successfully, but their later screenshot crops lost the matching pseudo-state; keyboard-focus crops are valid.

All sampled anchors have box-shadow: none at rest. Search-input styling remains unmeasured because its input was hidden in the survey.

States

Every sampled control receives an authored keyboard indication with outline-style: none, a 3px anchor radius and this exact computed shadow:

box-shadow: rgb(0, 0, 0) 0px 0px 1px 1px inset, rgb(0, 0, 0) 0px 0px 1px 1px;

This is a site-authored shadow rather than an auto outline. The CTA and account link change from 5px to 3px; the other four anchors change from 0px to 3px. All recorded focus changes clear after blur. The offers link also uses its highlighted label, bar and parent surface on focus; the utility language and search links gain green computed ink and underline. The search image reference stays at its rest value during keyboard focus. The FX card keeps its child panel's rest colours during keyboard focus.

Hover and held-press changes are in §4. No disabled, validation, loading or success state was measured.

Do's and Don'ts

• Use the measured green sequence for filled actions: rest #008945, hover #298236, pressed #0d6c29.
• Keep outlined actions transparent over their measured surface until interaction fills them.
• Style the service card's child panel separately from its focusable anchor.
• Preserve the authored keyboard ring and its 3px focus radius.
• Keep the Han font unresolved; do not turn a CSS fallback name into a verified brand face.
• Exclude Bootstrap defaults from the brand palette.

Voice & Tone

The live interface uses concise Traditional Chinese action labels such as 立即開戶 and 了解詳情. Its service heading asks 有甚麼可以幫到你？, while promotional copy shares space with eligibility and risk text. These are surface observations; no editorial voice manual was verified.

Agent Prompt Guide

Build a white banking page with a utility strip, bilingual identity row, product navigation, a photographic hero and compact service tiles. Use #333333 for paragraph ink, #666666 for muted navigation and #298236 for links. Follow the observed green CTA states and the 5px action radius. For keyboard focus, change the anchor to a 3px radius and apply the measured black shadow pair. Keep Chinese font selection unresolved.

For a service tile, make the anchor 152×90px and place a white, thin-bordered panel inside it. On hover or press, change that child to #f4faf5 with a #34a344 border and #298236 label. Use the measured 14px/400 visible label metric.