Nan Shan Life DESIGN.md

Design System Inspiration of Nan Shan Life

Overview

Visual Theme & Atmosphere

Nan Shan Life (南山人壽) is a Taiwanese insurer founded in July 1963. Its company introduction pairs the vision of building a better future with the brand promise 「未來 有備而來」: preparing people for the changes and risks ahead. The homepage makes that practical through insurance categories, policy service shortcuts, a member club and help search. Company introduction

Its identity combines a blue mountain mark with yellow and green. The chairman's statement describes adding the colors of sunshine and green land to bring warmth, vitality and a connection to sustainability. It also connects the renewed identity to customer service center renovations beginning in 2023 and to inclusive service design. On the measured homepage, blue action pills, yellow and green service tiles, rounded white panels and illustrated people express that warmer direction. The screen observations describe this website; the service center statement concerns physical spaces and service processes. Chairman's statement

The May 2026 policyholder newsletter develops the future-facing promise through longevity: a forum about longer lives and a brand film showing real people taking up new pursuits later in life. This gives the site's insurance and health content a context of continuing possibility and preparation. May 2026 newsletter

The measured homepage is the Traditional Chinese edition at www.nanshanlife.com.tw/nanshanlife/, with HTML lang="zh-TW"; the requested root URL redirects there.

Brand Narrative

The story connects an insurer founded in 1963 to an expanded idea of preparation: practical insurance service, health information and the opportunities of a longer life. The chairman's account of a warmer, more vital identity and the 2026 newsletter's real-life stories provide that continuity. The website translates it visually through blue actions, sun-yellow and green destinations, and illustrated people alongside service information. Company, identity context, 2026 development

Principles

The company's stated values include integrity and service, altruistic intent, warm professionalism and the courage to pioneer. The following building guidance is inferred from the captured surface: give everyday policy tasks prominent entry points, distinguish destinations with color, and keep interaction feedback local to the control. The chairman explicitly discusses inclusive design for customer service spaces and processes; no claim of website-wide accessibility conformance is made here.

Personas

No independently researched personas or behavioral profiles were verified.

Colors

These reference role names map to measured homepage colors. No first-party custom property palette was found: the census's two root variables and five distinct declared variables all belong to Swiper and are excluded.

The small help link uses a translucent fill, rgba(202, 220, 233, 0.2), raised to rgba(202, 220, 233, 0.5) on hover and press. Keep its white supporting panel when reproducing that appearance.

Typography

Official product use: no opened brand document identifies an official product typeface.

Live-loaded: the census reports Lexend Deca and Noto Sans TC, each at normal 400, 500 and 700. Body, the sampled h1 and the sampled button declare the same stack, beginning with Lexend Deca and Noto Sans TC. These two loaded families are the only families in the machine tokens. This is evidence of use on the captured homepage, without a claim about other Nan Shan applications or individual glyph selection.

Both are served through first-party @font-face WOFF2 URLs under /nanshanlife/assets/font/. Lexend Deca's filenames are lexend-deca-latin-400-normal.woff2, lexend-deca-latin-500-normal.woff2 and lexend-deca-latin-700-normal.woff2. Noto Sans TC uses the three hashed WOFF2 sources transcribed in the verification notes.

Official distributed assets: no separate font kit or distribution/license document was verified. The serving URLs above were observed in CSS and were not separately downloaded.

Declared-only: the remaining named fallbacks are Microsoft JhengHei, 微软雅黑, メイリオ and 맑은 고딕, followed by generic sans-serif. None appears in the census's loaded faces. They receive no specimen and are excluded from the family tokens. The declared Swiper icon face is also absent from the loaded list and is excluded as a library asset.

Unresolved: official type ownership, licensing, any custom brand face and exact per-script glyph rendering. Substitute: none chosen.

Layout

At the measured 1440 × 1000 desktop viewport, the hero carousel's visible card is 1200px wide with its left edge at x=120. It combines a text area and an image area. A wide service panel below it places policy task shortcuts beside the yellow, green and blue destination cards.

The full-page capture continues through a two-column insurance category panel, a life-stage planning strip, illustrated dementia-care entry cards, and a news panel beside help search. A broad blue footer gathers navigation and legal information. These are observations of the captured desktop composition, rather than a prescribed grid for other viewports.

