Taiwan Mobile DESIGN.md

Overview

Visual Theme & Atmosphere

Taiwan Mobile (台灣大哥大) is Taiwan's largest telecom carrier, and its digital presence communicates bold accessibility through a clean, modern consumer-tech aesthetic. The primary brand color is a confident vibrant orange (#ff6700 — 活力橘), splashed across call-to-action buttons, section headings, and the "Planet Possible" multi-color logo — a signal of energy, openness, and everyday possibility. The canvas is predominantly white (#ffffff) layered over a cool light-grey surface (#f5f7f8) that keeps the page feeling airy despite the density of telecom plans and product listings.

Typography mixes two typefaces to serve two audiences: Poppins (Latin display and UI weight) lends the brand an international, modern feel at 48px / weight 500 for hero text, while Noto Sans TC covers Mandarin Traditional Chinese body and navigation copy with excellent CJK legibility. This dual-font system lets Taiwan Mobile speak equally well in English plan names and Chinese UI labels without visual friction.

A defining trait of the system is its pill geometry. Navigation tabs for plan types ("搭手機", "搭商品", "搭光纖", "單門號") run in 40px-radius pill buttons at 45px height. Login pills, dialog buttons, and product filter chips all echo this full-round language. Combined with near-shadowless flat depth — surfaces separate by tinted background rather than elevation — the result is a crisp, modern telecom UI that feels fast and accessible on both desktop and mobile.

Key Characteristics:

• Vibrant orange (#ff6700) as the single primary action color — CTA buttons, active links, key headings
• Dual typeface: Poppins for Latin/display, Noto Sans TC for Chinese body text
• Pill-forward geometry — 40–50px radius on all interactive elements
• Near-shadowless flat depth — light grey #f5f7f8 surface and #e3e7ee card backgrounds handle separation
• Dark notification bar #1e2022 at the top, white sticky header below (two-layer header)
• Multi-color "Planet Possible" logo (orange, indigo, pink, green) reflecting group identity
• Corporate sub-site uses electric blue #0081cc nav — distinct from consumer orange system

Primary tasks

• Find a telecom plan that fits what you need
• Search by handset first, then pick the plan
• Bundle several streaming services onto one phone bill
• Switch plans when a better deal comes around
• Ask the AI assistant about a billing question

Brand Narrative

Taiwan Mobile (台灣大哥大) was founded in 1997 as one of Taiwan's first mobile telecoms licensees, growing to become the island's largest carrier with the national "5G Taiwan Team" (5G台灣隊) positioning — a platform for Taiwan's digital transformation. The brand has undergone a landmark 2020 rebrand under the "Open Possible 能所不能" platform: the classic 12-sided circular logo evolved into "Planet Possible," a multi-color sphere incorporating the brand palette of all group entities (orange for telecom energy, indigo for digital unity, pink for momo e-commerce, green for sustainability).

The company sits at the convergence of Taiwan's telecom, media, and e-commerce markets. Its subsidiaries include myfone (digital-first telecom storefront), momo (Taiwan's largest e-commerce platform), MyVideo (OTT streaming), and OP (lifestyle rewards app). This group breadth explains the colorful "Planet Possible" logo — the visual merger of multiple consumer digital brands into one identity.

What Taiwan Mobile refuses to be: an austere, technical-only carrier. The pivot to "digital life" (數位生活) — streaming bundles, gaming services, international roaming packages — positions the brand as a lifestyle enabler, not merely a pipe. The orange-led color system, pill-forward geometry, and bilingual Poppins + Noto typography all communicate accessibility, modernity, and everyday consumer relevance.

The carrier won the 2024 Brand of Excellence Award for telecom (品牌卓越獎) and is Taiwan's first telecom to operate an integrated 5G + fiber + media + e-commerce platform under one roof.

Principles

1. Open every possibility. 能所不能 is not marketing speak — it is a design directive. Every service should feel reachable within one tap. UI implication: prominent orange CTAs, horizontal pill tabs rather than buried menu trees, search-first plan discovery.
2. One system, many identities. The Taiwan Mobile group runs telecoms, streaming, e-commerce, and smart home under one brand umbrella. UI implication: the multi-color "Planet Possible" logo and varied accent palette (teal, indigo, pink) acknowledge sub-brand diversity while orange anchors the parent brand.
3. Consumer-grade simplicity. Telecom is inherently complex (5G, roaming, bundle pricing). The design simplifies without dumbing down. UI implication: pill-tab plan selector over dropdown menus; benefit-first plan names over technical specs.
4. Bilingual by default. Taiwan is Mandarin-primary but globally connected. UI implication: every plan has a Chinese name AND an English descriptor; typography handles both scripts with equal visual grace.
5. Energy without aggression. Orange is confident, not alarmist. UI implication: the orange is reserved for "do this" moments only — it never appears as a warning or error color.

