Taiwan High Speed Rail — Design Reference

1. Visual Theme & Atmosphere

Taiwan High Speed Rail (THSR, 台灣高鐵) operates Taiwan’s north–south high-speed rail service and frames itself as more than transport: a life-service platform built around safer, faster, more comfortable travel. Its official history places incorporation in 1998, full Taipei–Zuoying operation in 2007, and a corporate-identity update in 2006. That long public-infrastructure role gives the brand a particular balance: the official flying-flag mark represents speed and advanced technology, while its flowing lines and orange-plus-gray palette are intended to carry care, optimism, and depth. The current corporate narrative keeps evolving from rail operation toward service, sustainability, local connection, and technology through its 4T framework—Transportation, Technology, Taiwan, and Touch. The supplied public-web capture expresses that intent in a restrained, flat interface: orange action fills punctuate a mostly white, charcoal, and gray reading environment. These product tokens describe only the three captured public web routes, not the T-EX app, ticketing completion, account, or station systems.

Key characteristics:

• Official brand meaning joins a flying-flag / “T” mark, orange optimism, gray depth, speed, and service detail.
• Supplied public routes use #CA4F0F as a measured orange action fill against a white canvas with #333333 and #666666 text.
• Noto Sans TC is the only loaded, high-confidence visible text family in the supplied capture.
• The public controls observed here are flat and predominantly square; the 3px booking control and 5px dialog are bounded local exceptions.

2. Layout & Grid

• The evidence packet covers the public home route plus two official article routes at the collector viewport. It does not establish a breakpoint system, mobile layout, authenticated account layout, T-EX app layout, station kiosk, or purchase-completion layout.
• The home capture includes a 53px orange booking control with 12px 20px padding; the article routes include a 64px orange back-to-top control. Those are local component measurements, not a universal action scale.
• Static list-item samples span 24px, 30px, and 82px heights across navigation and article content. They are preserved as observed reading/navigation geometry only, rather than promoted into a generic row system.

3. Color & Typography

Color tokens

• #CA4F0F — computed orange fill of the selector-backed public booking action and other supplied public action samples. THSR’s official identity describes orange as the mark color for a bright future and optimism, but it does not provide this exact hexadecimal token.
• #FFFFFF — observed public canvas and orange-action label color.
• #333333 — observed structural text and list/menu color.
• #666666 — observed body/list text and public outline color.

The official identity also describes two levels of gray in the logo, but neither those logo colors nor a broader brand palette is promoted as a product token without a measured public-web value.

Typography evidence classes

• Official product-use: no first-party source reviewed names a text family as the THSR product or app typeface.
• Live computed surface-use: Noto Sans TC is loaded with high confidence, 308 observed uses, and Google Fonts WOFF2 source records across the supplied public home, article, dialog, button, tab, and list samples. It is the sole UI-family token because both visible computed use and loaded-font evidence are present.
• Live system use: Arial appears in 13 visible button/tab samples and Helvetica in six input samples. They are operating-system stack evidence, not THSR brand fonts and not substitutes for Noto Sans TC.
• Official distributed brand asset: no separately distributed THSR text-font asset was located in the first-party material reviewed.
• Declared-only: FontAwesome, kyicon, Open Sans, slick, and weathericons have @font-face records but zero observed visible uses in this packet. They are not UI-family tokens.
• Unresolved license boundary: the packet identifies third-party Google Fonts delivery for the loaded Noto Sans TC files, but the reviewed first-party THSR material does not state a THSR font license or rehosting permission. Do not infer either from runtime availability.

4. Components

Public booking action

Default

• Background: #CA4F0F
• Text: #FFFFFF
• Radius: 3px
• Padding: 12px 20px
• Height: 53px
• Font: 16px / 400 / Noto Sans TC
• States: Default only; the supplied capture reports zero interaction records, so hover, focus, pressed, disabled, and transition values are unobserved.
• Use: home::[data-omd-capture="46"]; a public-home booking control, not a universal THSR CTA or a ticket-purchase-flow contract.

Public selected navigation tab

Selected

