AIA Hong Kong DESIGN.md

Design System Inspiration of AIA Hong Kong

Overview

Visual Theme & Atmosphere

AIA Hong Kong brings insurance, financial protection and healthier living into one customer-facing site. Its company history traces the group's beginnings to an insurance agency in Shanghai in 1919 and the establishment of a Hong Kong branch in 1931. Today, its stated purpose is to help people live “Healthier, Longer, Better Lives.” Company and history.

The measured homepage is the Traditional Chinese Hong Kong edition (aia.com.hk/zh-hk), with HTML language zh-HK and no regional redirect. It combines photographic campaign banners, a white navigation bar, red actions, pale section backgrounds and a charcoal footer. The small header actions use 8px corners; the white membership links use 12px corners. These are observations of this desktop surface.

The current campaign makes protection personal: AIA's Let Love Transcend Time customer-story series connects insurance with quiet acts of care and protection across generations. That framing gives the family photography and direct benefit language a first-party narrative basis. Official campaign.

At group level, AIA's design writing describes Qi's evolution from a top-down approach towards contributions from local markets, research and closer alignment between design and code. This is context for AIA's digital design direction; the numerical reference below comes from the Hong Kong homepage capture. Qi evolution, 13 August 2024.

Brand Narrative

The company's history connects a long presence in Hong Kong with its present purpose of healthier living. Its current story series expresses insurance as care that continues across generations. In this homepage's visual treatment, people and campaign photography carry that story while red actions, white surfaces and dark supporting text organise the tasks. History, current campaign.

Principles

AIA's published Qi overview identifies consistency, efficiency and scalability as benefits of reusable patterns and guidelines. Those are documented group design-system aims. For this measured page, reproduce the specific color, geometry and interaction records rather than extrapolating an unmeasured component family. Qi design system.

Personas

No user-research personas were verified.

Colors

The homepage census contains 53 computed root properties and 78 declared properties. Eleven application properties are declared on .cmp-completionmessage__description, body, rather than on :root. Bootstrap (--bs-*) and Swiper (--swiper-*) are excluded as token namespaces. Bootstrap includes AIA-specific overrides, so its values are retained only when independently supported by application properties or measured product controls.

Paragraph ink is mixed: white occurs 15 times, black #000000 six times, and #14181c six times. foreground records the observed dark paragraph value; it does not identify a single universal paragraph color. The most frequent text color is white, not the default body declaration.

Additional application declarations are --tab-hover: #5699c1, --tab-active: #1f78ad, and --colored-card-bg-option-one/two/three: #a10354 / #db406a / #ce425c. These declarations establish available values, not measured states for those components.

The group's published colour guidance names digital red, digital charcoal and white as its primary palette, with additional colours used sparingly. This qualitative guidance is separate from the homepage measurements. Official colour guidance.

Typography

Official product-use documentation. AIA's digital typography page explicitly names AIA Everest and Open Sans for its digital platforms, and recommends Noto Sans for localisation beyond English. This is group guidance, while the following records describe the Hong Kong page. Official typography.

Live-loaded. document.fonts reports AIAEverest 500 normal, OpenSans 400/600/700 normal, NotoSansTC 400 normal, and NotoSansSC 400 normal. These exact CSS aliases are the four family values in the frontmatter. The census also loads swiper-icons 400 normal, which is an icon font and is excluded from typography tokens.

Official served assets. The census records same-origin @font-face sources under /etc.clientlibs/aia-hk-wise/clientlibs/clientlib-site/resources/fonts/: AIAEverest-Medium.woff2, the Open Sans regular/semibold/bold WOFF2 files, and NotoSansTC-Regular.woff2 and NotoSansSC-Regular.woff2. These are observed serving declarations; no font file was separately fetched. No downloadable font package or font licence was verified.

Declared-only. AIAEverest also has a CSS weight-300 declaration pointing to AIAEverest-Regular.woff2; OpenSans has a weight-300 declaration pointing to opensans-light-webfont.woff2. Neither weight appears in the loaded list, so neither receives a specimen. The census declares AIAEverest first on h1, and OpenSans first on body and button, followed by localisation/platform fallbacks.

Unresolved. The capture does not identify the face used for each individual Han glyph. Heading size, paragraph size, variable axes and font licences are unverified. Substitute: none chosen.

These controls compute font-family: OpenSans. The image-only membership card inherits 16px / 400 and 24px line height; those values do not describe lettering inside its logo image.

Layout

The capture is 1440×1000 CSS pixels. Header navigation sits above a photographic hero carousel; shortcut links sit over the hero. A pale membership/search area follows, then product/support tabs, health content, campaign cards, company information, news, app promotion, a contact form and the footer. Some sections are lazy-revealed; the initial full-page screenshot's blank areas are not spacing prescriptions.

