Shopee Design System Deep Dive

1. Brand Overview

Shopee’s visual language is unmistakable: loud, bright, and unapologetically functional. This isn’t a brand chasing “luxury minimalism” — it’s engineered for high-volume e-commerce, where speed and clarity trump subtlety. The core vibe is transactional energy: buttons ready to be clicked, links obvious and plentiful, type that’s utilitarian rather than ornamental.

The main brand color (#ee4d2d) is a high-saturation orange-red that practically vibrates on screen. It’s used aggressively for CTAs, active states, and branding touchpoints. This isn’t an accent — it’s the anchor. It tells you where to go and what to do. White (#ffffff) is the breathing space, keeping the UI from collapsing under the weight of that primary hue. Secondary blues (#0055aa, #0000ee, #0088ff) handle links, external connections, and trust cues (think payment flows, external account connections).

Typography is all Roboto, a utilitarian sans-serif with a massive fallback stack covering multiple scripts. No decorative flourishes, no brand-custom font. This makes sense — Shopee operates across regions and languages, and performance trumps typographic personality here.

Spacing follows a quasi-8px grid, but not religiously. There are odd values like 5px and 22px sprinkled in, which shows some flexibility or legacy components that weren’t fully normalized. Buttons and inputs stay tight, with small padding and low-radius corners (2px in most cases), reinforcing a dense, transactional feel. Shadows are minimal and subtle, giving just enough separation without drifting into skeuomorphism.

This is for users who know what they want and want it fast. The design system reflects that — high-contrast, fast-loading, minimal animation, and clear component boundaries. Shopee’s designers aren’t chasing visual poetry; they’re building a high-speed, high-conversion machine.

2. Color System

2.1 Primary Colors

Shopee’s primary is #ee4d2d — a saturated orange-red. Psychologically, this sits between urgency (red) and warmth (orange). It’s an action color: buy, checkout, click. Compared to competitors, it’s more aggressive than Amazon’s softer #ff9900 and less corporate than Lazada’s purple. This color dominates interactive elements — primary buttons, some links, and key brand marks.

2.2 Complete Palette

2.3 Color Relationships

Contrast is generally good — white text on #ee4d2d passes WCAG AAA for large text and AA for normal text. Blue links (#0000ee and #0088ff) on white are high-contrast. The caution background #fff8e4 with dark text is readable but borderline for small text sizes — careful with accessibility here.

No dark mode in this data. Palette is tuned for light surfaces.

2.4 Usage Guide

• Do: Pair #ee4d2d with white for CTAs.
• Do: Use blues for links — #0000ee for legacy text links, #0088ff for modern accents.
• Avoid: Putting #ff424f next to #ee4d2d — too close in saturation, they clash.
• Avoid: Using #f5f5f5 with low-contrast text — bump text to #222222 or darker.

3. Typography

3.1 Font Families

All UI contexts use Roboto, with a massive fallback stack:

Roboto, SHPBurmese, SHPKhmer, Helvetica Neue, Helvetica, Arial, 文泉驛正黑, WenQuanYi Zen Hei, Hiragino Sans GB, 儷黑 Pro, LiHei Pro, Heiti TC, 微軟正黑體, Microsoft JhengHei UI, Microsoft JhengHei

No Google Fonts import detected, likely local or CDN optimization.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is subtle — sizes range from 12px to 16px for UI elements. No giant display type here. The medium weight (500) is reserved for links to give subtle emphasis. Uppercase is used sparingly, mostly on buttons and captions, to indicate fixed UI labels. The tight line heights (1.17–1.20) keep vertical rhythm dense, matching the transactional design tone.

4. Spacing & Layout

4.1 Spacing Scale

Shopee uses a base 8px scale but isn’t strict — odd values like 5px and 22px appear.

4.2 Layout

No explicit container widths or breakpoints in data — likely fluid grid. The spacing tokens suggest tight component padding and modest section gaps.

5. Visual Elements

Border Radius

Most interactive elements use 2px — tight, sharp corners. Cards/images get 8px. Rare 12px exists, maybe for larger cards.

Shadows

Subtle, small-radius shadows dominate.

• rgba(0, 0, 0, 0.2) 0px 1px 1px 0px — high usage (11 counts).
• Occasional inset shadows for depth — rgba(0, 0, 0, 0.02) 0px 2px 0px 0px inset.
• No big, soft shadows — stays conservative.

Borders

Mostly 1px solid with low-opacity blacks (rgba(0, 0, 0, 0.26), .14) or light gray (#dddddd). Dividers use partial borders (e.g., 0px 1px 0px 0px).

6. Components

6.1 Buttons

Primary CTA Button (b5aVaf):

• Default:
  • Background: #ee4d2d
  • Text: #ffffff
  • Padding: 0px 10px
  • Radius: 2px
  • Border: none
  • Shadow: rgba(0, 0, 0, 0.09) 0px 1px 1px 0px
  • Opacity: 0.7 (interesting choice — slightly muted by default)

No hover/active/focus styles extracted — likely JS-driven.

Secondary Button (stardust-button):

• Default:
  • Background: #ffffff
  • Text: rgba(0, 0, 0, 0.87)
  • Padding: 4px
  • Radius: 4px
  • Border: 1px solid rgba(0, 0, 0, 0.26)
  • Shadow: rgba(0, 0, 0, 0.12) 0px 0px 9px 0px

6.2 Links

Multiple link colors:

• #0000ee — classic blue link
• #ee4d2d — brand link
• #0055aa — darker blue variant
• rgba(0,0,0,.65) — subdued link
• #0088ff — modern bright blue

All have text-decoration: none — no underline by default.

6.3 Forms

Text input:

• Background: white
• Text: rgba(0,0,0,0.8)
• Border: none
• Radius: 0px
• Padding: 12px

Focus state not extracted — likely subtle border or shadow.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-link-blue: #0000ee;
  --color-primary-orange-red: #ee4d2d;
  --color-dark-gray: #222222;
  --color-alert-red: #ff424f;
  --color-deep-blue: #0055aa;
  --color-light-gray: #f5f5f5;
  --color-transparent-black: rgba(0,0,0,0.02);
  --color-text-secondary: rgba(0,0,0,.65);
  --color-text-tertiary-o: #757575;
  --color-text-secondary-o: #595959;
  --color-link-accent: #0088ff;
  --color-caution-bg: #fff8e4;
  --color-brand-primary-light: rgba(255,87,34,.1);

  /* Typography */
  --font-family-base: Roboto, SHPBurmese, SHPKhmer, Helvetica Neue, Helvetica, Arial, 文泉驛正黑, WenQuanYi Zen Hei, Hiragino Sans GB, 儷黑 Pro, LiHei Pro, Heiti TC, 微軟正黑體, Microsoft JhengHei UI, Microsoft JhengHei;
  --font-size-button-lg: 16px;
  --font-size-button-md: 14px;
  --font-size-button-sm: 12px;
  --font-size-caption-md: 14px;
  --font-size-caption-sm: 12px;
  --line-height-tight: 1.17;
  --line-height-default: 1.20;

  /* Spacing */
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;

  /* Radius */
  --radius-none: 0px;
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.2) 0px 1px 1px 0px;
  --shadow-md: rgba(0, 0, 0, 0.12) 0px 0px 9px 0px;
  --shadow-inset-light: rgba(0, 0, 0, 0.02) 0px 2px 0px 0px inset;
}

