Shopping / iOS / Android / Web

Lazada

Lazada is a dense, busy shelf of small cards on a pale page, with orange or pink-red marking the way to search and sign in.

Download
  • #F57224
  • #FE4960
  • #0F136D
  • #212121
  • #EFF0F5
  • #FFFFFF

Color

Every color token in the file, grouped by role.

Brand

  • primary#F57224
  • on primary#FFFFFF
  • primary alt#F36F36

Surfaces

  • canvas#FFFFFF

Text

  • mobile pink#FFB6BF
  • ink#212121
  • ink strong#181818
  • ink body#606060
  • ink muted#888888
  • ink faint#9E9E9E

Lines

  • border#D9D9D9
  • border strong#BFBFBF

More

  • mobile red#FE4960
  • navy#0F136D
  • blue#136CFF
  • page#EFF0F5
  • band#F4F4F6

Typography

Each style is set with the file's own family, size, weight and spacing.

  • -apple-systemNot served by an open font library, so it falls back through the file's own stack.
  • RobotoOpen font, shown as published.
  • Noto SansOpen font, shown as published.
  • headline20px / 700 / 35px

    Pack my box with five dozen liquor jugs

  • product title22px / 400 / 25.3px

    Pack my box with five dozen liquor jugs

  • lead16px / 400 / 28px

    The quick brown fox jumps over the lazy dog

  • nav16px / 400 / 18.4px

    The quick brown fox jumps over the lazy dog

  • button16px / 500 / 40px

    Continue to checkout

  • field14px / 400 / 14px

    The quick brown fox jumps over the lazy dog

  • small12px / 400 / 13.8px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs2px
  • sm3px
  • md4px
  • lg6px
  • xl18px
  • full9999px

Spacing

The spacing scale, drawn to size.

  • sm10px
  • md12px
  • base18px
  • lg30px

Components

Component tokens drawn with the colors, type and corners they name.

  • search button
    search-button
  • login button
    login-button
  • app button
    app-button
  • search field
    search-field
  • product card
    product-card
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 111 lines
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

RoleValueWhere
Orange#f57224, #f36f36Search, Log in, Download app [Measured]
Mobile red and pink#fe4960, #ffb6bfMobile deals and accents [Measured]
Navy#0f136dService headings and links [Measured]
Blue#136cffProduct page links [Measured]
Ink#212121, #181818Titles [Measured]
Body and muted#606060, #757575, #888888, #9e9e9eDescriptions and labels [Measured]
Canvas and page#ffffff, #eff0f5, #f4f4f6Cards and background [Measured]
Borders#d9d9d9, #bfbfbfFilters and fields [Measured]

Typography

Noto Sans and Roboto from the site, with the system font on newer pages. [Measured]

RoleDesktopMobileFace and weight
Product title22 on 25.316 on 20Roboto 400, system on mobile [Measured]
Section headline20 on 35not measuredsystem 700 [Measured]
Lead16 on 28not measuredsystem 400 [Measured]
Log in button16 on 40not measuredNoto Sans 500 [Measured]
Service names16 on 18.4not measuredNoto Sans 400 [Measured]
Field1412.48 on 17.68Roboto or Noto Sans 400 [Measured]
Small12 on 13.89.36 to 14.56Roboto 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.