• Background: #CA4F0F
• Text: #FFFFFF
• Radius: 0px
• Padding: 12px 0px
• Height: 48px
• Font: 16px / 400 / Noto Sans TC
• States: A selected element is observed through aria-selected="true"; no tab-change interaction, hover, focus, pressed, or disabled value was captured.
• Use: home::[data-omd-capture="60"]; this is a public home navigation sample only.

Public date field

Default

• Background: #FFFFFF
• Text: #000000
• Radius: 0px
• Padding: 6px 20px 6px 5px
• Height: 35px
• Font: 18.4px / 400 / Helvetica
• States: Default only; no focus, error, disabled, or interaction value was captured.
• Use: home::[data-omd-capture="43"]; system-font field evidence, not a THSR brand-type claim.

The structured token component above deliberately promotes only the selector-backed booking action. The tab and field remain useful measured prose siblings but are not additional machine component tokens. interactionCount: 0, interactionKinds: 0, and an empty interaction array remove only unobserved interactive claims; they do not erase the default geometry recorded here.

---

Verified: 2026-07-13 Tier 1 sources: https://www.thsrc.com.tw/, https://www.thsrc.com.tw/ArticleContent/46de4c5f-7c2e-4583-bd4c-0f5d67fbb9b8, https://www.thsrc.com.tw/ArticleContent/743c51ac-124d-4b1a-a57b-1fd820848032, https://www.thsrc.com.tw/ArticleContent/605d1cb2-2d98-4d73-9586-7e8363ee44e3, https://www.thsrc.com.tw/corp/9012aea2-04b9-45f4-b3a4-8bcb6782f735, and https://www.thsrc.com.tw/Corp/e5d9a893-ea05-4ff7-80e6-cc71c46d2fb4/assets/d3d47001-95a2-457e-aeef-22b2e1cb45cd.pdf Tier 2 sources: https://getdesign.md/thsr and https://styles.refero.design/?q=Taiwan%20High%20Speed%20Rail were both attempted with built-in web open and returned internal errors; no values were used. Conflicts unresolved: none

5. Elevation

The selector-backed booking action and the supplied dialog samples report box-shadow: none. This is a flatness observation for those public routes, not a global elevation scale for carriages, the T-EX app, ticketing, or unobserved overlays.

6. Spacing & Shape

• The captured public booking action is 53px high with 12px 20px padding and a 3px radius.
• The public selected tab is square at 48px high with 12px 0px padding; its selected state is an element observation only.
• The captured SweetAlert dialog has 20px padding and a 5px radius. It appears as a static DOM sample; no dialog-opening interaction was captured.
• The evidence packet also records 1px, 2px, 3px, 5px, 6px, 8px, 10px, 11px, 12px, 14px, 15px, 16px, 18px, 20px, 23px, 25px, 30px, 34px, 35px, 40px, and 47px spacing values. No global scale is inferred from those occurrence clusters.

7. Iconography & Imagery

THSR’s official corporate-identity page defines the flying-flag mark and its “T” reading; the mark is an identity asset rather than a captured application icon system. Orange, two gray levels, and the flag’s light yet tense line work carry the official speed/technology and human-care message. The supplied capture also declares FontAwesome, kyicon, slick, and weathericons, but none has visible use evidence; their declarations must not be rendered as a verified THSR icon library. No captured SVG set, illustration ratio, image-treatment rule, or favicon source establishes a reusable product asset specification.

Do

• Keep the official flying-flag mark and the measured public orange action treatment in their respective brand-asset and public-surface boundaries.
• Use Noto Sans TC only where the supplied public-web evidence applies; retain system faces as system evidence.
• Preserve the flat, square public geometry when reproducing the specific captured controls.

Don't

• Treat logo-orange meaning as permission to invent an unmeasured app, kiosk, or transaction palette.
• Substitute Arial, Helvetica, or a declared-but-unused icon face as a THSR brand typeface or component system.
• Invent hover, focus, pressed, disabled, error, success, responsive, or animation behavior from the static capture.

8. Accessibility

