Alibaba.com

Overview

Alibaba.com is the world's largest B2B marketplace, connecting manufacturers, suppliers, and global buyers through a trust-centric, high-contrast interface. The design aesthetic is **Enterprise Clarity**: a no-nonsense, accessibility-first approach that prioritizes information hierarchy and transaction confidence over decorative flourish. The brand personality is authoritative yet approachable—speaking the language of commerce with precision and respect for the user's time. Every interaction is designed to reduce friction in complex supply-chain decisions. Voice example: 'Verified manufacturers with Trade Assurance protection—source with confidence.'

Colors

The color system is built on a **trust-and-action** hierarchy. Primary (#d64000, a warm burnt-orange) is reserved exclusively for call-to-action buttons, search bars, and verified badges—signaling buyer confidence and transaction readiness. This high-contrast accent sits against a neutral white surface (#ffffff) and dark text (#222222), ensuring WCAG AAA compliance and legibility across all devices. Secondary (#fa6400, a brighter orange) supports accent roles in status indicators and secondary CTAs. Tertiary (#1a73e8, a professional blue) is used for links, information states, and trusted-partner badges. The surface stack uses a cool-gray palette: surface-container-lowest (#f7f7f7) for input backgrounds, surface-container-high (#e8e8e8) for hover states, and outline (#767676) for borders a

Typography

The type system uses Inter as the primary typeface, chosen for its clarity and international character support—critical for a global B2B platform. Display (60px, 700 weight) is reserved for hero headlines and brand moments. Headline-lg (40px, 600 weight) anchors section headers and category titles. Body-md (16px, 400 weight) is the workhorse for product descriptions, pricing, and transaction details—set at 24px line-height to ensure readability in dense product grids. Label-md (14px, 600 weight) is applied to button text, badges, and form labels with 0.01em letter-spacing for crisp legibility. All typography uses -webkit-font-smoothing: auto to maintain consistent rendering across browsers. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels (label-sm) when layered over produc

Layout

The layout follows a **12-column grid** with a max-width of 1280px, maintaining a 60px horizontal gutter on desktop (40px on tablet, 24px on mobile). The container uses padding: 60px 60px on desktop to create breathing room around the viewport edges. Section spacing follows the semantic scale: lg (40px) separates major content blocks (hero, product grid, footer), md (24px) divides subsections and card groups, and sm (12px) provides internal card padding. The grid is fluid up to 1280px, then fixed, preventing awkward stretching on ultra-wide displays. Product cards occupy 1/4 of the grid width on desktop (3 columns), 1/2 on tablet (6 columns), and full-width on mobile. All spacing is a multiple of 8px (the unit token) to maintain rhythm and predictability.

Elevation & Depth

Depth is conveyed through a **shadow-and-border** system rather than color shifts. Level 1 (Base): no shadow, 1px solid border at {colors.outline-variant} (#cccccc). Level 2 (Cards, Modals): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 1px solid border at {colors.outline-variant}. Level 3 (Floating elements, Dropdowns): box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15), 1px solid border at {colors.outline-variant}. Hover states elevate cards from Level 1 to Level 2 with a smooth 200ms transition. Focus states on interactive elements use a 3px outline at rgba(214, 64, 0, 0.3) (primary with 30% opacity)

Shapes

The shape philosophy is **Geometric Precision**: rounded corners are used strategically to soften hard edges without sacrificing the industrial, trustworthy aesthetic. Buttons and primary CTAs use 16px border-radius (lg) to create a friendly, clickable appearance. Input fields and search bars use 8px (DEFAULT) for a more technical, form-like feel. Cards and modals use 16px (lg) to match button radius and create visual cohesion. Badges and chips use 9999px (full) for a pill-shaped, status-indicator appearance. The 4px (sm) radius is reserved for small UI elements like checkboxes and radio butto

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses backgroundColor: {colors.primary} (#d64000), textColor: white, padding: 12px 24px, height: 48px, and rounded: 16px. On hover, the background shifts to #cc3d00 with a 200ms ease-in-out transition and a subtle shadow (0 3px 8px rgba(214, 64, 0, 0.2)). On active/press, the background darkens to #a83000. Button-secondary uses a transparent background with a 1px border at {colors.primary}, allowing the primary color to frame the text. Button-ghost is used for tertiary actions: transparent background, 1px border at {colors.outline-variant}, and on hover, backgroundColor shifts to {colors.surface-container-high} (#e8e8e8).

Containers & Surfaces Cards are the fundamental container unit. Base card: backgroun

Do's and Don'ts

**Do**

• Do use primary (#d64000) exclusively for CTAs, search bars, and verified badges—never for backgrounds or decorative elements.
• Do maintain 7:1 contrast ratios between text and background; test with WCAG AAA compliance tools before shipping.
• Do apply 8px-based spacing throughout; use the semantic tokens (sm, md, lg) rather than arbitrary pixel values.
• Do use Inter at 16px body-md for product descriptions and transaction details to ensure readability in dense layouts.
• Do elevate cards on hover with a shadow transition (200ms ease-in-out) to signal interactivity without color shifts.
• Do use 16px border-radius on buttons and 8px on inputs to create a clear visual distinction between action and form elements.

**Don't**

• Don't use primary color for backgrounds, neutral frames, or decorative elements—reserve it for high-intent interactions only.
• Don't apply shadows or blur effects that reduce text legibility; clarity is non-negotiable in a B2B marketplace.
• Don't use colors outside the defined palette; custom hex values break the trust-centric visual system.
• Don't set line-height below 1.5 for body text; dense typography reduces scannability in product-heavy pages.
• Don't use rounded corners below 8px or above 20px except for full-circle badges; inconsistent radii fragment the design.
• Don't animate non-interactive elements; reserve transitions for buttons, inputs, and hover states to avoid cognitive overload.