Taipei Metro DESIGN.md

Design System Inspiration of Taipei Metro

Overview

Visual Theme & Atmosphere

Taipei Metro is the urban rail service operated by 臺北大眾捷運股份有限公司. Its company history records the company's establishment on 27 July 1994 and the Muzha line's opening on 28 March 1996. The same history records QR single-journey tickets and an accompanying Taipei Metro Go app purchase function in March 2026: the service continues to develop its digital journey tools.

The identity pairs blue and green with open, flowing shapes. The official identity account describes simplified corners, balanced space between the symbol's two halves, and colours adjusted for use against different backgrounds. The company dates that identity refinement to late 2020. On the measured website, this becomes a light service portal: white panels, coloured section accents, illustrated service links, and compact rounded actions.

The requested entry URL (web.metro.taipei/pages/index.asp) rendered the Traditional Chinese homepage at www.metro.taipei/, with HTML lang="zh-Hant-TW"; all live measurements below describe that destination.

Primary tasks visible on this homepage are route and fare lookup, station information, service shortcuts, and news.

Brand Narrative

The company's mission connects safe, reliable, friendly transport with sustainable development and services grounded in its transport business. Its station-redesign announcement carries that approach into Zhongshan station, describing subtraction, systematic organisation and consistency from the traveller's perspective. These are company statements about service and physical space; the website measurements describe their own evidence domain.

Principles

The current vision page names smart technology, resilience and sustainability, alongside integrity, teamwork, innovation and openness. For this web reference, the observed implementation suggests clear task labels, differentiated service accents and conspicuous keyboard focus. Those implementation lessons are an interpretation of the measured page.

Personas

Personas were not researched.

Colors

These are observed website values, named here by their measured roles; they are not a published corporate token dictionary.

The census contains just one custom property, --font-color: white. Its declaration is in the delivered hamalightGallery.css, where it colours gallery tools and descriptions. It is excluded from the Metro palette. No brand custom-property namespace was verified; the values above come from rendered styles.

Typography

The evidence classes remain separate:

• Official product use: the identity page documents redesigned standard lettering, with smoother strokes and attention to readability and image/text balance. It does not name an interface font family. A wordmark is not evidence of a reusable UI face.
• Live-loaded: the census reports document.fonts loaded faces as []. No family is admitted to the typography tokens and no font specimen is supplied.
• Official distributed assets: no text-font binary or text-font licence was opened. The delivered CSS declares local font aliases and an icomoon icon face; those declarations do not establish a distributed brand text face.
• Declared-only: body computes to sans-serif; h1 declares Arial, 微軟正黑體修正, 微軟正黑體, "Helvetica Neue", Helvetica, sans-serif, 新細明體. Text controls declare Arial. The 微軟正黑體修正 face points to local fonts; the icon face names relative TTF/WOFF resources. None appears in the census's loaded list. Roboto and Material Icons are linked in the original Angular shell, outside the rendered homepage's font evidence.
• Unresolved: actual system-rendered Han and Latin faces, downloadable text-face availability and licensing. Substitute: none chosen.

Keep the measured metrics: main navigation 20px/400 with 30px line height; its hover/focus weight is 700. The origin select is 18px/400 with 30.6px line height. The route-map caption is 18px/400; its anchor reports 16px/400 with 24px line height. The query link is 18px/700 with 18px line height. The more-news link is 16px/400 with 16px line height. These metrics do not identify the rendered font.

Layout

The observed desktop page stacks a utility row, a logo/navigation row, a broad promotional carousel, a centred two-tab journey panel, and eight illustrated service shortcuts. News, business links, app promotion and a multi-column footer follow. This hierarchy keeps travel tasks near the top while allowing substantial civic and commercial information below. That is a layout observation from the survey screenshots, not a documented grid specification.

Use the measured control padding where applicable; no general spacing scale or container-width token was verified.

Responsive Behavior

Only 1440×1000 desktop was measured; mobile behaviour and breakpoints are unverified.

Elevation & Depth

All six sampled controls have computed box-shadow: none; surrounding panel shadows were not measured as reusable values.

Motion & Easing

All six sampled controls report the exact computed transition all 0.15s ease 0s: 150ms with ease and no delay. No custom cubic-bezier curve was computed. The navigation arrow's measured hover transform is recorded in §14.

Separately, the corporate identity page says its motion identity draws on train movement and arrival. It supplies no interface timing specification here.

Components

Measurements use a 1440×1000 desktop viewport. Four controls have clean reusable state evidence:

The search icon's visible image ink was not measured, so its component has no foreground token.

Two additional actions retain their measured geometry as reference observations: 查詢 is a 100×38px link, radius 30px, padding 10px 0px, 18px/700, amber #f3b544 with black #000000; 更多 新聞稿 is a 140.5×40px link, radius 20px, padding 12px 28px, 16px/400, sky #9be1fb with #1a1a1a. Both have no border or shadow. Their pointer states remain unmeasured, and their after-blur snapshots collapse to 0×0. They are therefore kept out of the component tokens.

The header keyword field was hidden in the survey; no keyword-input component was harvested. The origin select is a separate route-planning control.

States

The first pointer pass reported coverage by the header layer for query, more-news and origin select. The second call requested hideOverlays: true; the probe still reported them covered. No third call was made. A covered pointer state is UNMEASURED, not unchanged.

All accepted hover snapshots matched :hover; pressed snapshots matched :active; keyboard snapshots matched :focus and :focus-visible. Comparisons include each control, its pseudo-elements, up to three ancestor levels and descendants. The route card includes four descendants and one image; the select includes 144 descendants. External image internals, iframe contents and pixel-only changes are outside that scope. Disabled variants were not measured.

Do's and Don'ts

• Keep the blue/green section accents, white service surfaces and distinct amber query action.
• Preserve the measured caption size on service cards and the navigation's weight change.
• Retain the coral dashed keyboard outline, including its measured offset.
• Do not turn the CSS family declarations into verified font specimens.
• Do not assign a transparent icon label's colour to its visible background-image glyph.
• Do not fill in the unmeasured query, news-link or select pointer states.

Voice & Tone

Visible labels are direct service names and actions: 乘車指南, 路線及票價查詢, 路網圖 and 查詢. No authored editorial voice guide was verified.

Agent Prompt Guide

“Create a 175×148px service-card link with square corners and 0px 16px 16px padding on a white list item. Its caption is 18px/400 and #1a1a1a; hover changes the caption to #004d79. Keyboard focus adds a 3px dashed #e76454 outline at 1px offset. Keep the font family unspecified.”

“Create a 36px square search-icon link with an 18px radius and #f5f5f5 fill. Hover uses #99c047; keyboard focus keeps that fill and adds the same coral outline at 1px offset. Use only a verified icon asset.”