Taobao

Overview

Taobao is a pragmatic, transaction-focused e-commerce platform serving hundreds of millions of buyers and sellers across Asia. The design system embodies "Commercial Clarity"—a utilitarian aesthetic that prioritizes rapid product discovery, price visibility, and trust signals over decorative flourish. Every pixel serves conversion: the interface is dense but scannable, with a warm orange accent (#ff5000) that signals urgency and action. The brand personality is direct, efficient, and consumer-centric; the tone is informative without being verbose, reassuring without being patronizing. Example: "Secure checkout in 3 steps—your order ships today."

Colors

The color palette is anchored by a vibrant, high-saturation orange primary (#ff5000) used exclusively for CTAs, price highlights, and interactive focus states—this is the brand's signature accent and appears on nearly every transaction-critical element. The surface stack is a cool, neutral white (#ffffff) with carefully calibrated grays (#f5f5f5, #ebebeb, #d6d6d6) for containers, dividers, and disabled states. Secondary gold (#b88449) is reserved for premium/VIP status indicators and luxury category highlights. Tertiary gray (#999999) is used for secondary text and disabled UI. Error red (#ff0036) signals warnings and cancellations. The primary-container (#fff1eb) provides a warm, low-contrast background for promotional zones. All interactive elements use the primary orange on hover/active

Typography

The type system uses PingFang SC (Chinese) and AlibabaSans (Alibaba's proprietary typeface) as primary families, with Arial as fallback. Display (60px, 700 weight) is reserved for hero headlines; headline-lg (40px, 600) for section titles; headline-md (28px, 600) for subsections; title-lg (20px, 600) for card headers; body-lg (18px, 400) for long-form content; body-md (16px, 400) for standard UI text; label-md (14px, 500) for buttons and form labels; label-sm (12px, 400) for secondary metadata and footer text. Letter-spacing is kept tight (-0.04em on display, 0em on body) to maximize density and support rapid scanning. On small labels over busy product backgrounds, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) to ensure legibility. Price labels always use title-lg weight (600) and primar

Layout

Taobao uses a 12-column fluid grid with a max-width of 1280px, allowing the layout to adapt from desktop (1280px) down to tablet (1040px) and mobile (320px) breakpoints. The gutter is 24px, providing breathing room without sacrificing density. Section separation uses lg spacing (40px) between major content blocks; card-to-card spacing is md (24px). The container-max-width of 1280px is applied to the main content area, with full-width hero sections and footers extending edge-to-edge. White-space is minimal but intentional: product grids are compact (12px gaps), while promotional zones use md spacing (24px) to create visual rest. The footer uses a fixed 1552px inner width on desktop, scaling down via media queries. All spacing values are multiples of 8px (the unit base), ensuring consistent

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. Level 1 (base surface) has no shadow; Level 2 (cards, modals) uses box-shadow: 0 4px 12px rgba(10, 10, 51, 0.08), creating a soft, diffused lift; Level 3 (floating panels, popovers) uses 0 16px 40px rgba(10, 10, 51, 0.12) for greater separation. Hover states on cards elevate to Level 3 shadow. The modal overlay uses backdrop-filter: blur(3px) with background: rgba(0, 0, 0, 0.4) to create depth without full opacity. Borders (1px solid #ebebeb) are used on cards and inputs to define boundaries without relyin

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are present but restrained, reflecting the platform's balance between approachability and efficiency. Buttons and form inputs use 8px (lg radius) for a modern, friendly feel without appearing playful. Cards use 12px (xl radius) for slightly more softness, signaling content containers. Small UI elements (badges, tags) use 50% (full radius) for pill-shaped affordances. Dividers and subtle separators are sharp (0px radius). The 8px default radius is applied to most interactive surfaces; 4px (md radius) is used for tighter, more technical co

Components

Action Elements Buttons use a 48px height with 24px horizontal padding for comfortable touch targets. Primary buttons (#ff5000 background, white text) are used for all transaction CTAs ("Buy Now", "Add to Cart", "Checkout"). Secondary buttons (transparent background, #ff5000 border, #ff5000 text) are used for alternative actions ("Continue Shopping", "Save for Later"). All buttons transition to hover state in 200ms with a color shift: primary buttons darken to #cc6600, secondary buttons fill with #fff1eb background. Focus states add a 3px ring of rgba(255, 80, 0, 0.1). Disabled buttons use #cccccc background with #999999 text and pointer-events: none.

Containers & Surfaces Cards use #f5f5f5 background with 1px solid #ebebeb border and 12px rounded corners. On hover, the background

Do's and Don'ts

**Do**

• Do use #ff5000 (primary orange) exclusively for CTAs, prices, and active/focus states—never use it for passive UI or backgrounds.
• Do apply 8px border-radius to buttons and form inputs, 12px to cards, and 50% to badges to maintain the soft-technical aesthetic.
• Do keep text color #1f1f1f (on-surface) for body copy and #7a7a7a (on-surface-variant) for secondary text; never use pure black or pure white for text.
• Do use the full 12-column grid with 24px gutters and enforce max-width: 1280px on main content to maintain scannable density.
• Do apply box-shadow: 0 4px 12px rgba(10, 10, 51, 0.08) to cards and 0 16px 40px rgba(10, 10, 51, 0.12) to modals for consistent depth.
• Do use PingFang SC or AlibabaSans for all typography; never fall back to system-ui or generic sans-serif in production.
• Do include a 200ms ease-out transition on all hover/focus state changes to provide smooth, predictable feedback.
• Do use label-md (14px, 500 weight) for button text and label-sm (12px, 400 weight) for secondary metadata and footer links.

**Don't**

• Don't use #ff5000 for backgrounds, borders, or non-interactive elements—reserve it exclusively for actionable UI.
• Don't apply border-radius greater than 12px to any component; the maximum is 12px for cards, never 16px or 20px.
• Don't use shadows greater than 0 16px 40px rgba(10, 10, 51, 0.12); avoid drop-shadows with blur > 40px or spread > 0px.
• Don't mix typefaces within a single component; use PingFang SC or AlibabaSans consistently, never Arial or system fonts in UI.
• Don't set container max-width below 1040px on tablet or above 1280px on desktop; maintain the fixed grid structure.
• Don't use pure white (#ffffff) or pure black (#000000) for text; use #1f1f1f for primary text and #7a7a7a for secondary.
• Don't apply opacity or alpha blending to primary color (#ff5000) for interactive states; use the darker shade #cc6600 instead.
• Don't add decorative gradients, blur effects, or glassmorphism to product cards or transaction UI; keep surfaces flat and clear.