Back to DesignMD
Nguyễn Văn Huân
Generated Nov 6, 2026
DESIGN.md for shopee.vn
Remixes of shopee.vn
Latest remixes
No public remixes yet. Be the first to make one.
Remix itNguyễn Văn Huân
Generated Nov 6, 2026
Latest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Shopee
description: |
Shopee's design embodies the energy and accessibility of Southeast Asia's
leading e-commerce platform. The visual language is bold, warm, and
direct—emphasizing speed, trust, and transaction. A vibrant coral-orange
(#FB5533) anchors the brand across a clean, light-neutral backdrop (#F5F5F5),
creating instant visual hierarchy and urgency. The palette privileges clarity
and high contrast to support rapid scanning and decision-making in a crowded
marketplace. Typography is pragmatic and economical, avoiding ornament in
favour of legibility at small scales. Depth is minimal—achieved through colour
blocking and selective, subtle shadows rather than layered elevation—keeping
the interface flat and focused on product and transaction flows.
source:
url: "https://shopee.vn/?utm_source=coccoc.com&utm_medium=cpc&utm_campaign=VN_COM_SEM_MT4_B_BR%7Cshopee&utm_term=642686067&ctm_event_id=642686067"
pagesAnalyzed: 1
extractedAt: 2026-11-06
tokensMeasured: true
colors:
primary: "#FFFFFF"
accent: "#FB5533"
link: "#0000EE"
canvas: "#000000"
on-primary: "#000000"
hairline: "#898989"
accent-1: "#EE4D2D"
neutral-1: "#F5F5F5"
typography:
heading:
fontFamily: SHPBurmese
fontSize: 14px
fontWeight: 700
lineHeight: 1.7
letterSpacing: 0px
body-lg:
fontFamily: SHPBurmese
fontSize: 16px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0px
textTransform: uppercase
body-md:
fontFamily: SHPBurmese
fontSize: 14px
fontWeight: 400
lineHeight: 1.29
letterSpacing: 0px
body-md-strong:
fontFamily: SHPBurmese
fontSize: 14px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
body-sm:
fontFamily: SHPBurmese
fontSize: 13px
fontWeight: 400
lineHeight: 1.08
letterSpacing: 0px
body-xs:
fontFamily: SHPBurmese
fontSize: 12px
fontWeight: 400
lineHeight: 1.4
letterSpacing: 0px
body-xs-loose:
fontFamily: SHPBurmese
fontSize: 12px
fontWeight: 400
lineHeight: 2
letterSpacing: 0px
nav:
fontFamily: SHPBurmese
fontSize: 13px
fontWeight: 300
lineHeight: 1.2
letterSpacing: 0px
button:
fontFamily: SHPBurmese
fontSize: 12px
fontWeight: 400
lineHeight: 1.17
letterSpacing: 0px
caption-xs:
fontFamily: SHPBurmese
fontSize: 12px
fontWeight: 300
lineHeight: 1.17
letterSpacing: 0px
caption-xs-strong:
fontFamily: SHPBurmese
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
caption-xs-loose:
fontFamily: SHPBurmese
fontSize: 12px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
caption-xs-2:
fontFamily: SHPBurmese
fontSize: 12px
fontWeight: 700
lineHeight: 1.4
letterSpacing: 0px
caption-xs-3:
fontFamily: SHPBurmese
fontSize: 12px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
caption-xs-uppercase:
fontFamily: SHPBurmese
fontSize: 12px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
textTransform: uppercase
rounded:
none: 0px
xs: 2px
sm: 4px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 32px
xxl: 72px
xxxl: 120px
borderWidths:
thin: 1px
shadows:
sm: "rgba(0, 0, 0, 0.12) 0px 0px 9px 0px"
md: "rgba(0, 0, 0, 0.09) 0px 1px 1px 0px"
elevationStrategy: progressive
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FFF9F7"
surface: "#F5EFED"
surfaceRaised: "#EDE8E6"
text: "#1D1413"
textMuted: "#716A69"
border: "#DBD6D4"
accent: "#D82804"
accentFg: "#FFFFFF"
focusRing: "#FB5533"
elevation: shadow
dark:
bg: "#000000"
surface: "#000000"
surfaceRaised: "#141414"
text: "#111111"
textMuted: "#0B0B0B"
border: "#898989"
accent: "#FB5533"
accentFg: "#000000"
focusRing: "#FB5533"
elevation: "border+surface"
contrastFailures:
- "dark: text on bg = 1.11:1 (needs 4.5:1)"
- "dark: muted on bg = 1.07:1 (needs 4.5:1)"
- "dark: text on surface = 1.11:1 (needs 4.5:1)"
gradients:
- context: section
kind: linear
value: "linear-gradient(-180deg, rgb(245, 61, 45), rgb(255, 102, 51))"
components:
button-primary:
typography: "{typography.button}"
textColor: "rgba(0, 0, 0, 0.87)"
border: "1px solid rgba(0, 0, 0, 0.26)"
height: 32px
padding: "4px 4px 4px 4px"
boxShadow: "rgba(0, 0, 0, 0.12) 0px 0px 9px 0px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.primary}"
button-icon:
textColor: "rgba(0, 0, 0, 0.8)"
height: 25px
fontSize: 20px
boxShadow: "rgba(0, 0, 0, 0.12) 0px 1px 12px 0px"
fontFamily: SHPBurmese
fontWeight: 400
lineHeight: 1.25
rounded: "50%"
backgroundColor: "{colors.primary}"
button-text:
textColor: "{colors.primary}"
height: 30px
fontSize: 14px
fontFamily: SHPBurmese
fontWeight: 400
lineHeight: 1.2
badge-icon:
typography: "{typography.nav}"
textColor: "{colors.link}"
height: 16px
navigation:
textColor: "{colors.primary}"
height: 34px
fontSize: 14px
fontFamily: SHPBurmese
fontWeight: 400
lineHeight: 1.2
footer:
textColor: "rgba(0, 0, 0, 0.54)"
border: "4px solid {colors.accent-1}"
fontSize: 14px
fontFamily: SHPBurmese
fontWeight: 400
lineHeight: 1.2
backgroundColor: "{colors.primary}"
link:
textColor: "rgba(0, 0, 0, 0.8)"
fontSize: 14px
fontFamily: SHPBurmese
fontWeight: 400
lineHeight: 1.2
link-sm:
textColor: "rgba(0, 0, 0, 0.87)"
fontSize: 14px
fontFamily: SHPBurmese
fontWeight: 400
lineHeight: 1.2
backgroundColor: "{colors.primary}"
states:
other-hover:
target: other
state: hover
textColor: "{colors.accent-1}"
link-hover:
target: link
state: hover
textColor: "{colors.accent-1}"
breakpoints:
- width: 375
containerWidth: 1920
gridColumns: 5
navLinksVisible: 9
menuToggleVisible: false
headingPx: 14
bodyPx: 14
sectionPaddingX: 0
- width: 768
containerWidth: 1920
gridColumns: 6
navLinksVisible: 9
menuToggleVisible: false
headingPx: 14
bodyPx: 14
sectionPaddingX: 0
- width: 1024
containerWidth: 1920
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 14
sectionPaddingX: 0
- width: 1280
containerWidth: 1920
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 14
sectionPaddingX: 0
- width: 1440
containerWidth: 1920
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 14
sectionPaddingX: 0
coverage:
statesFound: 3
gradientsFound: 1
rolesUnassigned: 2
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Shopee's design embodies the energy and accessibility of Southeast Asia's leading e-commerce platform. The visual language is bold, warm, and direct—emphasizing speed, trust, and transaction. A vibrant coral-orange ({colors.accent} — #FB5533) anchors the brand across a clean, light-neutral backdrop ({colors.neutral-1} — #F5F5F5), creating instant visual hierarchy and urgency. The palette privileges clarity and high contrast to support rapid scanning and decision-making in a crowded marketplace. Typography is pragmatic and economical, avoiding ornament in favour of legibility at small scales. Depth is minimal—achieved through colour blocking and selective, subtle shadows rather than layered elevation—keeping the interface flat and focused on product and transaction flows.
Key Characteristics
#FB5533) paired with neutral, high-contrast surfaces{colors.accent} — #FB5533): Primary call-to-action fills, brand mark, hero gradients, active/hover state indicator. Warm coral-orange that commands attention without aggressive brightness.{colors.link} — #0000EE): Inline hyperlinks; standard web blue for familiar affordance.{colors.primary} — #FFFFFF): Button fills, card backgrounds, primary CTA fills. Pure white for maximum contrast and cleanliness.{colors.canvas} — #000000): Default page background text; labels and copy on brand surfaces. Pure black for maximum legibility.{colors.hairline} — #898989): 1px dividers, subtle borders, secondary text hints. Mid-gray to soften while maintaining distinction.{colors.neutral-1} — #F5F5F5): Secondary background surfaces, section dividers, neutral container fills.{colors.accent-1} — #EE4D2D): Decorative and gradient component; variant of primary brand hue with no explicitly assigned role. Used in linear gradients alongside primary accent.Primary: SHPBurmese with fallbacks to Arial, Roboto, sans-serif for system rendering. A custom sans-serif optimized for Southeast Asian scripts and Latin numerals. Secondary fallbacks to widely available system stacks ensure consistent rendering across platforms.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Heading | SHPBurmese | 14px | 700 | 1.7 | 0px | Bold display role; single canonical size across responsive variants |
| Body Large (uppercase) | SHPBurmese | 16px | 500 | 1.2 | 0px | Prominence without standard heading semantics; text-transform uppercase |
| Body Medium | SHPBurmese | 14px | 400 | 1.29 | 0px | Primary body copy; readable at small sizes |
| Body Medium Strong | SHPBurmese | 14px | 700 | 1.2 | 0px | Emphasis within body text or label; same size, increased weight |
| Body Small | SHPBurmese | 13px | 400 | 1.08 | 0px | Compact information, secondary text, metadata |
| Nav / Small | SHPBurmese | 13px | 300 | 1.2 | 0px | Navigation links; light weight for secondary priority |
| Button | SHPBurmese | 12px | 400 | 1.17 | 0px | Interactive labels; compact, scannable |
| Caption Extra Small | SHPBurmese | 12px | 300 | 1.17 | 0px | Footnotes, metadata, legal text; most minimal role |
| Caption Extra Small Strong | SHPBurmese | 12px | 700 | 1.2 | 0px | Emphasis on captions; bold variant |
| Caption Extra Small Loose | SHPBurmese | 12px | 400 | 1.2 | 0px | Captions with reduced density; uppercase text-transform |
| Caption Extra Small Uppercase | SHPBurmese | 12px | 700 | 1.2 | 0px | All-caps metadata with strong emphasis |
Primary Button
{colors.primary} (#FFFFFF)rgba(0, 0, 0, 0.87) (near black, not pure to reduce jarring contrast){typography.button} (12px, 400, 1.17 line-height)4px 4px 4px 4px{rounded.sm} (4px)1px solid rgba(0, 0, 0, 0.26) (subtle gray stroke for definition)rgba(0, 0, 0, 0.12) 0px 0px 9px 0px (soft, diffuse drop shadow for lift)rgb(238, 77, 45) (warm accent)Icon Button
{colors.primary} (#FFFFFF)rgba(0, 0, 0, 0.8) (high contrast icon)0px 0px 0px 0px{rounded.full} (50% / pill, as measured)rgba(0, 0, 0, 0.12) 0px 1px 12px 0px (stronger shadow than primary)Text Button
rgba(0, 0, 0, 0) (transparent){colors.primary} (#FFFFFF){typography.body-md} (14px, 400, 1.2 line-height)0px{rounded.none} (0px / sharp)Default Navigation Bar
rgba(0, 0, 0, 0) (transparent, implied brand accent context in header){colors.primary} (#FFFFFF){typography.nav} (13px, 300, 1.2 line-height)0px{rounded.none} (0px)rgb(238, 77, 45) (warm accent highlight)Icon Badge
rgba(0, 0, 0, 0) (transparent, icon-only){colors.link} (#0000EE){typography.nav} (13px, 300, 1.2 line-height)0px{rounded.none} (0px / sharp)Default Link
rgba(0, 0, 0, 0) (transparent)rgba(0, 0, 0, 0.8) (high-contrast dark gray){typography.body-md} (14px, 400, 1.29 line-height)0px{rounded.none} (0px)rgb(238, 77, 45) (warm accent)Small Link
{colors.primary} (#FFFFFF)rgba(0, 0, 0, 0.87) (near black on white){typography.body-md} (14px, 400, 1.29 line-height)0px{rounded.none} (0px)Default Footer
{colors.primary} (#FFFFFF)rgba(0, 0, 0, 0.54) (medium gray for secondary information){typography.body-md} (14px, 400, 1.29 line-height)0px{rounded.none} (0px)4px solid rgb(238, 77, 45) (bold top border in warm accent)Base unit: {spacing.xs} (8px). All spacing derives from multiples of 8px for rhythm and alignment.
{spacing.xxs} (4px): Micro-spacing within dense components (button padding){spacing.xs} (8px): Compact spacing between elements; icon-to-label gaps{spacing.sm} (12px): Small sections, input padding{spacing.md} (16px): Standard section spacing, moderate padding{spacing.lg} (20px): Breathing room between major sections{spacing.xl} (32px): Large gaps between content blocks{spacing.xxl} (72px): Hero sections and major layout breaks{spacing.xxxl} (120px): Full-page vertical rhythm, top/bottom marginsShopee prioritizes dense, scannable information over breathing room. Vertical spacing uses the full 8px increment scale to create visual rhythm without excess white space. Horizontal margins are full bleed (0px padding at section edges) to maximize product real estate. Within components, padding is compact ({spacing.xxs} / 4px) to keep interaction targets tight and scannable. This reflects the marketplace priority: information density and transaction speed over minimalist aesthetics.
{rounded.none} (0px): Inputs, badges, overlays, footer, text buttons—sharp corners for utilitarian, tool-like appearance{rounded.xs} (2px): Image corners for subtle softness{rounded.sm} (4px): Primary buttons, interactive affordances—light rounding to soften utility{rounded.full} (9999px / pill): Icon buttons only—circular for icon containment1px (applied to primary button strokes and footer accent border; used for subtle definition and major accent emphasis respectively)| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; color block only | Text buttons, overlays, neutral surfaces |
| Raised | rgba(0, 0, 0, 0.12) 0px 0px 9px 0px | Primary buttons, subtle lift for interactive elements |
| Lifted | rgba(0, 0, 0, 0.09) 0px 1px 1px 0px | Alternative button shadow (thin, crisp shadow) |
| Icon Raised | rgba(0, 0, 0, 0.12) 0px 1px 12px 0px | Icon buttons; stronger diffuse shadow than primary buttons |
Shadow Philosophy
Shopee uses a progressive, color-blocking–primary depth strategy. True elevation is minimal; most depth comes from surface colour changes (white on light gray, or colored surfaces). Where shadows appear, they are soft, diffuse, and low-opacity (rgba(0, 0, 0, 0.09) to 0.12), creating barely-there lift rather than dramatic layering. This keeps the interface flat, modern, and focused on content rather than decorative depth. Icon buttons receive a slightly stronger shadow than standard buttons, establishing them as secondary-level interactive elements.
{colors.accent} — #FB5533) on primary CTAs, hover states, and brand moments to drive attention and urgency.{colors.primary} — #FFFFFF) buttons with subtle 1px borders and soft shadows for definition without heaviness.{rounded.sm} (4px) to button and interactive element corners for approachable, rounded-but-utilitarian appearance.rgba(0, 0, 0, 0.26) gray for subtle borders and dividers; it reduces jarring harshness while maintaining definition.0px 0px 9px 0px) sparingly for button lift; reserve crisp shadows (0px 1px 1px 0px) for alternative states.{colors.link} (#0000EE blue) for anything other than inline hyperlinks; it reads as web-standard link affordance and will confuse users.{rounded.full} (pill shape) to buttons or text inputs; reserve it for icon buttons only. Sharp corners on inputs signal utility and form.rgba(0, 0, 0, 0.12) opacity; the system is flat and minimal. Heavy shadows conflict with the aesthetic.{colors.accent} for highlights only.| Breakpoint | Width | Nav Links Visible | Layout Shift | Heading Size | Body Size | Key Changes |
|---|---|---|---|---|---|---|
| Mobile | 375px | 9 | No menu toggle | 14px ({typography.heading}) | 14px ({typography.body-md}) | 5-column grid; full-bleed content |
| Tablet | 768px | 9 | No menu toggle | 14px | 14px | 6-column grid; same heading/body sizes |
| Desktop Small | 1024px | 0 | Hamburger assumed | 0px (no heading change) | 14px | Menu collapses; layout likely shifts to list or single-focus |
| Desktop Medium | 1280px | 0 | Hamburger assumed | 0px | 14px | Consistent desktop layout |
| Desktop Large | 1440px | 0 | Hamburger assumed | 0px | 14px | Maximum container width (1440px); no further expansion |
Breakpoint Derivation: Navigation link visibility drops to 0 at 1024px, indicating collapse point. Heading and body text remain constant across all breakpoints; no responsive typography scaling is employed. Grid columns shift from 5 (mobile) to 6 (tablet) to single/list (desktop).
Minimum interactive element sizes derived from measured component dimensions:
{colors.accent} — #FB5533) — use on buttons, hero sections, active states, and hover highlights{colors.primary} — #FFFFFF) — primary fill for cards, buttons, and neutral surfaces{colors.canvas} — #000000) — labels and copy on colored surfaces; maximum contrast{colors.hairline} — #898889) — subtle dividers, secondary text, and button strokes{colors.neutral-1} — #F5F5F5) — alternate background for sections and visual separation{colors.link} — #0000EE) — inline hyperlinks only{colors.accent-1} — #EE4D2D): Decorative use in gradients and brand animations; do not apply to interactive elementsStart with the warm accent. {colors.accent} (#FB5533) is your primary call-to-action and brand driver. Use it liberally on primary buttons, hero sections, and hover states to create urgency and recognition.
Button structure is consistent: white fill, gray border, soft shadow. All primary buttons use {colors.primary} (#FFFFFF) background, rgba(0, 0, 0, 0.26) border, and rgba(0, 0, 0, 0.12) 0px 0px 9px 0px shadow. Hover shifts text to the warm accent. Icon buttons are circular with stronger shadow.
Typography is compact and economical. Stick to 12–16px point sizes; use weight (300, 400, 700) for hierarchy. Heading is always 14px / 700 weight. Body is 14px / 400. Do not invent new sizes. Generous line-height (1.17–2.0) ensures small text remains readable.
Depth is minimal. Use color blocking (white on gray, or on the accent background) for most visual hierarchy. Shadows are subtle, soft, and low-opacity. Flat, borderless text buttons have no shadow. Interactive buttons get soft drop shadows; icon buttons get slightly stronger shadows.
Sharp corners (0px radius) on inputs, overlays, and text buttons. Soft corners (4px) on action buttons. Circular (full pill) on icon buttons only. This signals utility vs. action vs. contained icon.
Maintain 0px horizontal padding on section edges. Full-bleed layouts maximize product information density. Do not add gutters to page margins.
Navigation links are light (300 weight), 13px, white on transparent brand background. They hover to the warm accent. Links default to blue (#0000EE) only when used as inline hyperlinks in body text, never as nav elements.
No semantic status ramp. The site does not expose error/success/warning colours. Use the warm accent for all emphasis. If status needs to be communicated, rely on icon + text, not color alone.
Responsive scale: 5 columns at 375px, 6 columns at 768px, collapses to list/single at 1024px+. Typography does not change across breakpoints. Navigation link count drops from 9 to 0 at 1024px (collapse point).
Gradients are used sparingly for decoration. The site employs one hero gradient: linear-gradient(-180deg, rgb(245, 61, 45), rgb(255, 102, 51)) (from light warm accent to deeper orange). Reproduce exactly; do not approximate.
Interaction states not fully captured: The extraction read :hover and :focus-visible CSS from the site, but only a subset of state behaviour is documented (color shifts on hover; no explicit active/pressed/disabled/loading states are recorded). Assume missing states follow the pattern of color shifting to rgb(238, 77, 45) on hover, but this is not guaranteed for all components.
No semantic status colours: The site provides no error, success, warning, or info colour ramp. All status feedback must rely on text labels, icons, or the primary accent only.
Dark mode not observed: Extraction shows no theme toggle or prefers-color-scheme media query. The site operates in light mode only (or dark mode is behind authentication and was not measured). Do not assume a derived dark palette is in use.
Interactive form states not measured: Input components (text fields, dropdowns, checkboxes) are not captured in the component extraction. Only buttons, badges, links, and navigation are documented. Form styling is inferred from border-radius and structure but not validated against live input elements.
Two colours have no assigned role: {colors.accent-1} (#EE4D2D) is decorative and appears in gradients but has no explicit interactive or semantic purpose. Treat as a brand variant for animation and hero sections only.
Z-index / stacking values are sparse: The extraction records z-index values (dropdown: 99, sticky: 100, sticky: 300, sticky: 400, modal: 9999) but does not map them to specific component instances. Assume these are correct for their roles but verify in context.
Gradient data is singular: Only one gradient is captured (linear-gradient(-180deg, rgb(245, 61, 45), rgb(255, 102, 51))). If additional gradients exist elsewhere, they were not measured.
Cross-origin stylesheets may be incomplete: Some CSS may be served cross-origin and unreadable, so vendor prefixes, advanced selectors, or animation keyframes may not be recorded.
Surfaces behind authentication not visited: The extraction analysed only the public-facing homepage and header. Logged-in user dashboards, checkout flows, and account settings were not captured and may have different component patterns.
Responsive breakpoint assumptions: The extraction measured 5 specific viewport widths (375px, 768px, 1024px, 1280px, 1440px). Behaviour at intermediate sizes (e.g., 600px, 900px) is interpolated and not guaranteed to match intent.
Button width and height are measured instances, not semantic tokens: The extracted button dimensions (width: 134px, height: 32px) are from specific measured buttons on the page. Other button contexts may differ; use these as guidance but allow variance based on content width.