Switch between the rendered Visual preview and the Raw DESIGN.md.
Shopee's design system embodies a vibrant, commerce-focused aesthetic that prioritizes clarity, urgency, and user engagement. The visual identity centers on a bold, energetic orange-red as the primary action color, creating a sense of immediacy and trust within the e-commerce environment. The palette combines this warmth with cool blues for secondary actions, creating visual hierarchy and guiding users through shopping workflows. Clean, minimalist spacing with sharp corners (primarily 2px and 4px radii) conveys efficiency and speed, while generous whitespace keeps the interface uncluttered and scannable. The typography employs the SHPBurmese font family with consistent weight at 400, maintaining legibility across all screen sizes. Subtle shadows at the navigation level add dimensionality without visual noise, supporting the platform's role as a trusted marketplace connecting sellers and buyers across Southeast Asia.
Key Characteristics
#EE4D2D) for primary CTAs and error states#0000EE, #066BC8) for secondary interactions and links#EE4D2D): Primary call-to-action buttons, key interactive elements, and brand-critical UI#FF7337): Secondary brand accent, used sparingly for highlights#0000EE): Links and secondary navigation actions#066BC8): Tertiary actions and informational elements#0046AB): Darker link states and emphasis#26AA99): Tertiary positive accent, used for success contexts#F69113): Highlight and premium tier indicator#FFF8E4): Interactive element backgrounds or soft highlights#E6F0F9): Interactive hover or focus states#000000): Primary text and strong contrast#222222): Secondary text, darker variant#555555): Tertiary text, supporting content#F5F5F5): Subtle background dividers and disabled states#F8F8F8): Subtle background layers#FFFFFF): Primary background and card surfaces#FBFBFB): Minimal surface differentiation#EE4D2D): Primary error and alert state (used 20+ times)#D0011B): Emphasized error states and critical warnings#FF424F): Attention-grabbing error notificationsPrimary: SHPBurmese, Helvetica, Arial, sans-serif
Fallback: System fonts for consistency across all platforms
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | SHPBurmese | 28px | 400 | 33.6px | 0px | Large promotional headings and page titles |
| Heading 1 | SHPBurmese | 24px | 400 | 28.8px | 0px | Section titles and primary headings |
| Heading 2 | SHPBurmese | 20px | 400 | 24px | 0px | Subsection titles |
| Heading 3 | SHPBurmese | 16px | 400 | 19.2px | 0px | Card titles and smaller headings |
| Body Large | SHPBurmese | 14px | 400 | 16.8px | 0px | Primary body text and descriptions |
| Body Regular | SHPBurmese | 12px | 400 | 14px | 0px | Supporting text and secondary content |
| Button | SHPBurmese | 14px | 400 | 16.8px | 0px | Call-to-action and interactive labels |
| Caption | SHPBurmese | 12px | 400 | 14px | 0px | Metadata, timestamps, and small supporting text |
| Link | SHPBurmese | 14px | 400 | 16.8px | 0px | Hyperlinks and navigation items |
#EE4D2D#FFFFFF14px4008px 16px2px0px nonenone40px16.8px#D0011B (darken for emphasis)#C0000F (further darkened)#F5F5F5, Text Color #555555, cursor not-allowed#FFFFFF#EE4D2D14px4008px 16px2px1px solid #EE4D2Dnone40px16.8px#FFF8E4, Border #EE4D2D#F5F5F5, Border #D0011B#F5F5F5, Text Color #BBBBBB, Border #DDDDDD#FFFFFF#00000012px4004px 4px4px1px solid rgba(0, 0, 0, 0.26)rgba(0, 0, 0, 0.12) 0px 0px 9px 0px32px14px#F5F5F5, Border rgba(0, 0, 0, 0.35)#EEEEEE#FFFFFF1px solid #F5F5F54px16pxnone12px, #000000#FFFFFFnone4px16pxrgba(0, 0, 0, 0.06) 0px 6px 6px 0px#F8F8F8none4px16px#FFFFFF1px solid #E6E6E62px8px 12px14px400#00000016.8px40px#FFFFFF1px solid #0000EE0px 0px 0px 2px rgba(0, 0, 238, 0.1)#F5F5F51px solid #E6E6E6#BBBBBBnot-allowed#FFFFFF1px solid #EE4D2D0px 0px 0px 2px rgba(238, 77, 45, 0.1)#BBBBBB14px#FFFFFF84px0pxnonergba(0, 0, 0, 0.06) 0px 6px 6px 0pxflexcenter14px400rgba(0, 0, 0, 0.8)12px 16pxnonepointer16.8px#000000rgba(0, 0, 0, 0.04)#EE4D2D3px solid #EE4D2D#0000EE14px400nonepointer16.8px#0046ABunderline#066BC8#EE4D2D14px400none16.8px#D0011BunderlineBase Unit: 4px
Scale:
4px: Minimal spacing for tight component grouping8px: Compact padding within components (buttons, inputs)12px: Standard padding for small containers16px: Primary padding for cards and containers20px: Section spacing within a page24px: Spacing between major sections32px: Large spacing for distinct layout blocks36px: Premium spacing for feature sections48px: Page-level spacing64px: Large section separations120px: Major layout breaks200px: Full-page margin spacingUsage Contexts:
Max Container Width: 1440px (desktop viewport)
Column Strategy: 12-column flexible grid with 16px gutter spacing
Breakpoint Sections:
Section Patterns:
Shopee employs strategic whitespace to reduce cognitive load and highlight key actions. Large breathing room around primary CTAs (#EE4D2D buttons) ensures they stand out. Cards and containers maintain consistent 16px internal padding to create visual separation from content. Navigation bars use 8px–16px padding to keep interactive targets spacious. Between major sections, 36px–48px spacing creates clear content separation without overwhelming the layout. Minimal gutters (16px) in card grids maintain visual cohesion while preventing cramped layouts.
0px: Navigation bars, full-width sections2px: Buttons (primary, secondary), input fields, minimal modern feel4px: Cards, containers, modals, slightly softer corners for hierarchy| Level | Treatment | Use |
|---|---|---|
| None (L0) | No shadow, no border | Flat backgrounds, text-only areas, minimalist surfaces |
| Small (L1) | rgba(0, 0, 0, 0.12) 0px 0px 9px 0px | Ghost buttons, tertiary interactive elements, subtle depth |
| Medium (L2) | rgba(0, 0, 0, 0.06) 0px 6px 6px 0px | Navigation bars, cards, floating containers, standard elevation |
| Large (L3) | rgba(0, 0, 0, 0.12) 0px 12px 24px 0px | Modals, dropdown menus, overlays (inferred for depth hierarchy) |
Shadow Philosophy:
Shopee uses minimal, soft shadows to maintain a clean, modern aesthetic without creating visual clutter. Shadows are always dark with low opacity (rgba(0, 0, 0, 0.06) to rgba(0, 0, 0, 0.12)), allowing them to blend seamlessly with backgrounds while still providing depth cues. Medium-level shadows (L2) are reserved for primary containers like navigation bars and cards, while smaller shadows (L1) support tertiary elements and buttons. This restrained approach ensures the interface remains lightweight and focused on content and action.
#EE4D2D for primary actions: All main CTAs should employ the bold orange-red to create visual urgency and trustrgba(0, 0, 0, 0.06) 0px 6px 6px 0px shadow provides just enough depth#0000EE for secondary links: The bright blue clearly differentiates links from body text#000000 at full opacity for primary text: Ensures maximum contrast and readability#EE4D2D) is reserved for urgent, high-priority CTAs#EE4D2D) for non-critical elements: Reserve this color exclusively for CTAs and errors| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–479px | Single column, 16px padding, 32px button width, full-width inputs, bottom navigation |
| Tablet | 480px–1023px | 2 columns at 240px + gutter, 48px button width, 50% modal width, side-by-side cards |
| Desktop | 1024px–1439px | 3–4 columns, 120px padding, 200px modal width, full grid layouts |
| Large Desktop | 1440px+ | Max container 1440px, centered, 12 columns, 120px margin |
44px (WCAG AA standard; Shopee defaults to 40px for inputs)44px40px height × 80px width (allows for comfortable thumb interaction)40px × 40px minimum48px height with 16px left/right padding8px vertical spacing between adjacent links to prevent mis-tapsMobile (320px–479px):
320px12px on containersTablet (480px–1023px):
120px width16px gutter480px16px paddingDesktop (1024px+):
600px width, centered20px–36px as space allows#EE4D2D)#0000EE)#FFFFFF)#000000)#222222)#555555)#EE4D2D)#F5F5F5)#F8F8F8) with #555555 text#0000EE)#EE4D2D)#FFFFFF) with medium shadow (rgba(0, 0, 0, 0.06) 0px 6px 6px 0px)#EE4D2D for primary buttons and CTAs; it is the brand's action signal and appears 20+ times across the designrgba(0, 0, 0, 0.06) 0px 6px 6px 0px on navigation and cards only; avoid shadows on buttons except ghost variants#000000 for primary text, #222222 for secondary, #555555 for tertiary, #F5F5F5 for subtle dividers#EE4D2D) and secondary blue (#0000EE) for semantic roles; do not use them interchangeably for decorative purposes