Shopee

Overview

Shopee is Southeast Asia's leading social commerce platform, designed to make shopping feel like a vibrant marketplace experience. The design system embodies 'Warm Minimalism'—a philosophy that balances energetic, approachable commerce with clean, functional clarity. The brand personality is optimistic, trustworthy, and community-driven: every interaction celebrates the joy of discovery and the confidence of a secure transaction. The UI evokes a sense of abundance without clutter, using the signature Shopee red (#ee4d2d) as a beacon of action and trust. Voice: conversational, encouraging, never corporate. Example: 'Find your next favorite thing—and save big while you're at it.'

Colors

The color palette is rooted in warm, high-contrast tones that drive commerce and build trust. Primary (#ee4d2d, a vibrant coral-red) is the dominant accent used on all call-to-action buttons, active states, and key interactive elements—it signals urgency and opportunity. The primary-container (#fef6f5, a soft peachy off-white) provides a gentle background for promotional content and highlights. Secondary (#0046ab, a deep navy) anchors secondary actions and informational elements, while tertiary (#eda500, a warm golden-yellow) highlights special offers, cautions, and promotional badges. The surface stack ranges from bright white (#ffffff) for primary content areas to a light neutral gray (#f5f5f5) for page backgrounds, with intermediate grays (#e8e8e8, #bdbdbd) used for dividers and disable

Typography

The type system pairs Roboto (for headlines and labels) with SHPBurmese/SHPKhmer (for body copy and multilingual support), creating a modern yet inclusive voice. Display (56px, 700 weight, -0.02em tracking) anchors hero sections; headline-lg (32px, 700 weight) leads major sections; headline-md (24px, 700 weight) structures subsections. Body-lg (16px, 400 weight, 24px line-height) and body-md (14px, 400 weight, 20px line-height) handle product descriptions and content. Labels use Roboto at 14px (medium weight, 0.01em tracking) for buttons and interactive labels, and 12px (500 weight, 0.02em tracking) for badges and micro-copy. Apply text-shadow: 0 1px 2px rgba(0,0,0,0.1) on small labels (label-sm) when placed over busy product imagery to ensure readability.

Layout

The layout follows a 12-column grid system with a fixed max-width of 1200px, centered on the viewport. Page backgrounds use the light neutral surface (#f5f5f5), while content cards sit on bright white (#ffffff) to create visual separation. Spacing follows a semantic scale: xs (4px) for micro-spacing within components, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero/footer spacing. The gutter between grid columns is 24px (md spacing). Container padding is consistently 24px on desktop, creating a breathing room that prevents content from feeling cramped. Product grids use 12px gaps between items, allowing for flexible 2–4 column layouts depending on viewport.

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic effects. Level 1 (Base): no shadow; flat surfaces on the page background. Level 2 (Cards & Containers): box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05), a barely-perceptible lift that defines card boundaries. Level 3 (Hover & Elevated): box-shadow: 0 3px 8px rgba(0,0,0,0.15), applied on card hover to signal interactivity and depth. Level 4 (Modals & Overlays): box-shadow: 0 8px 24px rgba(0,0,0,0.12), used for modals, dropdowns, and floating elements that demand focus. All shadows use a neutral black with low opacity to maintai

Shapes

The design system employs 'Soft-Technical' geometry: sharp enough to feel modern and efficient, yet rounded enough to feel approachable and human. Border-radius follows a minimal scale: sm (2px) for buttons and small interactive elements, DEFAULT (4px) for cards and input fields, md (6px) for slightly larger containers, lg (8px) for modals and prominent surfaces, xl (12px) for hero sections and feature cards, and full (9999px) for badges and pill-shaped elements. The 2px radius on buttons (primary, secondary, ghost) creates a crisp, commerce-ready appearance without feeling sterile. Cards use

Components

Action Elements Buttons are the primary drivers of commerce. The button-primary component uses #ee4d2d background with white text, 8px vertical and 16px horizontal padding, 2px border-radius, and a minimum width of 120px to ensure clickability. On hover, the background darkens to #d0011b (a deeper red) with a 200ms transition, signaling state change without jarring the user. On active/press, further darken to #c20014. The button-secondary component inverts this: white background with #ee4d2d text and a 1px solid border in the primary color, allowing secondary actions to coexist without visual competition. Button-ghost removes the background entirely, showing only text in primary color, useful for tertiary actions like 'Cancel' or 'Learn More'.

Containers & Surfaces Cards are the f

Do's and Don'ts

**Do**

• Do use primary (#ee4d2d) exclusively for the highest-priority CTA on each page—typically 'Buy Now', 'Add to Cart', or 'Log In'.
• Do apply the md elevation shadow (0 3px 8px rgba(0,0,0,0.15)) on card hover to signal interactivity; avoid adding borders or color shifts.
• Do maintain 24px (md spacing) between major sections and 12px (sm spacing) between related items within a section to create visual rhythm.
• Do use Roboto for all headlines and labels to ensure crisp, modern typography; reserve SHPBurmese/SHPKhmer for body copy and multilingual content.

**Don't**

• Don't use secondary (#0046ab) or tertiary (#eda500) as primary CTAs; they are supporting accents only.
• Don't apply multiple shadows to a single element; use a single, appropriately-scaled shadow per layer.
• Don't exceed 8px border-radius on any component except badges (which use full/9999px); excessive rounding dilutes the modern, efficient aesthetic.
• Don't use text-shadow or drop-shadow effects on body copy; reserve shadows for elevation and depth only.