ZA Bank DESIGN.md

Design System Inspiration of ZA Bank

Overview

Visual Theme & Atmosphere

ZA Bank is a Hong Kong digital bank offering banking, investment, insurance and business services. Its own profile records a Hong Kong Monetary Authority licence in 2019 and describes a “用戶共創” approach: users participate in product development and design. The homepage dates its public opening to March 2020. This is a bank built around an app, with account opening and app access placed in the desktop header. (Company profile, homepage)

Its current brand expression combines the Cantonese message “做壞規矩 做好銀行” with a stated “Banking for Web3” direction. The homepage puts everyday saving, spending and investing together; its profile also names individuals, SMEs and Web3 enterprises among the groups it serves. These are the bank's published positioning and product scope. (Homepage, company profile)

The visible desktop design gives that positioning a mint accent, very dark ink and broad light surfaces. The captured hero combines a cityscape with an oversized phone; the next row uses white cards and mint-and-white three-dimensional icons. Mint pill actions repeat through the page. Below, alternating text and media areas organize the service features. These are observations of the captured page, not claims from a published brand manual.

The measured homepage is the Traditional Chinese Hong Kong edition (bank.za.group/hk, HTML lang="zh-HK"); the capture recorded no regional redirect. This reference covers the public website, with app design beyond the scope measured here.

Brand Narrative

The bank's CEO letter describes building with user feedback and keeping a community-driven approach; its current company profile explicitly includes users in development and design. The present homepage extends this narrative across saving, spending, investment and Web3 banking. The visual reference takes its repeatable patterns from the public site: mint actions, dark labels, white service cards and an app-centred hero. (CEO letter, profile, homepage)

Principles

The verified company principle is user participation in product development and design, stated in its company profile. For implementation, the measured recurring patterns are compact pill actions, dark-on-mint labels and a pale navigation hover surface; these are observations rather than a published principles framework.

Personas

The company profile names individuals, SMEs and Web3 enterprises; no demographic, behavioral persona or user-research finding was verified.

Colors

The survey read 90 computed root properties, including 85 in --zad-*. The palette below separates named CSS values from measured rendered roles.

Alpha values stay explicit: --zad-color-label_body is rgba(3,5,22,0.8), secondary label is rgba(3,5,22,0.64), and divider is rgba(3,5,22,0.08). The measured footer link uses rgba(255, 255, 255, 0.6).

The declared --zad-color-primary_c_press resolves to #00996a. The selected actions' measured pointer-pressed fill is #30c396; no component state is inferred from that variable's name.

Typography

The serving rules are visible in the site's Nunito stylesheet and shared font stylesheet. Nunito weight 610 points to the same Medium file as weight 500; this is a CSS registration, not proof of a separate loaded cut.

Measured interface metrics: header actions 14px / 400, line height 22px; navigation 16px / 400; deposit action 18px / 400, line height 38px; footer link 14px / 400, line height 24px. The navigation anchor's bounding height is 33.5px, although its computed line height is 68px; preserve the distinction between inline box geometry and line height.

Layout

At the measured 1440 × 1000 viewport, a fraud-warning strip sits above a 68px sticky navigation bar. A full-width campaign hero leads into three benefit cards. Subsequent service cards alternate text and media positions, followed by security content, dense legal notes, an app-opening panel and a dark footer. The full screenshot retains “Loading…” placeholders in several media areas; their final artwork is unresolved.

The declared spacing scale is 2, 4, 8, 12, 16, 20, 24 and 32px (--zad-distance-spacing_xxxs through _xl). The measured header action padding uses 7px vertically and 16px horizontally; local component geometry therefore extends beyond the named spacing list.

Responsive Behavior

Not measured: one desktop viewport at 1440 × 1000; no mobile layout, breakpoint or touch-state claim is made.

Elevation & Depth

The visible hero and benefit icons provide pictorial depth. Selected control surfaces have box-shadow: none; no card-elevation or shadow scale was verified. The declared mask is rgba(3,5,22,0.6) and toast background is rgba(3,5,22,0.8); no mask or toast state was exercised.

Motion & Easing

The exact computed transition strings recorded by the probe are:

• Header actions, insurance navigation and footer link: opacity 0.2s ease-in-out 0s.
• Deposit action: background-color, color 0.8s, 0.5s ease, ease 0s, 0s.

The second string is retained exactly as serialized by the probe. It is not normalized into a timing prescription. No hero-animation or reduced-motion behavior was verified.

---

Live values and visual observations: Hong Kong homepage, captured 2026-11-03 with probe_page survey and states. Narrative: company profile, CEO letter. Entity and country evidence: official privacy notice, page 5 and contact page. Exact evidence paths, control identities and source limitations are recorded in verification.md and report.md.

Components

All selected controls are anchors. The two header actions have no href; the product action is a link inside a feature card, rather than a clickable whole card.

All four have computed border and box shadow none at rest. Pointer press added no difference beyond hover in the compared scope. The 100px action radii produce pills at these heights; the reference's separate numeric radius scale comes from declared --zad-border-radius_* variables: 2, 4, 8, 14 and 20px.

The footer 關於 ZA Bank link is 82.6 × 19px, 0px radius and padding, with a transparent background and a 60%-white label over #253d5b. Its measured states had no compared visual change, so it is described here and omitted from component tokens.

States

“No compared visual change” covers the control, its pseudo-elements, descendants and their pseudo-elements, and three ancestor levels with pseudo-elements. The two mint controls include one SVG and one path; the other selected controls have no descendants. The probe covers style, image-source and SVG attributes, not canvas pixels, sibling changes or closed shadow roots. No authored or browser-default focus ring was observed on the three reached controls. No disabled state was measured.

Both captures have consent.rejectedVia: null, without a consent-rejection summary line. The inspected viewports show a fraud notice and chat launcher, with no visible consent reject button. These state values remain raw observations with that consent limitation recorded in verification notes. No dialog close selector or overlay hiding was used. Deposit and footer pointer snapshots matched their states, but their crop step subsequently reported losing :hover / :active; the signup, download and navigation crops succeeded.

Do's and Don'ts

• Repeat mint pill actions with dark labels; preserve the measured darkening on hover and pointer press.
• Keep the lighter secondary header action distinct from the mint signup action.
• Use the measured paragraph foreground and interface-label roles separately.
• Keep observed control states separate from CSS variables that merely have state-like names.
• Assign Nunito to the measured interface family; leave unresolved Han font selection unassigned.

Voice & Tone

The Traditional Chinese homepage mixes finance terms with conversational Cantonese, including “你話事” in its ZA Card copy. Its brand message addresses changing familiar banking conventions, while the page places risk statements and qualifications beside promotional offers. These are observations of the homepage's authored copy, not a separately published tone guide.

Agent Prompt Guide

“Build a ZA Bank-style desktop header using the measured Nunito interface family. Make the signup action a 36px-tall mint pill with 7px 16px padding, dark 14px / 400 text and a 100px CSS radius. Change its fill from #39e5b1 to #30c396 on hover and pointer press. Pair it with a pale #f6f7fb secondary action that changes to #d1d2d5.”

“For a service feature, use the measured 38px action-link geometry: 0px 20px padding, 18px / 400 text and a mint fill. Keep the action's dimensions separate from the surrounding feature card.”

No additional font, focus treatment, mobile behavior or animation value is supplied by these prompts.