Switch between the rendered Visual preview and the Raw DESIGN.md.
SHEIN's design system embodies a fast-fashion digital marketplace aesthetic that prioritizes accessibility, clarity, and rapid product discovery. The visual language combines a minimalist foundation with vibrant accent colors that draw attention to promotional content and key actions. The interface balances high contrast for readability with generous whitespace to prevent cognitive overload. A warm, energetic color palette—anchored by burnt orange and complemented by electric blue—creates urgency and excitement around trending items and limited-time offers. The typography is clean and modern, prioritizing legibility across diverse international audiences. This system supports a vast product catalog while maintaining visual coherence through consistent spacing, clear hierarchy, and strategic use of color to guide user attention through complex navigation flows.
Key Characteristics
#FA6338 orange) for CTAs and trending sections#222222 charcoal) for primary text and structure#FA6338): Hero CTAs, primary action buttons, promotional badges, trending indicators. Most prominent accent throughout the platform (60+ usages).#FFE2CF): Soft backgrounds for promotional sections, light hover states, badge backgrounds (26 usages).#0066FF): Secondary CTAs, navigation highlights, pricing for premium features (24 usages).#198055): Success confirmations, positive state indicators, sustainable/eco badges (11 usages).#FEE8E2): Gentle background tint, light card backgrounds, soft promotional areas (8 usages).#222222): Primary interactive states, text links, button text, form labels (699 usages—dominant text color).#666666): Secondary text, placeholder copy, disabled states (97 usages).#959595): Tertiary text, helper text, low-priority information (24 usages).#767676): Border dividers, subtle separators (27 usages).#FFFFFF): Primary surface background, input fields, cards (175 usages).#F5F5F5): Secondary background, button backgrounds (ghost/secondary), section dividers (167 usages).#E5E5E5): Subtle borders, minimal dividers (21 usages).#000000): High-contrast text, dark mode backgrounds, icon fills (115 usages).#E5E5E5): Input borders, card edges, section dividers (21 usages).#CCCCCC): Form field borders, secondary dividers.#F6451E): Error messages, validation failures, warning states (18 usages).#C44A01): Deep error backgrounds, error badges (8 usages).#169E00): Success confirmations, completed actions, positive feedback (5 usages).#806208): Seasonal campaigns, earth-tone promotions (7 usages).#F86262): Discount callouts, urgent sale badges, limited-time emphasis (6 usages).#2D68A8): Secondary navigation, trust badges (5 usages).Primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif
Cross-platform system font stack ensuring native rendering on iOS, macOS, Android, and Windows. Default for all UI text.
Secondary: Muli, sans-serif
Geometric sans-serif used for structured lists, code, and numerical content.
Fallback: Arial, sans-serif
Universal fallback for form inputs and legacy browser support.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display (H1) | -apple-system | 28px | 700 | 32.2px | 0px | Page title, hero headline (inferred from h4 pattern) |
| Heading Large (H2) | -apple-system | 24px | 700 | 27.6px | 0px | Section headers, modal titles (inferred) |
| Heading Medium (H3) | -apple-system | 18px | 400 | 20.7px | 0px | Subsection headers, card titles |
| Heading Strong (H4) | -apple-system | 18px | 700 | 20.7px | 0px | Bold subsection headers, category names |
| Heading Small (H6) | Muli | 12px | 700 | 16px | 0px | Tag labels, badge text, filter titles |
| Body Standard | -apple-system | 12px | 400 | 13.8px | 0px | Main content text, product descriptions, default body copy |
| Body Large | sans-serif | 16px | 400 | 18.4px | 0px | Large body text (span), emphasized content |
| Link | -apple-system | 14px | 400 | 16.1px | 0px | Navigation links, inline links, footer links |
| Button | -apple-system | 12px | 400 | 13.8px | 0px | Button labels, CTAs |
| Caption | Muli | 12px | 400 | 16px | 0px | Helper text, list items, footnotes |
| Code | Muli | 14px | 700 | 14px | 0px | Code snippets, pricing numbers |
| Label | Helvetica | 14px | 600 | 16.1px | 0px | Form labels, input labels |
700) weights to create visual emphasis while maintaining consistent sizing.12px with 13.8px line height for comfortable scanning on small screens.#000000 (Pure Black)#FFFFFF (Pure White)0px 16px (horizontally flexible)32px4px1px solid #22222212px40013.8px#222222, box-shadow rgba(0, 0, 0, 0.12) 0px 2px 8px 0px#000000, border 1px solid #000000#F5F5F5, text color #959595, border 1px solid #E5E5E5#F5F5F5 (Near White)#222222 (Deep Charcoal)0px 10px30px4px0px none12px40013.8px#E5E5E5, text #222222#CCCCCC#F5F5F5, text #959595rgba(0, 0, 0, 0) (Transparent)#2222220px16px16px0px0px none0pxrgba(0, 0, 0, 0.04), scale 1.10.7rgba(0, 0, 0, 0) (Transparent)#FFFFFF (on dark backgrounds)0px56px56px0px0px none12px0.80.6#FFFFFF (Pure White)0px none0px0pxnonergba(0, 0, 0, 0.08) 0px 4px 12px 0px, transform translateY(-2px)#66666612px#F5F5F5 (Near White)32px 24px (vertical and horizontal)0px0px none16px 0px#FFFFFF0px16px 12px0px nonenone#22222212px400#F5F5F5#FFFFFF#0000001px solid #2222226px0px 81px 0px 12px (right space for icon)100% (flexible)12px40013.8px#9595951px solid #0066FF, box-shadow 0px 0px 0px 2px rgba(0, 102, 255, 0.1)#F5F5F5, border 1px solid #E5E5E5, text color #959595#FFFFFF#0000001px solid #CCCCCC0px0px 12px36px456px (responsive)12px400Arial, sans-serif13.8px#7676761px solid #0066FF, outline none1px solid #F6451E, text color #F6451E1px solid #169E0016px × 16px1px solid #2222222px (checkbox), 50% (radio)#000000#FFFFFF#222222, border 1px solid #000000#F5F5F5, border 1px solid #E5E5E5#000000 (Pure Black)56px0px 16px0px none0px#FFFFFF12px400rgba(0, 0, 0, 0) (Transparent)#FFFFFF8px 16px0px2px solid #FA6338 (Orange indicator)12pxrgba(255, 255, 255, 0.1)rgba(0, 0, 0, 0)#CCCCCC8px 16px0px0px none12px#FFFFFF, border-bottom 2px solid rgba(255, 255, 255, 0.2)#FFFFFF1px solid #E5E5E50pxrgba(0, 0, 0, 0.08) 0px 6px 6px 0px8px 0px#22222212px12px 16px#F5F5F5#FA63380px#FA6338 (Primary Orange)#FFFFFF4px 8px2px12px70013.8px#169E00 (Success Green)#FFFFFF4px 8px2px12px#F6451E (Error Red)#FFFFFF4px 8px2px12px#F86262 (Coral Red)#FFFFFF6px 12px50% (circular for savings percentages)14px700#FFFFFF#2222228px 16px32px0px0px none14px40016.1px#FA6338, text-decoration underline#C44A01#666666rgba(0, 0, 0, 0) (Transparent)#6666660px0px none12px40013.8px#FA6338, text-decoration underlinergba(0, 0, 0, 0)#66666624px24px0px0px#FA6338, transform scale(1.15)Base Unit: 4px
Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 44px, 48px, 60px, 100px
Usage Context:
4px, 8px): Internal padding in badges, button text-to-edge, form spacing12px, 16px): Card padding, list item gaps, form field margins20px, 24px): Section padding, component separation, subsection margins32px, 44px, 48px): Major section breaks, container padding, page-level layout60px, 100px): Hero sections, full-width section dividers, page marginsMax Width: 1200px (card container width from extracted data)
Column Strategy:
Padding:
24px left/right per container16px left/right12px left/rightSection Patterns:
48px top/bottom padding32px top/bottom padding1200px max-width, 16px gaps between items56px heightSHEIN's layout prioritizes breathing room around product imagery and CTAs. Significant whitespace (24px–48px) separates major sections, preventing cognitive fatigue in browsing catalogs. Card-based layouts maintain consistent gutters (16px) for visual rhythm. Navigation areas use 8px padding internally but 16px between items for scanability. Empty space is treated as a design element: it guides eye flow, emphasizes promotions, and makes hierarchical relationships clear. At smaller breakpoints, horizontal padding reduces (12px) but vertical spacing is maintained to ensure touch target comfort.
0px): Cards, inputs, major containers (default e-commerce aesthetic)2px): Badges, small chips, buttons with minimal rounding4px): Primary buttons, secondary buttons, search inputs, form fields50%): Circular discount badges, profile avatars, icon buttons (when needed)6px): Alternate input variant, expanded cards (inferred)| Level | Treatment | Use |
|---|---|---|
| Flat (L0) | No shadow, box-shadow: none | Background surfaces, form inputs, standard cards |
| Raised (L1) | rgba(0, 0, 0, 0.04) 0px 2px 12px 0px | Navigation bar, sticky headers, dropdown menus |
| Lifted (L2) | rgba(0, 0, 0, 0.08) 0px 6px 6px 0px | Dropdown panels, modal backgrounds, hover card states |
| Hover (L3) | rgba(0, 0, 0, 0.12) 0px 2px 8px 0px (on interaction) | Product cards on hover, floating action buttons, active modals |
Depth Philosophy:
SHEIN employs a restrained shadow system focused on navigation and interactive feedback rather than depth layering. Most surfaces remain flat (box-shadow: none) to maintain visual clarity and emphasize content. Subtle shadows (L1) define navigational containers and sticky elements, providing context without visual clutter. Hover states introduce slightly deeper shadows (L2–L3) to signal interactivity and create tactile feedback on product cards and dropdown menus. This conservative approach aligns with modern flat design while preserving affordance cues for interactive elements. All shadows use rgba(0, 0, 0, 0.xx) for consistency and scale contrast inversely with object importance: primary content uses minimal shadow; secondary chrome (navigation) uses slightly more.
#222222) for all primary text and headings to ensure contrast and readability across devices.#FA6338) for primary actions, promotional content, and trend indicators—it's the system's most attention-grabbing color.-apple-system, Roboto, Segoe UI) for performance and platform consistency.14px weight 600 for clear hierarchy and accessibility.#0066FF) sparingly for secondary CTAs or focus states to avoid color conflict with orange.32px–48px padding to prevent visual cramping in long product catalogs.rgba(0, 0, 0, 0.08) 0px 6px 6px 0px) to product cards for tactile feedback.#F6451E) exclusively for validation failures, warnings, and urgent alerts.8px in compact layouts; maintain minimum 4px for breathing room.18px for heading font sizes on mobile; maintain readable line lengths and hierarchy.4px to primary buttons or form inputs (modern flat aesthetic).#959595) for placeholder text; use #767676 for better contrast.| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 320px–599px | 4-column grid, 12px padding, 44px touch targets, single-column navigation, 24px section padding |
| Tablet | 600px–899px | 8-column grid, 16px padding, 40px touch targets, 28px font for headings, 32px section padding |
| Desktop | 900px–1200px | 12-column grid, 24px padding, 32px touch targets, 18px+ heading sizes, 48px section padding |
| Wide | 1200px+ | Max-width container 1200px, centered layout, generous 60px margins, full typography scale |
44px for all interactive elements (buttons, links, form inputs) on touch devices.44px × 44px for icon buttons.8px to prevent accidental overlap on small screens.40px on mobile (up from 36px desktop) for comfortable thumb interaction.16px horizontal padding per item to provide adequate tap zones.12px across all breakpoints; heading scale reduces from 24px (desktop) to 18px (mobile).24px → 12px); margins reduce proportionally (32px → 20px).56px height; font size stays 12px; on mobile, excess menu items move to hamburger icon (3-line menu).max-width: 100%.calc(100vw - 24px) on mobile; positioning adjusts for safe areas on notched devices.#FA6338)#0066FF)#FFFFFF)#F5F5F5)#222222)#666666)#959595)#169E00)#F6451E)#F86262)#FFE2CF)#E5E5E5)All buttons default to 32px height with 4px border-radius unless explicitly marked ghost (transparent) or circular.
Primary actions use black background (#000000) with white text (#FFFFFF); secondary actions use light gray background (#F5F5F5).
Orange (#FA6338) is reserved exclusively for promotions, badges, primary call-to-action buttons, and active navigation indicators. Never use for neutral text or non-promotional elements.
Form inputs use 6px border-radius and 1px solid #222222 border by default; search inputs additionally allow right padding for icon (0px 81px 0px 12px).
Typography hierarchy enforced by weight (400 standard, 600–700 for emphasis), not size; maintain 12px body and 18px headings across contexts.
Spacing increments: Always use multiples of 4px (4px, 8px, 12px, 16px, 20px, 24px, 32px, 44px, 48px, 60px, 100px); never introduce intermediate values.
Card/container box-shadows follow three levels: None (flat surfaces), rgba(0, 0, 0, 0.04) 0px 2px 12px 0px (navigation), rgba(0, 0, 0, 0.08) 0px 6px 6px 0px (hover/elevated). Apply only on interaction or elevation, never on static content.
Mobile breakpoint activates at 600px: Switch from 24px padding to 12px, reduce heading sizes by 6px, increase touch targets to 44px, collapse grid from 12-column to 4-column.
All interactive elements require hover state: Text color shifts to orange (#FA6338), or background lightens to #F5F5F5 for buttons. Never remove visual feedback on interaction.
Error states always use #F6451E with white text; success states use #169E00; never rely on color alone—pair with icons or labels for accessibility.