Personas

Personas below are fictional archetypes informed by publicly observable Taiwan Mobile user segments (Taiwanese telecom customers, digital lifestyle consumers), not individual people.

陳靜雯, 28, 台北. Young professional juggling Netflix, Disney+, and HBO Max subscriptions across three devices. Chose Taiwan Mobile's "影音多享組" because one bill covers all streaming. Values the myfone interface for comparing plan prices quickly; has never visited a physical store.

林大偉, 42, 台中. Family plan holder with 4 SIM cards across the family. Upgrades every 2–3 years when a flagship model launch coincides with a good plan. Uses "搭手機" flow exclusively — always searches by handset first, plan second. Appreciates that Taiwan Mobile is the "5G Taiwan Team" national standard-bearer.

蔡小玲, 22, 高雄. Student on a budget, uses a prepaid card (預付卡). Watches MyVideo for free bundled streaming. Switches between plans every semester based on whatever deal is running. Engages heavily with "OP 響樂生活" points for free 7-Eleven coffee.

鄭建宏, 55, 花蓮. Small business owner who recently subscribed to a 5G fixed wireless access (FWA) plan for his shop. Found Taiwan Mobile through a local franchise store; primary interaction is the "我要問小麥" AI chat for billing questions. Values reliability of coverage over plan features.

Colors

Primary