8. AI Coding Assistant Prompt

# Shopee Design System Specification

You are a Shopee design expert. Build UIs matching their visual language exactly.

## Brand Context
Shopee’s design is fast, high-contrast, and transactional. It uses a bold primary orange-red for CTAs, dense layouts, and utilitarian Roboto type. Corners are tight, shadows subtle, and spacing compact to maximize visible content.

## Color Palette
- White: #ffffff — page backgrounds, button text
- Link Blue: #0000ee — legacy links
- Primary Orange-Red: #ee4d2d — CTAs, primary buttons
- Dark Gray: #222222 — body text
- Alert Red: #ff424f — error messages
- Deep Blue: #0055aa — external links
- Light Gray: #f5f5f5 — neutral surfaces
- Transparent Black: rgba(0,0,0,0.02) — hover overlays
- Secondary Text: rgba(0,0,0,.65) — captions, placeholders
- Tertiary Text: #757575 — low-priority text
- Secondary Text Opaque: #595959 — disabled text
- Link Accent: #0088ff — prominent links
- Caution Background: #fff8e4 — warnings
- Brand Primary Light: rgba(255,87,34,.1) — hover states

## Typography
Font stack: Roboto, SHPBurmese, SHPKhmer, Helvetica Neue, Helvetica, Arial, 文泉驛正黑, WenQuanYi Zen Hei, Hiragino Sans GB, 儷黑 Pro, LiHei Pro, Heiti TC, 微軟正黑體, Microsoft JhengHei UI, Microsoft JhengHei