• The captured booking action pairs #FFFFFF text with #CA4F0F. This reference records its computed colors; it is not a contrast, keyboard, semantic-label, or flow accessibility audit.
• No focus-visible, keyboard, disabled, validation, form-error, toast, or interaction expansion was captured. Any implementation needs those states designed and verified on its actual public or transaction flow.
• The official identity’s logo-background guidance is brand-asset context. It is not evidence for control contrast, accessible names, landmark structure, or responsive behavior.

9. Content & Voice

THSR’s first-party material consistently joins operational assurance—safe, fast, punctual, comfortable travel—with a broader invitation to modern life, local connection, and sustainable progress. Its corporate language names “Go Extra Mile” as a commitment to improve service quality and uses the 4T framework to explain the company’s development direction. Public travel content can therefore be direct and practical, while service, safety, eligibility, or disruption communication should remain specific rather than borrowing promotional warmth as a substitute for operating detail.

10. Voice & Tone

• Assured and operational: safety, speed, punctuality, and comfortable travel are recurring first-party commitments.
• Progressive and civic-minded: the company frames itself as a platform for advancement and enjoyment, not only a transport operator.
• Warmly service-oriented: the identity language joins modern technology with care in the details of service.

Do

• State travel information and service conditions plainly before adding brand warmth.
• Connect progress or technology claims to a concrete traveler or community benefit.
• Keep safety, access, disruption, and transaction information precise.

Don't

• Invent executive quotations, passenger testimonials, or unobserved emergency copy.
• Treat the 4T framework as evidence for interface behavior or a product design system.
• Use optimistic marketing language to obscure eligibility, timing, or service constraints.

11. Brand Narrative

Taiwan High Speed Rail was incorporated in 1998 and began full Taipei–Zuoying service in 2007. The company’s own history positions high-speed rail as a way to close distance and support a different daily life across Taiwan, while its current framing extends from transportation into a life-service platform.

Its corporate identity makes that movement visible through a flying-flag mark whose lines also suggest the letter T. THSR says the orange-and-gray mark combines a sense of bright optimism, technological quality, and human attention to service detail. The same source connects the letterform to Transportation, Technology, Taiwan, and Touch.

The company’s current sustainability material anchors that expression in five values—discipline, integrity, efficiency, innovation, and sensibility—and its “Go Extra Mile” commitment. Those official facts inform the narrative and the principles below; they do not convert into uncaptured UI tokens or interaction states.

12. Principles

1. Put safe, reliable movement first. THSR’s mission material repeatedly centers safe, fast, punctual, and comfortable travel. UI implication: communicate essential trip and service information before promotional additions.
2. Make progress tangible. The company frames its vision as advancement and better life through transportation, technology, local connection, and care. UI implication: explain a feature’s traveler or community outcome, not only its technical mechanism.
3. Practice Go Extra Mile with precision. First-party sustainability material presents continuous improvement as service quality and thoughtful attention to needs. UI implication: use clear next steps and operationally specific help; do not invent delight states where evidence is absent.
4. Balance technology with humanity. The official identity combines speed and advanced transport with attention to service detail. UI implication: avoid treating technical efficiency and accessible, considerate language as opposing goals.
5. Keep public trust legible. Discipline, integrity, and sensibility are listed corporate values. UI implication: make important conditions, disruptions, and accessibility choices explicit and reviewable.

13. Personas

These are source-grounded stakeholder groups, not fictional research personas.

• Intercity traveler: THSR’s public mission addresses people seeking safe, fast, punctual, and comfortable movement between cities; no authenticated booking-profile behavior was captured.
• Passenger planning a journey: the public web surfaces include travel-information and booking-control context, but no completed purchase or account journey.
• Local community and partner: THSR’s 4T and sustainability material name local connection, transport-industry collaboration, and social value as part of its operating direction.
• Employee and operator: safety, service quality, discipline, and professional capability are central to first-party corporate material; internal systems were not captured.

14. States

15. Motion & Easing

The supplied raw evidence contains no interaction records, interaction kinds, motion values, transition values, or easing values. Motion tokens and behavioral rules remain [FILL IN]; the selected tab and static SweetAlert dialog DOM samples are not proof of transitions, opening behavior, or easing.