Tigerair Taiwan DESIGN.md

Design System Inspiration of Tigerair Taiwan

Overview

Visual Theme & Atmosphere

Tigerair Taiwan is a Taiwanese low-cost airline whose first flight departed on 26 September 2014. Its company history records the purchase of the Tigerair brand rights in 2021. The fleet page connects the identity to Taiwan-island forms in its logo lettering and a tiger-striped tail, and describes a service culture of passion, warmth and sincerity. These are useful anchors for the brand's friendly travel imagery. Company history, fleet and identity writing. Both articles were read through the public content API; the exact requests are in the verification notes.

The homepage pairs an illustrated tiger-led campaign banner with a practical white booking panel, orange search action, grey interface copy and photographic destination cards. The measured primary orange is #faa836; a brighter yellow-orange, #ffc233, appears on service-link hover. The campaign image supplies much of the visual energy while the form remains compact and orderly. These are observations of the captured homepage, not published design principles.

The brand's travel offering is also expanding. Its 1 October 2026 announcement introduced the Dohop-powered 虎里轉 tigerhop booking platform; the measured homepage places 虎里轉 beside 航班, 樂虎卡 and 虎加酒 in the booking panel. Tigerhop announcement, read through its public content API.

The measured homepage is the Traditional Chinese edition at www.tigerairtw.com/zh-TW/index, with HTML lang="zh-TW", captured at 1440×1000.

Brand Narrative

The official company history links the airline's 2014 start to its 2021 acquisition of the Tigerair brand rights. The fleet article gives the identity a physical expression in logo lettering, striped tails and collaborative aircraft liveries. The 2026 tigerhop announcement extends that travel offer to connecting itineraries. The homepage brings these strands together through a mascot-led campaign, destination photography and a shared booking panel. Company, fleet, tigerhop.

Principles

The fleet article explicitly names passion, warmth and sincerity under “Safety First.” For a homepage implementation, the captured UI suggests three practical principles: keep the booking task prominent, express the tiger identity in imagery and service names, and reserve vivid interface colour for actions and interaction feedback. The latter three are design inferences from this surface.

Personas

User personas were not researched.

Colors

The census recorded 18 computed root custom properties and 26 distinct declared properties. Quasar names carry the site's configured palette, while animation, layout mechanics and Swiper defaults are kept separate. Only colours tied to the captured product surface are promoted here.

Here foreground describes measured interface labels. The paragraph-ink census was empty, so a distinct paragraph/body-copy colour remains unresolved. The root variable named warning is demonstrably also used for these interactive hover colours; this observation does not establish a complete warning-message treatment.

Typography

Official product use: no opened official typography guideline identifies a product text face.

Live-loaded: document.fonts reports Noto Sans TC, normal, weights 400, 500 and 700. The first-party stylesheet imports a Google Fonts stylesheet requesting these weights. The family token records this loaded page face; it does not identify the actual glyph font of every control. Exact imported font-file URLs were not enumerated in the census.

Official distributed assets: the first-party stylesheet declares locally served Material Icons Outlined and Material Icons Round, weight 400; both loaded. Phosphor and Phosphor-Fill also loaded, and the stylesheet imports their regular/fill CSS from unpkg. These are icon fonts and are excluded from text-family tokens. No first-party distributed text-font binary or text-font licence was verified.

Declared-only: the six measured controls declare Noto Sans, which is absent from the loaded-face list. The census body declares Roboto, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; the census button stack also names Microsoft JhengHei, Microsoft YaHei and Heiti TC. These named faces were not reported loaded. Noto Sans TC also occurs in that button stack and retains its separate live-loaded classification above. The stylesheet requests Noto Sans Mono, Noto Sans JP, Noto Sans KR and Noto Sans Thai, but none appears in the loaded list. The unloaded faces receive no specimens and are not promoted to family tokens.

Unresolved: the actual glyph face used by each control, full text-font asset provenance and licensing. Substitute: none chosen.

Measured metrics remain useful independently of that family uncertainty: search and promo-code controls are 14px/500, with 24.01px line-height; header navigation is 14px/400, with 21px line-height. The map action's visible child label is 16px/700, although its outer anchor is 14px/500.

