PChome DESIGN.md

Design System Inspiration of PChome

Overview

Visual Theme & Atmosphere

PChome 24h is Taiwan's archetypal high-density marketplace, and its design reflects a single, unwavering priority: get as much shoppable inventory in front of the eye as possible, as fast as possible. Where Western boutique commerce leans on whitespace and one-product-per-screen storytelling, PChome opens on a light gray canvas (#f2f2f2) tiled edge-to-edge with white product cards (#ffffff), promo banners, credit-card offers, and flash-deal countdowns. The atmosphere is busy, urgent, and transactional in the best Taiwanese-e-commerce tradition — a digital department store where the brand red (#ea1717) is the heartbeat, pulsing on every price, every discount flag, and every "buy now" button.

The system runs on two distinct surfaces with a shared DNA. The portal (www.pchome.com.tw) is a news-and-services front door: dark editorial headlines (Noto Sans TC at 28px / weight 700, white on imagery) over a blue-link information architecture, with a hotter coral-red CTA (#fe3b52) for promotional banners. The 24h shopping app (24h.pchome.com.tw) is the commerce engine: a #f2f2f2 workbench, dense product grids on white cards with 8px corners, prices rendered in the canonical brand red #ea1717, and a blue (#0090eb) reserved for navigational links. Body copy everywhere sits in a near-black #2b2b2b rather than pure black, softening the wall of text just enough to keep a thousand SKUs scannable.

Typography is utilitarian and Traditional-Chinese-first. The primary face is Noto Sans TC with Microsoft JhengHei (微軟正黑體) as the platform fallback, paired with Montserrat and Roboto for Latin numerals and prices. Weights swing hard between 400 (body, product titles) and 700 (headlines, prices, promo) — there is no whisper-weight subtlety here. Weight, color, and red are the three levers PChome pulls to create hierarchy in an intentionally crowded field. The result is unmistakably a Taiwanese marketplace: confident, dense, value-signaling, and built for the thumb of a deal-hunting shopper.

Key Characteristics:

• Brand red #ea1717 as the universal price + CTA + promo color — the single loudest signal in the system
• Light gray commerce canvas #f2f2f2 with white product cards #ffffff at 8px radius — a tiled department-store grid
• Noto Sans TC Traditional-Chinese-first stack with Montserrat / Roboto for Latin numerals and prices
• Near-black body text #2b2b2b instead of pure black, for readability across dense layouts
• Hard two-weight rhythm: 400 for body, 700 for headlines/prices/promos — no light display weights
• Blue (#0090eb) strictly for navigational links, never for buy actions
• Conservative 4px–8px radius; promo badges and prices, not rounding, carry the visual energy
• Countdown timers, P幣 (P-coin) rebate flags, and strike-through list prices as native commerce ornament

Primary tasks

• Scan a dense grid of deals for price and rebate
• Compare a red sale price against the crossed-out list price
• Add an item to the cart and check out
• Order household goods that arrive the next day
• Search for one specific product instead of browsing the grid

Brand Narrative

PChome Online (網路家庭) was founded in 1998 by Jan Hung-tze (詹宏志), a prominent Taiwanese publisher, writer, and internet pioneer. The name traces to PChome magazine, and the company grew from a portal into one of Taiwan's defining internet groups. Its flagship PChome 24h購物 popularized the promise that gives it its name: delivery within 24 hours across Taiwan — a logistics commitment that became a core brand identity in a market where speed and reliability win loyalty.

The company sits at the center of Taiwan's e-commerce landscape alongside rivals like Shopee, Momo, and Yahoo奇摩購物. Its design reflects that competitive, value-driven market: a department-store density of inventory, aggressive promotional layering (credit-card tie-ins, P幣 rebate points, flash deals), and a brand red that signals price and savings at a glance. The portal heritage (news, email, services at www.pchome.com.tw) still frames the commerce engine, giving PChome the feel of a full digital ecosystem rather than a single-purpose store.

What PChome embraces: speed (24h delivery as identity), density (maximal shoppable surface), and value-signaling through red prices and stacked rebates. What it avoids: the sparse, one-product-per-screen aesthetic of Western DTC — in the Taiwanese market, abundance and visible savings build trust, not minimalism.

Principles

1. The price is the hero. Every card resolves to a red #ea1717 price. Nothing should out-shout it.
2. Density is service. Showing more inventory faster respects a deal-hunting shopper's time. Whitespace is rationed, not lavished.
3. Speed is the promise. 24h delivery is the brand. Surface it relentlessly.
4. Red means value. Reserve #ea1717 for price, action, and savings — never dilute it onto navigation.
5. Numbers over adjectives. Quantify the benefit: percentage off, rebate amount, delivery hours.
6. Two-weight clarity. In a crowded field, hierarchy comes from 400 vs 700 and color, not from typographic subtlety.
7. The card is the unit. White cards on a gray canvas — a tileable, scannable, infinitely-stackable building block.
8. Traditional Chinese first. Render for the Taiwanese reader; give numerals a Latin face for crisp prices.

Personas

Personas below are fictional archetypes informed by publicly observable PChome user segments (Taiwanese deal-hunting shoppers, 3C enthusiasts, household buyers, loyalty members), not individual people.

Lin Yi-chen (林宜蓁), 34, Taipei. Office worker who shops PChome 24h on her commute. Trusts the 24h到貨 promise — orders household goods knowing they arrive next day. Scans for the red price and the P幣 rebate before anything else. Would abandon a redesign that added whitespace at the cost of seeing fewer deals per screen.

Chen Wei (陳威), 27, Taichung. 3C enthusiast who lives in the electronics category. Reads spec-dense product titles fast, compares strike-through list prices against red sale prices, and stacks credit-card promos. Values the density — he can compare ten laptops at a glance.

Auntie Wu (吳阿姨), 58, Kaohsiung. Household buyer who shops by category rail and big tappable promo tiles. The large 28px headlines and clear red prices make the site legible without reading glasses. Loyal to PChome for the reliable delivery and the P幣 points she accumulates.

Kevin Hsu (許凱文), 41, Hsinchu. Operations manager who orders office supplies in bulk. Uses the search bar as his primary tool, trusts the 24h logistics, and appreciates that prices, stock status (green #0bb677), and delivery windows are all stated as plain facts.

Colors

Primary

• PChome Red (#ea1717): The brand anchor. Live-extracted as the dominant accent on 24h (202 element occurrences) and the literal color of every product price. Drives CTAs, promo badges, and price emphasis.
• Soft Red / Coral CTA (#fe3b52): Portal hero banner CTA red — a lighter, pinker variant used on www.pchome.com.tw promotional surfaces.
• Coral Accent (#fd7777): Lighter red-pink for secondary tags, sub-prices, and softer promo accents.

Surface & Canvas

• Commerce Canvas (#f2f2f2): The 24h shopping background — a light neutral gray that lets white cards float and red prices pop.
• Card Surface (#ffffff): Product cards, banner tiles, and content panels.
• Hairline (#e5e5e5): Standard border and divider between dense rows and cards.

Text Neutrals

• Heading Black (#000000): Strongest headings, tab labels, maximum-contrast titles.
• Body (#2b2b2b): Default reading text and product titles — near-black, the most-used color on the page.
• Body Muted (#666666): Secondary descriptions, spec rows, helper text.
• Label Muted (#969696): Captions, strike-through list prices, low-priority metadata.

Links & Navy

• Link Blue (#0090eb): Navigational links and interactive text on the portal and 24h.
• Link Deep (#008ae0): Hover / visited link variant.
• Navy (#0e4f77): Header and dark-chrome accents, info section backgrounds.
• Navy Deep (#084567): Deepest chrome tone for footers and immersive bars.

Status & Accent

• Success Green (#0bb677): In-stock, order-confirmed, positive status.
• Amber (#fed796): Warm highlight for warning chips, P幣 rebate, and attention flags.

On-Color

• On-Primary White (#ffffff): Text on red CTAs, promo badges, and dark navy bars.

Typography

Font Family

• Primary: Noto Sans TC, fallback 微軟正黑體 / Microsoft JhengHei, then 文泉驛正黑 / WenQuanYi Zen Hei
• Latin / Numerals: Montserrat, Roboto, Helvetica, Arial
• Rationale: Traditional-Chinese-first rendering with a Latin companion specifically for prices and numerals — critical for a commerce site where the price is the loudest element.

Hierarchy

Principles

• Two-weight rhythm: 400 for body and product titles, 700 for headlines / prices / promos. Weight is the primary hierarchy lever, not size.
• Red is a type style: Price text is not just colored — #ea1717 red at weight 600+ is functionally a typographic role of its own.
• Traditional Chinese first: All sizing assumes CJK glyphs; line-heights (1.23–1.5) leave room for dense Hanzi without crowding.
• Numerals get a Latin face: Montserrat / Roboto render prices and countdown digits, giving numbers tabular crispness against the CJK body.
• No light display weights: Unlike boutique brands, PChome never goes below 400. Density demands legibility at weight, not elegance at lightness.

Layout

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
• Dense at the card level (8px internal gutters), generous between major sections

Grid & Container

• Full-bleed marketplace grid — content extends edge to edge, not centered in a narrow column
• Product grids: 4–6 columns on desktop, collapsing to 2 on mobile
• Left rail for category taxonomy; main column for grids; right rail for promos
• Promo strips run horizontally as fixed-height (93px) tiles above the fold

Whitespace Philosophy

• Density as a feature: PChome deliberately maximizes shoppable surface area. Whitespace is rationed — it exists to separate cards, not to create drama.
• Cards as the unit: Every piece of content is a card on the #f2f2f2 canvas. The gray background is the negative space; white cards are the figure.
• Above-the-fold maximalism: Flash deals, credit-card offers, editorial headlines, and category entry points all compete above the fold. This is intentional — it signals a full department store, not a curated boutique.

Border Radius Scale

• Small (4px): buttons, badges, promo flags
• Standard (8px): product cards, banner tiles, promo tiles
• Large (16px): occasional rounded feature containers
• The system stays conservative; energy comes from red and density, not rounding

Responsive Behavior

Breakpoints

Touch Targets

• Promo tiles at 93px height — comfortably tappable
• Category tabs at 52px height
• Buttons with 8px vertical padding minimum
• Product cards are entirely tappable surfaces

Collapsing Strategy

• Left category rail → hamburger drawer on mobile
• Multi-rail desktop layout → single scrolling column
• Product grid: 6 → 4 → 3 → 2 columns
• Search bar stays sticky and dominant at all sizes — it is the primary mobile nav
• Promo strips become horizontally swipeable carousels on mobile

Image Behavior

• Product thumbnails maintain square aspect ratio across breakpoints
• Hero / editorial banners crop to maintain headline legibility (white 28px/700 over imagery)
• Cards keep 8px radius at all sizes

Elevation & Depth

Shadow Philosophy: Elevation at PChome is functional and restrained — soft neutral shadows that lift white cards off the #f2f2f2 canvas just enough to read as discrete, tappable units. The elevated tier picks up a faint navy tint (rgba(1,47,73,0.1)) echoing the header chrome, but depth is never decorative. In a layout this dense, heavy shadows would create visual noise; the system relies on the canvas/card figure-ground contrast and the red accent to do the hierarchy work instead.

Values kept in prose

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

• shadow.ambient: rgba(0,0,0,0.06) 0px 1px 4px
• shadow.card: rgba(0,0,0,0.1) 0px 2px 8px
• shadow.elevated: rgba(1,47,73,0.1) 0px 8px 24px

Motion & Easing

Durations:

Easings:

Signature motions.

1. Card hover lift. Product cards lift on hover with motion-fast and the card shadow deepens from ambient to rgba(0,0,0,0.1) 0px 2px 8px — a subtle invitation to click.
2. Countdown tick. Flash-deal timers tick per second with no animation flourish — motion-instant, purely functional urgency.
3. Promo carousel. Above-the-fold banner and promo strips auto-advance on a slow timer using motion-slow / ease-standard horizontal slide.
4. Reduce motion. Under prefers-reduced-motion: reduce, carousels freeze, hover lifts collapse to instant, and the countdown updates without transition. The marketplace remains fully shoppable.

Components

Buttons

Primary (Buy / Add to Cart)

• Background: #ea1717
• Text: #ffffff
• Padding: 8px 16px
• Radius: 4px
• Font: 16px Noto Sans TC weight 700
• Use: Add to cart, buy now, primary commerce action

Soft / Portal CTA

• Background: #fe3b52
• Text: #ffffff
• Padding: 8px 20px
• Radius: 8px
• Font: 16px weight 700
• Use: Portal hero banner CTAs on www.pchome.com.tw

Promo Tile (live-extracted)

• Background: #ffffff
• Text: #2b2b2b
• Padding: 0px 8px
• Radius: 8px
• Height: 93px
• Font: 16px weight 400
• Use: Credit-card / P幣 offer tiles in the promo strip

Cards & Containers

• Background: #ffffff
• Radius: 8px
• Border: 1px solid #e5e5e5 (when bordered)
• Shadow (card): rgba(0,0,0,0.1) 0px 2px 8px
• Shadow (elevated): rgba(1,47,73,0.1) 0px 8px 24px
• Layout: dense product grid; each card = image + 16px title + #ea1717 price + optional promo flag

Price Tag

• Sale price: #ea1717, 18px Montserrat weight 600 (hero: 24px weight 700)
• List price: #969696, 14px, line-through
• Currency: $ prefix, no space, set in the same Latin face

Badges / Tags / Flags

Promo Badge

• Background: #ea1717
• Text: #ffffff
• Padding: 1px 6px
• Radius: 4px
• Font: 13px weight 700
• Use: 折扣 (discount), 限時 (limited), P幣 rebate flags

P幣 / Rebate Chip

• Background: #fed796 (amber)
• Text: #2b2b2b
• Radius: 4px
• Use: P-coin reward callouts

In-Stock Chip

• Background / text: #0bb677 green
• Use: availability, order-confirmed status

Tabs & Category Switcher

• Background: #f2f2f2
• Active text: #000000, inactive: #666666
• Height: 52px
• Font: 16px weight 400
• Radius: 0px (flat bar — relies on color, not shape)

Navigation

• Sticky top header on white / navy chrome
• Search bar dominant and centered — the primary navigation tool of a marketplace
• Links: Noto Sans TC 14px weight 400, #0090eb
• Category mega-menu and left-rail tree for taxonomy depth

Countdown Timer

• Digits: white #ffffff on red, 18px weight 700, Latin face
• Used on flash-deal / 限時 sections — native urgency ornament

---

Verified: 2026-06-08 (omd-add-reference — Tier 1 live inspect, 2 surfaces) Tier 1 sources: https://www.pchome.com.tw (portal home, live DOM getComputedStyle); https://24h.pchome.com.tw (24h shopping surface — price/CTA red #ea1717, #f2f2f2 canvas, 8px cards confirmed live) Method: playwright getComputedStyle on live DOM — body, headings, buttons, price nodes, and full color-frequency sweep across ~5000 elements. .verification.md: web/references/pchome/.verification.md

States

Do's and Don'ts

Do

• Use brand red #ea1717 for every price, primary CTA, and promo badge
• Set body text in near-black #2b2b2b on a #f2f2f2 canvas with white #ffffff cards
• Render prices and numerals in a Latin face (Montserrat / Roboto) for tabular crispness
• Keep the two-weight rhythm: 400 body, 700 headlines/prices/promos
• Reserve blue (#0090eb) strictly for navigational links
• Embrace density — fill the grid, use the full width, stack cards efficiently
• Use 4px radius on buttons/badges and 8px on cards
• Show strike-through list prices in #969696 next to the red sale price

Don't

• Don't use red for navigation links or use blue for buy actions — the roles are fixed
• Don't add light display weights (300/200) — PChome never whispers
• Don't introduce large pill radii on product cards — stay at 4–8px
• Don't over-apply whitespace at the expense of shoppable density
• Don't use pure black #000000 for long body copy — #2b2b2b is the body tone
• Don't render prices in a CJK-only weight without the Latin numeral face
• Don't make shadows heavy or colored beyond the faint navy elevated tint
• Don't let any single element out-shout the price — red price is the visual climax of every card

Do

• Treat the red #ea1717 price as the climax of every card and let savings be visible
• Keep the dense, full-width, card-on-gray-canvas marketplace grid
• Use the two-weight (400/700) rhythm and let red carry hierarchy
• Surface the 24h delivery promise and P幣 rebate prominently
• Render numerals in Montserrat/Roboto and CJK in Noto Sans TC

Don't

• Don't dilute the brand red onto navigation or non-action elements
• Don't trade shoppable density for decorative whitespace
• Don't use light display weights or large pill radii
• Don't bury the price, the discount percentage, or the delivery window
• Don't use blue for buy actions — blue is links only

Voice & Tone

PChome's voice is the brisk, value-forward register of a Taiwanese hypermarket flyer — direct, deal-driven, and benefit-first. Copy leads with the offer: 折扣 (discount), 限時 (limited time), 24h到貨 (24-hour delivery), P幣回饋 (P-coin rebate). The site tagline 每天一起變更好 ("getting better together, every day") sets a warm, communal tone over the transactional core. Button labels are imperative and concrete (加入購物車 / 立即購買 / 結帳), never coy. Numbers do the talking — price, percentage off, delivery hours, rebate amount.

Forbidden register. Vague boutique poetry ("elevate your lifestyle"), unquantified hype with no number attached, and anything that buries the price or the delivery promise. PChome's reader wants the deal stated plainly.

Agent Prompt Guide

Quick Color Reference

• Primary CTA / price: PChome Red (#ea1717)
• Portal hero CTA: Soft Red (#fe3b52)
• Canvas: Light Gray (#f2f2f2)
• Card surface: White (#ffffff)
• Body text: Near-black (#2b2b2b)
• Muted text: Gray (#666666), captions (#969696)
• Link: Blue (#0090eb)
• Success: Green (#0bb677)
• Reward/warn: Amber (#fed796)

Example Component Prompts

• "Create a product card: white #ffffff background, 8px radius, soft shadow rgba(0,0,0,0.1) 0px 2px 8px. Square product image on top. Title at 16px Noto Sans TC weight 400 in #2b2b2b. Price at 18px Montserrat weight 600 in red #ea1717, with a #969696 line-through list price beside it. Small red #ea1717 promo badge, white text, 4px radius."
• "Build a primary CTA button: #ea1717 background, white text, 16px weight 700, 4px radius, 8px 16px padding — labeled 加入購物車 (Add to cart)."
• "Design a dense marketplace grid on a #f2f2f2 canvas: 5-column product card grid, 16px gutters, full bleed. Sticky white header with a dominant centered search bar and #0090eb category links."
• "Create a flash-deal section: red #ea1717 band, white countdown digits at 18px Montserrat weight 700, product cards below with #ea1717 prices and 限時 promo flags."

Iteration Guide

1. Red #ea1717 is the price color, the CTA color, and the promo color — apply it everywhere value or action lives.
2. Body text is #2b2b2b on #f2f2f2; cards are #ffffff. Maintain this figure-ground contrast.
3. Use Montserrat/Roboto for all numerals and prices; Noto Sans TC for CJK text.
4. Weights are 400 or 700 — nothing lighter.
5. Radius: 4px for buttons/badges, 8px for cards.
6. Blue #0090eb = links only; never a buy button.
7. Favor density — fill the grid, use full width.
8. Show the savings: red sale price + #969696 strike-through list price.

---

Governance

Known Gaps

• Contrast, button-soft. Text #ffffff on #fe3b52 measures 3.52:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.