The survey places the two membership links at x=335 and x=729, each 362px wide: a 32px gap. Its article-link rows have 270px width and begin at x=137 and x=431: a 24px gap. These are desktop observations, not inferred global grid tokens. Observed inline padding includes 12px on header actions and shortcuts, 16px on the contact field, and 24px on the surveyed 48px hero button; the hero button's states were not measured.

The official Qi spacing guide describes a 4px soft grid. That is documented group guidance, not a breakpoint or grid measurement for this page. Official spacing.

The visible search surface is .membership-section-search-bar, a div with a text span. It is not an input in the survey's interactive census. The contact field supplies the measured input reference; no search-input state is claimed.

Responsive Behavior

Only desktop at 1440×1000 was measured; mobile layouts, breakpoints and reduced-motion behavior are unverified.

Elevation & Depth

The AIA Vitality membership link rests on a light section with a white surface and rgba(118, 118, 118, 0.1) 1px 3px 10px 0px shadow. Hover and press change the shadow to rgba(118, 118, 118, 0.18) 1px 4px 14px 0px and transform to matrix(1, 0, 0, 1, 0, -1), a 1px upward translation. Keyboard focus keeps the resting shadow and adds its red outline.

The measured header buttons, shortcut, navigation span and input have no rest box-shadow. This does not establish a site-wide elevation scale.

Motion & Easing

The raw transition serializations below are copied from states.json identity records. They are local control observations, not a global motion scale.

• Both header buttons: color, background-color, border-color, box-shadow, -webkit-box-shadow 0.15s, 0.15s, 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s, 0s.
• AIA Vitality membership link: box-shadow, transform 0.16s, 0.16s ease, ease 0s, 0s.
• First-name field: all 0.2s ease 0s.
• Product-navigation span and shortcut link: all 0s ease 0s on the element itself.

The card's measured transform is a 1px upward translation. Carousel timing and reduced-motion alternatives were not measured.

Components

Six controls were inspected with real pointer states and a real Tab walk. The cookie banner remained open: its only observed action is 「確認」, which was not clicked. A separate notice was closed using button.multiple-notice__close (“Close notice component”). Exact state evidence and limits are in §14 and the verification notes.

The two header buttons are 82px wide; the input is 367px wide; the membership link is 362px wide. The membership foreground is inherited CSS color, not a measurement of the wordmark's image pixels. Its component therefore omits a text-color token.

The shortcut's pointer states are unchanged and its only focus indication is the browser's auto outline. It remains a measured prose reference and is omitted from components. The other five controls have authored state changes. Disabled, error and success states were not measured.

States

The two header buttons keep their label colors. The field keeps its computed foreground. For the image-only membership link, the computed underline is recorded without claiming visible underlined text. Each focus change above reverted after blur; persistsAfterBlur is empty for all six controls.

The unchanged navigation reading compares the span, its ::before/::after, no descendants, and three ancestor levels with their pseudo-elements. The shortcut reading compares itself, two descendants including one image, their pseudo-elements, and three ancestor levels with pseudo-elements. Compared properties include colors, borders, outlines, shadows, transforms, opacity, size, decoration, backgrounds/masks, image source strings and SVG attributes. Menu siblings, video/canvas pixels, external sprite internals and closed shadow roots are outside that proof.

The shortcut's first pointer pass was UNMEASURED because the product menu covered it. The second states call enabled hideOverlays: true; it measured matched hover and active states with no changes. No overlay hiding was recorded in that second call. No consent action was taken.

Do's and Don'ts

• Use the measured red action and pale secondary fills, preserving their separate pointer and keyboard treatments.
• Preserve the membership link's 12px corners, small upward movement and red keyboard outline.
• Keep contact inputs at their measured 6px radius and blue focus treatment when reproducing this form.
• Do not turn the shortcut's browser auto ring into a brand token or present unchanged states as custom feedback.
• Do not export the Bootstrap or Swiper namespaces as an AIA palette.
• Use only the font evidence classes above; no replacement face is selected.

These are reference-building instructions based on the inspected surface, not a newly attributed company manifesto.

Voice & Tone

The Hong Kong homepage describes AIA as “「健康長久好生活」的好拍檔” and says health is the best protection for a happy life. Its link labels are direct actions such as 「了解更多」 and 「聯絡我們」. These observed examples pair a supportive relationship with explicit next steps. Homepage.

The official customer-story campaign explains protection through care for loved ones. It supports a relational, plain-language reading of the current campaign; a complete editorial style guide was not inspected. Campaign.

Agent Prompt Guide

“Build a compact AIA Hong Kong header action: 32px tall, 8px corners, 6px 12px padding, white 14px/600 type on #d31145. Use #b40e3a on hover and pointer press; keyboard focus changes fill and border to #940b30. Use the live-loaded OpenSans face only when its asset is available.”

“Build a white AIA Vitality image link at 362×79px with 12px corners. Use the two measured shadows from §6, lift it 1px on hover/press, and show a 2px solid #d31145 outline offset by 3px under keyboard focus.”