Layout

At the measured desktop width, a fixed 58px-high white header sits above a full-width illustrated campaign carousel. A white booking panel overlaps the banner's lower edge. Below it are five service shortcuts, a three-column fare row, a route-map promotion, a four-column promotion grid, dated news rows and five footer link groups. These arrangements are visible in the survey's full-page screenshot.

The booking controls use compact spacing: the search action has 8px vertical / 32px horizontal padding; navigation items have 16px / 24px; the map action has 8px horizontal padding. Preserve these component measurements without assuming a universal spacing scale.

Responsive Behavior

Only desktop 1440×1000 was measured; mobile layouts and breakpoint behaviour were not verified.

Elevation & Depth

All six measured control roots have box-shadow: none. The action wrapper immediately above the low-fare-map link has this measured shadow:

rgba(0, 0, 0, 0.2) 0px 1px 3px 0px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 2px 1px -1px.

Keep elevation attached to the observed wrapper rather than assigning it to the link itself.

Motion & Easing

The header navigation item's computed root transition is color 0.3s ease 0s. The other five measured control roots report all 0s ease 0s. These root strings do not describe every descendant layer's timing; no additional motion curve is promoted.

Components

These observations use real hover, held-pointer press and a Tab walk. The cookie banner remained open: its only surveyed action was 接受. The probe was given hideOverlays: true, but no control records an overlay actually hidden. Product controls were measured without activating them.

The search and promo-code treatments are layered: .q-focus-helper gains a background in its current text colour, while its black ::before and white ::after change opacity from 0 to 0.1 and 0.4. The helper's own opacity is 0.15 for hover and 0.22 for press/focus. These are measured layer values, not a single flattened replacement background.

The origin airport input was also inspected: 167.6×24px, radius 0px, padding 0px, 14px/400, transparent on white, ink rgba(0, 0, 0, 0.87). Its containing field is 203.609×56px. Keyboard focus paints an orange 2px ancestor border, but blur leaves a persistent red border. Its later pointer states therefore come from a changed baseline; this input remains a prose observation and is absent from component tokens.

States

The two form actions have visible layered hover, press and keyboard-focus feedback that resets after blur. The header item changes its visible text to orange for hover/press; its focus helper stays hidden at 0×0. The service-card label changes to yellow-orange for hover/press; its measured keyboard outline has outline-style: auto, so no brand focus token is published. The map link changes visible text/icon colour for hover/press, while its focus helper also stays hidden at 0×0.

The input's focus and after-blur observations are retained only in prose because the baseline changes after blur. Disabled states were not measured. No absence-of-change claim is made beyond the probe's recorded DOM/style scope.

Do's and Don'ts

• Use orange for the search action and navigation hover; use the measured yellow-orange for the service and map-link hover treatments.
• Pair the lively campaign imagery with restrained grey text, white form surfaces and small 4px button corners.
• Preserve the difference between an outer link's computed colour and its visible child label.
• Keep text-family uncertainty explicit. Use the loaded-face evidence without converting declared-only faces into brand specimens.
• Omit focus styling inferred only from hidden helpers or a browser auto outline.

Voice & Tone

The homepage's labels combine direct task language—搜尋 and 管理訂單—with tiger-themed service names such as 虎加酒 and 虎里轉. A useful implementation keeps booking instructions concise and lets branded travel names and illustrations provide the playfulness. This is an inference from the captured copy, not an official editorial guide.

Agent Prompt Guide

“Build a Traditional Chinese flight-search homepage with a tiger-themed illustrated travel campaign, a white overlapping booking panel, #f4f4f4 page surface and #4a4a4a interface labels. Make the search action 92×40px with #faa836 fill, white 14px/500 text, 4px corners and 8px 32px padding. Use the measured helper-layer states. Add a transparent 69px-high service-card link whose visible text changes to #ffc233 on hover. Keep the control glyph font unresolved until it is verified.”

Governance

Known Gaps

• Contrast, search-flights. Text #ffffff on #faa836 measures 1.96:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.