--- version: alpha name: Lazada-design-analysis description: "A Southeast Asian marketplace in Lazada orange (#f57224) on desktop and a pink-red (#fe4960) on mobile web, with a deep navy (#0f136d), Noto Sans and Roboto at small dense sizes, square search buttons, 6px log in buttons and pale lavender-gray pages." status: Draft appVersion: "measured in a browser, 2026-10-15" platformsCovered: [Web] reviewer: "" verifiedAt: "" colors: primary: "#f57224" on-primary: "#ffffff" primary-alt: "#f36f36" mobile-red: "#fe4960" mobile-pink: "#ffb6bf" navy: "#0f136d" blue: "#136cff" ink: "#212121" ink-strong: "#181818" ink-body: "#606060" ink-muted: "#888888" ink-faint: "#9e9e9e" canvas: "#ffffff" page: "#eff0f5" band: "#f4f4f6" border: "#d9d9d9" border-strong: "#bfbfbf" typography: headline: fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 35px product-title: fontFamily: "Roboto, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 22px fontWeight: 400 lineHeight: 25.3px lead: fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 28px nav: fontFamily: "'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 18.4px button: fontFamily: "'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 40px field: fontFamily: "Roboto, 'Helvetica Neue', Helvetica, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 14px small: fontFamily: "Roboto, 'Helvetica Neue', Helvetica, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 13.8px rounded: xs: 2px sm: 3px md: 4px lg: 6px xl: 18px full: 9999px spacing: sm: 10px md: 12px base: 18px lg: 30px components: search-button: backgroundColor: "{colors.primary}" textColor: "{colors.ink}" typography: "{typography.small}" height: 45px login-button: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.lg}" height: 40px padding: 0 18px app-button: backgroundColor: "{colors.primary-alt}" textColor: "{colors.on-primary}" typography: "{typography.field}" rounded: "{rounded.xs}" height: 40px padding: 12px 30px search-field: backgroundColor: "{colors.page}" textColor: "{colors.ink}" typography: "{typography.field}" rounded: "{rounded.xs}" height: 45px padding: 13px 19px product-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.small}" rounded: "{rounded.md}" --- ## Overview Lazada is an online marketplace across Southeast Asia. Its Singapore site is a dense grid of products on a pale lavender-gray page, with Lazada orange for searching and logging in on desktop, a pink-red on the mobile web, deep navy for service links and small Noto Sans and Roboto text. [Observed] What defines the look: 1. **Lazada orange on desktop.** `#f57224` fills the square Search button and the Log in button, with `#f36f36` on the app download button. [Measured] 2. **Pink-red on mobile.** The mobile web uses `#fe4960` and pink `#ffb6bf` for deals and accents instead of orange. [Measured] 3. **Deep navy.** `#0f136d` sets Customer Care headings and service links. [Measured] 4. **Small, dense type.** Labels and prices are 12 to 14, product titles 16 to 22, set in Noto Sans, Roboto and the system font. [Measured] 5. **Small corners.** Product cards use 4 (the most frequent radius on listings), tags 3, the search field 2, and the log in button 6. The search button is square. [Measured] Source for this file: the Singapore home page, a search for headphones, a product page and the log in page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. The product page did not render its buy buttons for the region we browse from. Lazada does not publish its design system. No app captures were used. See Known Gaps. ## Core ### Colors | Role | Value | Where | |------|-------|-------| | Orange | `#f57224`, `#f36f36` | Search, Log in, Download app [Measured] | | Mobile red and pink | `#fe4960`, `#ffb6bf` | Mobile deals and accents [Measured] | | Navy | `#0f136d` | Service headings and links [Measured] | | Blue | `#136cff` | Product page links [Measured] | | Ink | `#212121`, `#181818` | Titles [Measured] | | Body and muted | `#606060`, `#757575`, `#888888`, `#9e9e9e` | Descriptions and labels [Measured] | | Canvas and page | `#ffffff`, `#eff0f5`, `#f4f4f6` | Cards and background [Measured] | | Borders | `#d9d9d9`, `#bfbfbf` | Filters and fields [Measured] | ### Typography Noto Sans and Roboto from the site, with the system font on newer pages. [Measured] | Role | Desktop | Mobile | Face and weight | |------|---------|--------|-----------------| | Product title | 22 on 25.3 | 16 on 20 | Roboto 400, system on mobile [Measured] | | Section headline | 20 on 35 | not measured | system 700 [Measured] | | Lead | 16 on 28 | not measured | system 400 [Measured] | | Log in button | 16 on 40 | not measured | Noto Sans 500 [Measured] | | Service names | 16 on 18.4 | not measured | Noto Sans 400 [Measured] | | Field | 14 | 12.48 on 17.68 | Roboto or Noto Sans 400 [Measured] | | Small | 12 on 13.8 | 9.36 to 14.56 | Roboto or Noto Sans 400 to 700 [Measured] | ### Shape and spacing Listing cards use 4 and 3, the search field and app button 2, the log in button 6, and mobile cards 6.24 and 7.8, which scale with the window width. [Measured] ### Iconography and motion Not measured. [Inferred] ### Themes Light only. The dark color scheme pass changed nothing. [Measured] ## Platform: iOS How the Lazada iOS app looks and behaves was not captured. Lazada does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done. ### Back and up navigation Expected on iOS: Chevron plus previous title, swipe from the left edge. Not measured. [Inferred] ### Primary navigation Expected on iOS: Bottom tab bar, about five items. A bottom tab bar for home, messages, the cart and the account is expected. [Inferred] ### Main action Expected on iOS: Nav bar or bottom bar button. Add to cart and buy now buttons on a product screen. [Inferred] ### Sheets, dialogs and messages Expected on iOS: Action sheets, alerts, modals. Not measured. [Inferred] ### Controls Expected on iOS: Cupertino switches, pickers, segmented controls. Not measured. [Inferred] ### Text sizing Expected on iOS: Dynamic Type. Not measured. [Inferred] ### Touch and pointer targets Expected on iOS: 44pt minimum. Not measured. [Inferred] ### Insets and system bars Expected on iOS: Safe areas, status bar. Not measured. [Inferred] ### Icons Expected on iOS: SF Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only. ### Platform conformance Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates. The app is expected to share the dense product grid and the warm accent colors with the web. [Inferred] ## Platform: Android How the Lazada Android app looks and behaves was not captured. Lazada does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done. ### Back and up navigation Expected on Android: System back and gesture, up arrow in the top bar. Not measured. [Inferred] ### Primary navigation Expected on Android: Navigation bar, rail on tablets. A bottom navigation bar for home, messages, the cart and the account is expected. [Inferred] ### Main action Expected on Android: Floating action button. Add to cart and buy now buttons on a product screen. [Inferred] ### Sheets, dialogs and messages Expected on Android: Bottom sheets, dialogs, snackbars. Not measured. [Inferred] ### Controls Expected on Android: Material switches, pickers, chips. Not measured. [Inferred] ### Text sizing Expected on Android: Font scale. Not measured. [Inferred] ### Touch and pointer targets Expected on Android: 48dp minimum. Not measured. [Inferred] ### Insets and system bars Expected on Android: Edge to edge, system bars. Not measured. [Inferred] ### Icons Expected on Android: Material Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on Android: Account deletion and data safety requirements. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only. ### Platform conformance Expected on Android: For each important component: what Android expects, what this app does, and why it deviates. The app is expected to share the dense product grid and the warm accent colors with the web. [Inferred] ## Platform: Web The home page, a search listing, a product page and the log in page, measured at 1440 and 390 wide. ### Back and up navigation Expected on Web: Browser back, breadcrumbs. Browser back. [Observed] ### Primary navigation Expected on Web: Top nav or sidebar. A white header with a 45 high search field on `#eff0f5` and a square orange Search button beside it, plus Messages and account links. A thin top bar carries small uppercase links. [Measured] ### Main action Expected on Web: Page-level button. On listings, the product card. On log in, an orange `#f57224` button with white 16px medium text, 40 high with a 6px corner. [Measured] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. The listing opens a dialog over black at 50 percent on first visit. [Measured] ### Controls Expected on Web: Native or custom. Listing filters are 32 high with a 6px corner and a 1px `#d9d9d9` border, and small orange tags are 30 high with a 3px corner. [Measured] ### Text sizing Expected on Web: Browser zoom. Desktop sizes are fixed pixels. Mobile sizes and corners are fractional and scale with the window width. [Measured] ### Touch and pointer targets Expected on Web: Pointer and keyboard. Search, Log in and the app button are 40 to 45 high, filters 32. [Measured] ### Insets and system bars Expected on Web: Viewport, scrollbars. Not measured. [Inferred] ### Icons Expected on Web: Any. Not measured. [Inferred] ### Account and sign-in rules Expected on Web: Not applicable unless the product has accounts. The log in page renders its form, but its options were not checked. [Observed] ### Platform conformance Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates. Desktop and mobile web differ in accent color (orange against pink-red) and type, as if built at different times. [Measured] ## Cross-platform consistency Consistent across platforms: the dense product grid and small corners. [Measured for web, Inferred for the apps] Intentionally different: the desktop web uses orange, the mobile web pink-red. [Measured] ## Do's and Don'ts ### Do - Use orange for searching and logging in on desktop. - Keep listing cards dense with small 3 to 4px corners. - Use navy for service links and help headings. - Put the search field on a pale lavender-gray. ### Don't - Don't round the search button. - Don't use orange for body text. - Don't mix the mobile pink-red into desktop pages. ## Known Gaps - The product page did not render its buy buttons for the region we browse from, and the cart and checkout need an account, so the buying flow was not measured. - Desktop and mobile web use different accents. Which matches the apps is not known. - The iOS and Android apps were not captured, and Lazada publishes no design system, so every mobile topic is inferred. - Icons, motion and dialogs were not measured. - The square Search button carries dark text on orange, measured as is. - White text on the orange Log in button (2.87 to 1) and app button (2.94 to 1) measures below 4.5 to 1. Those are the shipped pairings and were kept. - Account deletion and store policy rules were not verified.