• Vibrant Orange (#ff6700): The 活力橘 (vibrant orange) brand primary. Appears on primary CTA buttons ("搭手機"), active nav links ("Apple 方案"), section headings on brand pages, footer brand text, and the main logo. Dominant interactive color.
• Orange Hover (#f45100): Darker orange for CTA hover state, confirmed in default.css.
• Orange Alt (#ff8f08): Lighter amber variant used in myfone promotional cards and special offer callouts.

Brand & Group

• Brand Indigo (#2d2d6c): Deep indigo from the "Planet Possible" logo, used on myfone backgrounds. Represents Taiwan Mobile group "unity" pillar.
• Teal Accent (#024d58): Deep teal used in "數位生活" (Digital Life) category section backgrounds — a lifestyle-services accent within the consumer-tech suite.
• Green Accent (#0eaa7d): Sustainability and eco-emphasis accent, visible on myfone and brand-concept surfaces.
• Pink Accent (#ce2874): momo (e-commerce subsidiary) brand pink, appearing on myfone cross-promotion surfaces.

Surface & Structure

• Canvas White (#ffffff): Main page background, sticky header bg, card white surfaces.
• Surface Grey (#f5f7f8): Default page body background — the most-frequent background (135× in frequency scan), giving pages a cool, clean non-harsh baseline.
• Card Mist (#e3e7ee): Picture-card and product-card background; 20px radius. A slightly warmer grey for product displays.
• Dark Bar (#1e2022): Notification/announcement bar at page top, dark near-black.

Text & Muted

• Ink (#2d3033): Primary body text and default link color. Not pure black — a warm near-black.
• Secondary (#515a68): Secondary text, dialog dismiss buttons, subdued UI labels.
• Muted (#838d9c): Inactive nav tabs, placeholder text, tertiary metadata.
• Muted Light (#b5bdc9): Footer links and lowest-emphasis text (from twm-footer.css).

Typography

Font Family

• Display / UI Latin: Poppins — modern geometric sans. Used for hero headlines, section titles, navigation, and button labels.
• CJK / Body: Noto Sans TC — optimized for Traditional Chinese. Covers body copy, UI labels in Mandarin, plan descriptions.
• Fallback chain: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

Hierarchy

Principles

• Poppins for brand confidence, Noto for readability: Poppins carries the brand personality at display sizes; Noto serves dense Traditional Chinese plan descriptions.
• Medium weight dominates: Weight 500 for headings rather than heavy bold — accessible, scan-friendly for plan comparison.
• Bilingual fluency: Plan names run English-first (e.g. "Apple 方案", "OP 響樂生活"); UI labels are Mandarin-first.

Layout

Spacing System

• Base unit: 8px (Tailwind custom scale)
• Scale (from global-variables.css): s9=4px, s8=8px, s7=16px, s6=24px, s5=40px, s4=60px, s3=80px, s2=120px, s1=160px
• Notable: The 60px and 80px stops power generous section padding; the 16px/24px duo covers card internal rhythm.

Grid & Container

• Full-width hero carousel with overlay text centered
• Plan tab selector as a horizontal pill group below the hero
• Product cards in a horizontal swiper (280px square tiles)
• Feature sections alternate between white and #f5f7f8 surface backgrounds
• Max content width: ~1440px viewport with centered content blocks

Whitespace Philosophy

• Surface-over-shadow: depth comes from alternating #ffffff and #f5f7f8 band backgrounds rather than card shadows
• Generous hero: carousel banners run full-viewport-width, creating an immersive first impression before narrowing to structured plan content
• Breathing pill row: plan tabs are generously padded (8px 24px) with 40px radius, making each option feel tappable and inviting

Border Radius Scale

• None (0px): notification bar, full-bleed sections
• Small (8px): inner elements, chips
• Medium (20px): product cards, picture cards — the dominant card shape
• Large (40–50px): plan tabs, login pills, secondary buttons
• Full (9999px): promo badges

Responsive Behavior

Breakpoints

Touch Targets

• Plan tab buttons at 45px height with 24px horizontal padding — generous tap area
• Login pill at 37px height, still comfortably tappable
• Product cards at 280px — thumbnail-first browsing optimized for touch

Collapsing Strategy

• Hero carousel: full-viewport → compressed height on mobile, text overlays scale
• Plan tab row: horizontal scroll on narrow viewports; orange active tab maintains prominence
• Product cards: horizontal swiper adapts to viewport width; maintains 20px radius
• Dark notification bar: persists across breakpoints, stays at top

Elevation & Depth

Shadow Philosophy: Taiwan Mobile's consumer-tech surface is nearly shadowless — flat, fast, and scan-optimized for users comparing telecom plans. When elevation is needed (dialogs, overlays), a minimal rgba(0,0,0,0.08) ambient shadow appears. Depth is communicated through background alternation (white → surface-grey → card-mist), matching the clean, mobile-native aesthetics expected in Taiwan's competitive telecom retail market.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.none: none
• shadow.soft: 0 2px 8px rgba(0,0,0,0.08)

Motion & Easing

Durations:

Easings:

Motion rules: Carousel-driven design (the hero is a swiper) means motion is primarily horizontal — product slides sweep laterally using ease-standard at motion-carousel duration. Orange interactive elements respond to hover with a fast 120ms background darken from #ff6700 → #f45100. Dialogs fade-and-scale in at motion-standard / ease-enter. Under prefers-reduced-motion: reduce, all carousel auto-advance stops and all transitions collapse to instant; the product remains fully navigable.

Signature motion: The "Planet Possible" logo sphere in motion on campaign materials rotates gently, echoing the original "spinning ball" heritage of the 台灣大哥大 brand. On the live web UI, this expresses as the horizontal carousel sweep — the brand in motion, orbiting possibilities.

Components

Buttons

Primary CTA (Plan Tab Active)

• Background: #ff6700
• Text: #ffffff
• Radius: 40px
• Height: 45px
• Padding: 8px 24px
• Font: 18px Poppins weight 400
• Hover: #f45100 background
• Use: Active plan tab — "搭手機"; primary CTAs on product pages

Inactive Plan Tab

• Background: transparent
• Text: #838d9c
• Radius: 40px
• Height: 45px
• Padding: 8px 24px
• Font: 18px Poppins weight 400
• Use: Inactive plan tabs ("搭商品", "搭光纖", "單門號")

Login Pill

• Background: transparent
• Text: #ffffff
• Radius: 50px
• Height: 37px
• Padding: 12px 16px
• Font: 14px Poppins weight 400
• Use: "登入" login link in the dark header top band

White Secondary (Dialog Dismiss)

• Background: #ffffff
• Text: #515a68
• Radius: 40px
• Height: 44px
• Padding: 0px 16px
• Font: 15px Poppins weight 400
• Use: Secondary dismiss buttons — "我知道了", "返回首頁"

Cards & Containers

Picture Product Card

• Background: #e3e7ee
• Radius: 20px
• Shadow: none
• Use: Product and plan picture cards, 280×280 to 520×520px

Surface Content Card

• Background: #f5f7f8
• Radius: 20px
• Shadow: none
• Use: Feature content cards on the cool-grey surface sections

Badges

Orange Promo Badge

• Background: #ff6700
• Text: #ffffff
• Radius: 9999px
• Font: 12px Poppins weight 400
• Use: Promotional tag, "限時優惠", highlight badges

Navigation

Top Header (White)

• Background: #ffffff
• Height: 72px
• Font: 15px Poppins + Noto Sans TC weight 400
• Text: #2d3033 standard, #ff6700 on highlighted link
• Use: Main sticky white navigation header

Notification Bar

• Background: #1e2022
• Text: #ffffff
• Height: 34px
• Use: Top announcement/notification band above main header

Dialogs

Cookie / Info Overlay

• Background: #ffffff
• Radius: 20px
• Shadow: 0 2px 8px rgba(0,0,0,0.08)
• Use: Cookie consent overlay, system notices

Verified: 2026-06-22 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://www.taiwanmobile.com/ (homepage, live computed style + CSS intercept), https://corp.taiwanmobile.com/company-profile/brand-concept.html (corporate brand concept — brand-owned) Tier 2 sources: getdesign.md/taiwanmobile — not found; styles.refero.design/?q=taiwan+mobile — no relevant results Conflicts unresolved: none

States

Do's and Don'ts

Do

• Use #ff6700 orange exclusively for primary CTAs and active interactive states
• Apply Poppins for display and button Latin text; Noto Sans TC for body Mandarin
• Use 40px or greater border-radius on all interactive pill elements — the language is round
• Separate sections with flat background tint (#f5f7f8) and #e3e7ee card backgrounds rather than shadows
• Keep headings at weight 500 — Taiwan Mobile is confident, not heavy
• Maintain the two-layer header: dark notification bar #1e2022 on top, white sticky nav below

Don't

• Replace orange with any other color as the primary CTA — #ff6700 is the brand signal
• Use sharp corners on buttons — all interactive elements are pills (≥40px radius)
• Apply heavy shadows or layered elevation — the system is flat and surface-based
• Use pure black (#000000) for body text — the brand uses warm near-black #2d3033
• Mix the teal #024d58 or indigo #2d2d6c accents into primary UI elements — they are category-specific accents
• Set Poppins at a light weight (300) for headlines — Taiwan Mobile is weight 500 medium

Voice & Tone

Taiwan Mobile's brand voice is optimistic, energetic, and human-centered — captured by the tagline "Open Possible 能所不能" (Enabling the impossible, opening every possibility). Copy treats users as empowered digital citizens, not passive telecoms customers. The interface speaks in short, inviting Chinese phrases — "今天想找什麼電信方案呢？" (What telecom plan are you looking for today?) — conversational and forward-looking rather than formal or corporate.

Voice samples (verbatim from live site, 2026-06-22):

• "台灣大 大可能" — homepage tagline (brand-coded repetition). (verified live 2026-06-22)
• "今天想找什麼電信方案呢？" — section prompt heading. (verified live 2026-06-22)
• "給你美好數位生活的各種可能" — page subtitle meta description. (verified live 2026-06-22)

Forbidden register: impersonal corporate speak, coverage-first fear marketing, jargon-heavy plan descriptions without plain-language benefit framing.

Agent Prompt Guide

Quick Color Reference

• Primary CTA: Vibrant Orange (#ff6700)
• CTA Hover: Orange Dark (#f45100)
• Background: Canvas White (#ffffff)
• Surface: Surface Grey (#f5f7f8)
• Card: Card Mist (#e3e7ee)
• Heading / body text: Ink (#2d3033)
• Secondary text: Secondary (#515a68)
• Muted / inactive: Muted (#838d9c)
• Notification bar: Dark Bar (#1e2022)
• Brand Indigo (logo/myfone): #2d2d6c
• Teal accent (Digital Life): #024d58

Example Component Prompts

• "Create a plan selector on white background. Horizontal pill tab row — active tab: #ff6700 background, white text, 40px radius, 45px height, 8px 24px padding, 18px Poppins. Inactive tabs: transparent background, #838d9c text, same shape."
• "Design a product card: #e3e7ee background, 20px radius, no shadow. Title 16px Noto Sans TC weight 400, #2d3033. Price in orange #ff6700."
• "Build a hero section: full-width background image or gradient. Headline 48px Poppins weight 500, white text. Sub-text 16px Noto Sans TC. Orange CTA button #ff6700, white text, 40px radius, 24px 24px padding, hover #f45100."
• "Create top nav: white 72px sticky header. Logo left, nav links center (15px Poppins + Noto, #2d3033). Orange highlighted link #ff6700. Login pill right (transparent bg, white text would be on dark band, 14px, 50px radius)."

Iteration Guide

1. Orange #ff6700 is the ONLY primary action color — never dilute with a second accent
2. Pill everything — minimum 40px radius on buttons; 20px on cards
3. Flat depth — use #f5f7f8 and #e3e7ee surfaces, not shadows
4. Poppins for brand/display Latin; Noto Sans TC for Chinese product text
5. Weight 500 medium for headings; weight 400 for body/UI
6. Dark notification bar #1e2022 at the very top; white header below
7. Muted grey #838d9c for inactive states; orange #ff6700 for active

Governance

Known Gaps

• Contrast, button-primary. Text #ffffff on #ff6700 measures 2.92:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-orange. Text #ffffff on #ff6700 measures 2.92:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.