| Context | Size | Weight | Line Height |
|---------|------|--------|-------------|
| Button LG | 16px | 400 | 1.20 |
| Button MD | 14px | 400 | 1.20 |
| Button SM | 12px | 400 | 1.17 |
| Link MD | 14px | 500 | 1.20 |
| Link SM | 12px | 400 | 1.20 |
| Caption MD | 14px | 400 | 1.20 |
| Caption SM | 12px | 400 | 1.17 |

## Spacing & Grid
Base: 8px grid (flexible)
Scale: 4px, 5px, 6px, 8px, 10px, 12px, 14px, 16px, 20px, 22px, 24px, 30px, 40px
Use: Button padding (4px–10px), card spacing (12px–20px), section gaps (24px–40px)

## Border Radius
- none: 0px — tables
- xsm: 1px — dividers
- sm: 2px — buttons, small inputs
- md: 4px — secondary buttons
- lg: 8px — cards, images
- xl: 12px — large containers

## Shadows & Depth
- sm: rgba(0,0,0,0.2) 0px 1px 1px
- md: rgba(0,0,0,0.12) 0px 0px 9px
- inset-light: rgba(0,0,0,0.02) 0px 2px inset

## Component Specifications

### Primary Button
Default:
- Background: #ee4d2d
- Text: #ffffff
- Padding: 0px 10px
- Radius: 2px
- Border: none
- Shadow: rgba(0,0,0,0.09) 0px 1px 1px
- Opacity: 0.7

### Secondary Button
Default:
- Background: #ffffff
- Text: rgba(0,0,0,0.87)
- Padding: 4px
- Radius: 4px
- Border: 1px solid rgba(0,0,0,0.26)
- Shadow: rgba(0,0,0,0.12) 0px 0px 9px

### Navigation Links
- Colors: #0000ee, #ee4d2d, #0055aa, rgba(0,0,0,.65), #0088ff
- No underline

### Input Fields
- Background: #ffffff
- Text: rgba(0,0,0,0.8)
- Border: none
- Radius: 0px
- Padding: 12px

## Layout & Responsive Rules
No fixed breakpoints in data — design is fluid. Maintain spacing tokens between elements.

## Interaction Rules
- State changes: 150ms ease
- Focus indicators: solid outline in brand color
- Disabled: reduce opacity to ~50%

## DO List
- Use only listed colors
- Maintain 8px grid where possible
- Keep button radii tight (2px–4px)
- Use Roboto stack for all text
- Keep shadows subtle

## DON'T List
- Introduce new colors
- Add heavy drop shadows
- Mix large and small radii in same component
- Underline links unless hover state requires it

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #ee4d2d;
  color: #ffffff;
  padding: 0px 10px;
  border-radius: 2px;
  border: none;
  box-shadow: rgba(0,0,0,0.09) 0px 1px 1px;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.20;
  transition: background 150ms ease;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

### Secondary Button
```css
.btn-secondary {
  background: #ffffff;
  color: rgba(0,0,0,0.87);
  padding: 4px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.26);
  box-shadow: rgba(0,0,0,0.12) 0px 0px 9px;
}
```

### Input Field
```css
.input {
  background: #ffffff;
  color: rgba(0,0,0,0.8);
  border: none;
  border-radius: 0px;
  padding: 12px;
}
```

9. Summary

TL;DR — Shopee’s system is designed for high-speed commerce: bold primary orange-red, dense Roboto type, compact spacing, and subtle shadows. It’s functional, direct, and tuned for conversion.

Brand Keywords:

• high-contrast-transactions
• utilitarian-type
• compact-grid
• bold-cta
• subtle-depth