Taiwan Railway DESIGN.md

Design System Inspiration of Taiwan Railway

Overview

Visual Theme & Atmosphere

Taiwan Railway's passenger portal brings timetable searches, individual ticket booking and rail travel into one service homepage. The operator is 國營臺灣鐵路股份有限公司. Its official timeline records the company's formal launch on 1 January 2024; its vision page puts safety, service performance and punctuality among its stated goals.

The measured homepage combines a white header and blue navigation with large train photographs, a dense timetable form and a fixed service rail. The footer adds small illustrated trains. The visual character comes from this close pairing of railway imagery and practical controls: a blue query button, square white station inputs and strongly differentiated query tabs. Main navigation and the query button share #256fa0; the button changes to #009bad on hover.

The company is also changing its web address. Its 20 May 2026 announcement says www.trc.com.tw starts operating alongside www.railway.gov.tw on 1 July 2026, with the old address expected to stop operating on 1 January 2027. This reference measures the Traditional Chinese page at www.railway.gov.tw/tra-tip-web/tip (lang="zh-Hant"); the capture did not redirect to another edition.

Brand Narrative

The company's 2024 timeline connects its formal company launch with the publication of a book documenting 136 years of railway history. Its current company introduction presents low-carbon transport and digital transformation as areas of development. The homepage's train photographs and illustrated footer are observed expressions on this passenger surface; no source was found attributing the measured palette or typography to a rebrand.

Principles

The official vision page lists six core values: safety, accuracy, service, innovation, unity and honour. Its four operating goals are safety, better service, sustainable operations and a happy enterprise. These are company statements; no separately published web-interface principles were verified.

Personas

No formal personas were verified.

Colors

These are measured interface colours, with descriptive roles assigned for this reference. They are not published company token names. The root custom-property census was empty; direct reads of the 15 distinct linked stylesheets also found no custom-property declarations.

The active timetable panel is rgba(0, 0, 0, 0.9), rather than an opaque-black token. The booking rail's measured backing is rgba(255, 255, 255, 0.9). Keep these alpha values as observed.

The survey's paragraph-ink samples were white and cyan, both from the open cookie notice and its link. They do not establish the colour of ordinary article paragraphs. The foreground role above is grounded separately in the rendered input and the site's declared body rule.

Typography

Font evidence is separated by class:

• Official product use: the opened company and legal pages did not document a product typeface.
• Live-loaded: document.fonts reported Glyphicons Halflings and FontAwesome, both normal weight/style. These are framework icon faces, excluded from UI font-family tokens. Their linked Bootstrap and Font Awesome stylesheets declare font sources under the site's CDN static/fonts/ directory; the selected network format was not recorded.
• Official distributed assets: no company text-font asset or font licence was verified. No font files were fetched.
• Declared-only: the computed body, h1 and first-button stack was 黑體-繁, 頻方-繁, "Heiti TC", 微軟正黑體, "Microsoft JhengHei", Arial, serif. The quick-booking control in the states capture declared Noto Sans TC, also present in nav-quick.css. None of these text faces appeared in the survey's loaded-face list. They receive no specimen and no typography family token.
• Unresolved: the actual text face used for each script and the availability of the declared local faces. Substitute: none chosen.

Retain the measured metrics independently of the missing family:

The survey recorded the booking link at weight 400 with the main declared stack; the states capture recorded weight 700 and Noto Sans TC. The table and component metadata use the states identity, without treating that declaration as proof of a loaded font.

Layout

At the measured 1440 × 1000 viewport, the carousel and its toggle are 1170px wide. A seven-item navigation row sits above the carousel, followed by three equal query tabs. The timetable form places departure, arrival, date, time range and query action in one horizontal group. News appears as compact rows with a category, a truncated headline and a date. Service shortcuts sit in a fixed right-hand rail.

These are desktop observations. No grid or spacing scale is inferred from them. Measured control padding is 10px 16px on the two large buttons, 1px 2px on the input and 0px on the sampled links.

Responsive Behavior

Mobile layouts and breakpoint behaviour were not measured.

Elevation & Depth

All six sampled controls have box-shadow: none at rest. The query button and carousel toggle acquire the same pressed inset shadow: rgba(0, 0, 0, 0.125) 0px 3px 5px 0px inset. The light gradient on the carousel toggle supplies its unpressed surface detail. No site-wide elevation scale was verified.

Motion & Easing

The quick-booking link computes transition: color 0.3s ease-out 0s. The other five sampled controls compute transition: all 0s ease 0s. No broader motion scale was verified.

---

Measured 2026-11-09 using the capture service's fresh worker browser, zh-TW, 1440 × 1000. Full raw survey and state evidence, consent limitations, CSS provenance and short narrative quotations are recorded in verification.md and report.md.

Components

All six controls were identified and measured on the desktop homepage. The cookie notice remained open: its only action was “接受並關閉”, which was not activated. hideOverlays: true was enabled for pointer testing, but the result recorded no hidden overlays; every pointer target was reached after scrolling.

The carousel toggle's raw background image is linear-gradient(rgb(251, 251, 251) 0%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 65%, rgb(239, 239, 239) 100%). Its background colour itself is transparent. The departure field is only the text input inside a larger station-picker wrapper; do not apply its 22px height to that entire wrapper.

No standalone content-card control was identified in the rendered homepage survey.

States

Every hover matched :hover; every press matched :active; every focus state came from Tab. “No computed change” covers the control, its pseudo-elements, zero descendants and three ancestor levels with their pseudo-elements; the carousel toggle comparison has two ancestor levels. It does not cover unrelated siblings or the pixels inside an external mask asset. Disabled, validation, submission-result and selected-tab transitions were not measured.

Do's and Don'ts

• Preserve the blue query action and its teal hover / pressed fill.
• Keep the measured 6px button corners distinct from square station inputs and navigation links.
• Retain the authored dotted-red focus outline on the controls where it was measured.
• Keep the navigation hover's extra 4px bottom border and resulting 46px height if reproducing this exact control.
• Do not turn a declared text stack into a verified loaded font or insert a substitute font specimen.
• Do not treat the cookie-notice action as a product component.

Voice & Tone

The interface uses short task labels: “查詢”, “個人訂票” and “更多消息”. The domain-change announcement addresses passengers politely with “敬請旅客多加利用新網址”. These are observed examples of task wording and service communication, rather than a published voice guide.

Agent Prompt Guide

Build a white railway-service page with a blue navigation bar, train photography, three query tabs and a compact timetable form. Use the measured component geometry and state changes below. Leave the unresolved text-font family unset.

Example: “Create the departure input at 110 × 22px with white fill, dark text, square corners, 1px 2px padding and 14.4px / 400 type metrics. On keyboard focus draw a 4px dotted #ff0004 outline at 0px offset; place it within the larger station-picker wrapper.”

Example: “Create a 260 × 43.3px query button with 6px radius, 10px 16px padding, 16px / 400 type metrics and a #256fa0 fill. Hover changes the fill to #009bad; press adds the measured inset shadow.”