Shopping / iOS / Android / Web

Mercado Libre

Mercado Libre stays cheerful and busy: a yellow header, one clear blue, small corners and small type, with magenta saved for the offers.

Download
  • #FFE600
  • #3483FA
  • #1A1A1A
  • #F5F5F5
  • #E60063
  • #EBEBEB

Color

Every color token in the file, grouped by role.

Brand

  • primary#3483FA
  • on primary#FFFFFF
  • brand yellow#FFE600

Surfaces

  • canvas#FFFFFF
  • canvas subtle#F5F5F5

Text

  • ink#1A1A1A
  • ink muted#737373
  • ink soft#595959

Lines

  • divider#EBEBEB

More

  • offer#E60063
  • blue wash#E6F0FD
  • black#000000

Typography

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

  • Proxima NovaProxima Nova is private and not available in open fonts. Shown in Lato, the closest open match.
  • title26px / 700 / 32px

    Pack my box with five dozen liquor jugs

  • heading16px / 600 / 20px

    The quick brown fox jumps over the lazy dog

  • body14px / 400 / 18px

    The quick brown fox jumps over the lazy dog

  • caption13px / 400 / 16px

    Continue to checkout

  • button13px / 600 / 16px

    Continue to checkout

Shape

Corner radius tokens.

  • xs2px
  • sm3px
  • md4px
  • lg5px
  • card6px
  • panel8px
  • round999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md12px
  • base16px
  • lg24px

Components

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

  • button tonal
    button-tonal
  • header
    header
  • product card
    product-card
  • offer tag
    offer-tag
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 92 lines
version: alpha
name: Mercado-Libre-design-analysis
description: "A dense, friendly marketplace: a bright yellow header (#ffe600), a clear blue (#3483fa) for links and actions, white and pale gray cards with 6px corners and Proxima Nova in small, readable sizes."
status: Draft
appVersion: "measured in a browser (Argentina site), 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#3483fa"
  on-primary: "#ffffff"
  brand-yellow: "#ffe600"
  offer: "#e60063"
  ink: "#1a1a1a"
  ink-muted: "#737373"
  ink-soft: "#595959"
  canvas: "#ffffff"
  canvas-subtle: "#f5f5f5"
  divider: "#ebebeb"
  blue-wash: "#e6f0fd"
  black: "#000000"

typography:
  # Font note: "Proxima Nova" is a private font and is not available in open fonts. Closest open alternative: "Lato".
  title:
    fontFamily: "'Proxima Nova', Lato, -apple-system, Roboto, Arial, sans-serif"
    fontSize: 26px
    fontWeight: 700
    lineHeight: 32px
  heading:
    fontFamily: "'Proxima Nova', Lato, -apple-system, Roboto, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 20px
  body:
    fontFamily: "'Proxima Nova', Lato, -apple-system, Roboto, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18px
  caption:
    fontFamily: "'Proxima Nova', Lato, -apple-system, Roboto, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 16px
  button:
    fontFamily: "'Proxima Nova', Lato, -apple-system, Roboto, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 16px

rounded:
  xs: 2px
  sm: 3px
  md: 4px
  lg: 5px
  card: 6px
  panel: 8px
  round: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px

components:
  button-tonal:
    backgroundColor: "{colors.blue-wash}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    height: 33px
    padding: 0 16px
  header:
    backgroundColor: "{colors.brand-yellow}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    height: 56px
  product-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.card}"
    padding: 16px
  offer-tag:
    backgroundColor: "{colors.offer}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 2px 6px

Overview

Mercado Libre is Latin America's largest marketplace. The page is a bright, dense shop: a yellow header, a clear blue for links and actions, white cards with soft corners and a lot of small, readable type. [Observed]

What defines the look:

  1. A yellow header. #ffe600 across the top of every page. [Measured]
  2. One clear blue. #3483fa for links, tonal buttons and highlighted text, on a 15 percent blue wash. [Measured]
  3. Black at opacity for text. Main text is black at 90 percent, secondary at 55 and 65 percent. [Measured]
  4. Small corners. Cards use 6px, buttons 5, with 4 and 3 on small parts. [Measured]
  5. Dense type. Proxima Nova at 13 to 16 for most of the page, with a 26 title. [Measured]
  6. Magenta for offers. #e60063 marks discounts. [Measured]

Source for this file: the Argentina home page measured in a browser at 1440 and 390 wide, read on 2026-10-06. Mercado Libre's Andes design system was not read. Signed-in screens were not measured. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Yellow#ffe600Header
Blue#3483faLinks and tonal buttons
Blue washabout #e6f0fdTonal button fill (15 percent blue)
Offer magenta#e60063Discount marks
Textblack at 90 percent, about #1a1a1aTitles and body
Secondary textblack at 55 and 65 percent, about #737373 and #595959Meta
Page and cards#ffffff, #f5f5f5Surfaces
Divider#ebebebRules

Typography

Proxima Nova throughout: a 26 title at 700, 16 on 20 headings at 600, 14 on 18 body and navigation at 400, 13 captions and 13 at 600 for buttons. [Measured]

Shape and spacing

Corners are 2 to 8, with 6 on cards and 5 on buttons, and circles for avatars. Tonal buttons are 33 high with 122 to 138 width. [Measured]

Iconography and motion

Not measured in this pass. [Inferred]

Themes

Light on the page measured. [Observed]

Platform: iOS

The Mercado Libre iOS app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for the main areas of a shopping app. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A blue button for buying. [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-06 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 apps are expected to share the yellow, the blue and the small corners with the web. [Inferred]

Platform: Android

The Mercado Libre Android app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for the main areas of a shopping app. [Inferred]

Main action

Expected on Android: Floating action button.

A blue button for buying. [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-06 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 apps are expected to share the yellow, the blue and the small corners with the web. [Inferred]

Platform: Web

The Mercado Libre Argentina home 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 yellow header with search, a location link, a categories menu and account links. [Observed]

Main action

Expected on Web: Page-level button.

A tonal blue button, 33 high with a 5px corner. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Tonal buttons and text links in blue. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values at each breakpoint. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons measure 33 high, below the 44 and 48 touch minimums. [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.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The responsive page keeps type and color and changes layout. [Measured]

Cross-platform consistency

Consistent across platforms: the yellow header, the blue and the dense type. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Keep the yellow for the header.
  • Use the one blue for links and actions.
  • Use small corners on cards and buttons.
  • Use magenta only for offers.

Don't

  • Don't use yellow for buttons or text.
  • Don't round cards beyond 8px.
  • Don't use pure black for body text.

Known Gaps

  • Product pages, the cart and checkout were not measured.
  • The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions.
  • Icons, motion and exact breakpoints were not measured.
  • Account deletion and store policy rules were not verified.
  • Other country sites were not compared.
  • Mercado Libre's Andes design system was not read, so role names are not given.
  • The blue text on the pale blue tonal button measures about 3.2 to 1, below 4.5 to 1.