Responsive Behavior

Only the 1440 × 1000 desktop surface was measured; mobile layout, touch states and responsive transitions were not measured.

Elevation & Depth

White panels sit on a pale neutral field, with large soft shadows providing separation. The measured ancestor .common-function-diversion has rgba(172, 172, 172, 0.24) 8px 20px 96px 24px. The 更多消息 painted face has rgba(62, 114, 151, 0.12) 8px 8px 32px 0px at rest.

Search focus is a distinct small treatment: rgba(5, 94, 156, 0.05) 0px 0px 0px 4px, paired with its blue border. Its outline style remains none; this authored shadow is the measured focus indicator.

Motion & Easing

The observed motion uses short lateral arrow travel: 12px on 更多消息 and 3px on the yellow club card. Their link shells report all 0s ease 0s; that string does not describe the duration of their animated children.

The help input's raw computed transition is border-color, box-shadow 0.3s, 0.3s ease-out, ease-out 0s, 0s. The utility link's is color, background-color 0.3s, 0.3s ease-out, ease-out 0s, 0s. These unusual serializations are retained exactly; no global duration or easing token is inferred.

---

First-party sources: live homepage, company introduction, chairman's identity and service statement, May 2026 policyholder newsletter, website terms, statutory disclosure. Captured 2026-11-06. Detailed measurements, font serving declarations, controls, source quotes and the two nonsense-path results are in the accompanying verification notes.

Components

All five actions below are links; the search field is an input. For the first three links, a transparent, square anchor wraps the painted face. The computed anchor has 0px radius and 0px padding. Colors, visible label metrics, heights and states below are computed measurements across that anchor and its descendants. Painted-face radii and padding for those three are CSS declarations from the opened live homepage HTML, recorded separately from computed geometry.

The two blue action hover layers contain the computed gradient linear-gradient(235.59deg, rgb(0, 111, 188) 5.89%, rgb(0, 59, 100) 93.09%). Hover opacity changes from 0 to 1. Press returns that layer to opacity 0 and sets the solid dark layer to opacity 1.

The card's live CSS declares linear-gradient(98.78deg, #f3af00, #f8dc94 100.06%); the state probe confirms the pseudo-element opacity change, while its serialized gradient string is shortened. Its full endpoint is therefore CSS-source evidence, not a reconstructed computed string.

States

The probe confirmed actual :hover, :active and keyboard focus matches. Its comparison covers each control and its pseudo-elements, 0–9 descendants including empty layers and their pseudo-elements, and three ancestor levels; the property list and exact counts are in the verification notes. These “no change” results concern that computed-style/DOM scope. Disabled product states were not exercised and are absent from the component tokens.

Do's and Don'ts

• Use the measured blue faces, white labels and dark active layer for the primary action pattern.
• Pair the compact translucent help link with a white panel and retain its separate label color.
• Use the loaded families and measured label weights; keep large action labels at 700.
• Preserve the distinction between a link's interaction shell and its painted child when implementing the pill.
• Do not promote Swiper defaults into the palette, the unpainted anchor's browser blue/red into label tokens, or unverified fonts into the type system.

Voice & Tone

The company introduction speaks of preparation, mutual support and a better future. The May 2026 newsletter's later-life stories frame new pursuits as possible at any age. Homepage labels are concrete tasks and destinations: policy claims, policy payments, help, online insurance and member services. This supports a reassuring, practical writing direction; it is an interpretation of those opened texts, not a published voice manual.

Agent Prompt Guide

“Build a Nan Shan Life homepage-style service panel using white surfaces, blue action links and adjacent yellow and green destination cards. Use the live-loaded Lexend Deca and Noto Sans TC families. A primary action has a 56px painted face, white 18px/700 label, a blue-to-deep-blue hover layer and a 12px arrow translation; its 36px face radius and 16px 24px padding come from the live CSS declarations.”

"Use the measured help input: 72px high, white, 1px neutral border and 18px/500 text. On keyboard focus, use the measured blue border and 4px shadow from §6. Reserve the field's right-hand space for the search action; submission behavior was not exercised."

Governance

Known Gaps

• Contrast, help-link. Text #2e8aca on #cadce933 measures 2.66:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, club-card. Text #ffffff on #f3af00 measures 1.92:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.