Finance / iOS / Android / Web

Mercado Pago

Mercado Pago borrows the marketplace's yellow for its loudest bands and gives its own indigo to the one button that opens an account.

Download
  • #434CE4
  • #FFE600
  • #282834
  • #3483FA
  • #EBF7FF
  • #EDEDED

Color

Every color token in the file, grouped by role.

Brand

  • primary#434CE4
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • on yellow#000000
  • link#3483FA
  • on charcoal#FFFFFF
  • ink#1A1A1A
  • ink muted#737373
  • ink soft#9292B0
  • disabled#D0D4E6

Lines

  • hairline#E6E6E6

More

  • yellow#FFE600
  • charcoal#282834
  • black#030303
  • page#EDEDED
  • sky wash#EBF7FF

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.
  • InterOpen font, shown as published.
  • display64px / 700 / 64px

    Mercado Pago

  • headline40px / 700 / 40px

    Mercado Pago

  • stat24px / 700 / 27.6px

    Pack my box with five dozen liquor jugs

  • lead20px / 400 / 24px

    Pack my box with five dozen liquor jugs

  • eyebrow16px / 700 / 24px

    The quick brown fox jumps over the lazy dog

  • button16px / 600 / 20px

    Continue to checkout

  • nav14px / 600 / 18px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs4px
  • sm6px
  • md12px
  • lg20px
  • xl32px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md16px
  • base24px
  • lg32px

Components

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

  • button primary
    button-primary
  • button disabled
    button-disabled
  • nav pill
    nav-pill
  • yellow band
    yellow-band
  • sky card
    sky-card
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 113 lines
version: alpha
name: Mercado-Pago-design-analysis
description: "A Latin American digital wallet and bank in a vivid indigo (#434ce4) for its main buttons, with Mercado yellow (#ffe600) bands, near-black charcoal (#282834) navigation pills, link blue (#3483fa), bold Proxima Nova headlines set solid and Inter for interface labels."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#434ce4"
  on-primary: "#ffffff"
  yellow: "#ffe600"
  on-yellow: "#000000"
  link: "#3483fa"
  charcoal: "#282834"
  on-charcoal: "#ffffff"
  black: "#030303"
  ink: "#1a1a1a"
  ink-muted: "#737373"
  ink-soft: "#9292b0"
  canvas: "#ffffff"
  page: "#ededed"
  sky-wash: "#ebf7ff"
  disabled: "#d0d4e6"
  hairline: "#e6e6e6"

typography:
  # Font note: "Proxima Nova" is a private font and is not available in open fonts. Closest open alternative: "Lato".
  display:
    fontFamily: "'Proxima Nova', -apple-system, Roboto, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 64px
  headline:
    fontFamily: "'Proxima Nova', -apple-system, Roboto, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 40px
    letterSpacing: -0.4px
  stat:
    fontFamily: "'Proxima Nova', -apple-system, Roboto, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 27.6px
    letterSpacing: -0.48px
  lead:
    fontFamily: "'Proxima Nova', -apple-system, Roboto, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 24px
  eyebrow:
    fontFamily: "'Proxima Nova', -apple-system, Roboto, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: 0.64px
  button:
    fontFamily: "'Proxima Nova', -apple-system, Roboto, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 20px
  nav:
    fontFamily: "Inter, 'Proxima Nova', -apple-system, Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 18px

rounded:
  xs: 4px
  sm: 6px
  md: 12px
  lg: 20px
  xl: 32px
  pill: 9999px

spacing:
  sm: 8px
  md: 16px
  base: 24px
  lg: 32px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 48px
    padding: 0 24px
  button-disabled:
    backgroundColor: "{colors.disabled}"
    textColor: "{colors.ink-soft}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    height: 48px
    padding: 2px 24px
  nav-pill:
    backgroundColor: "{colors.charcoal}"
    textColor: "{colors.on-charcoal}"
    typography: "{typography.nav}"
    rounded: "{rounded.md}"
    height: 40px
    padding: 2px 16px
  yellow-band:
    backgroundColor: "{colors.yellow}"
    textColor: "{colors.on-yellow}"
    typography: "{typography.headline}"
  sky-card:
    backgroundColor: "{colors.sky-wash}"
    textColor: "{colors.ink}"
    typography: "{typography.lead}"
    rounded: "{rounded.xl}"

Overview

Mercado Pago is the digital wallet, account and payments business of Mercado Libre, used across Latin America. Its Brazilian site sets bold Proxima Nova headlines over dark and yellow sections, uses a vivid indigo for opening an account, charcoal pills for navigation and Inter for interface labels. [Observed]

What defines the look:

  1. Indigo for the main action. "Abrir conta grátis" is #434ce4 with white text, 48 high. [Measured]
  2. Mercado yellow bands. #ffe600 fills promotion bands, the same yellow as the parent marketplace. [Measured]
  3. Charcoal navigation. Product pills (Conta Digital, Conta Negócio, Ajuda e Segurança) are charcoal #282834 at 70 percent with white Inter text and a 12px corner. [Measured]
  4. Solid bold headlines. Proxima Nova at 700 with the line height equal to the size (64 on 64, 40 on 40), tracked tighter on mobile. [Measured]
  5. Soft text by opacity. Body text is black at 90 percent and secondary at 55 percent. [Measured]

Source for this file: the Brazilian home page, the savings (Cofrinhos) page and the account upgrade page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. The site is in Portuguese. Mercado Libre's Andes design system was not read. The wallet sits behind an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Indigo#434ce4Open account buttons [Measured]
Yellow#ffe600Promotion bands [Measured]
Link blue#3483faLinks [Measured]
Charcoal#282834 and at 70 and 60 percentNavigation pills, dark sections, scrims [Measured]
Black#030303Hero sections [Measured]
Textblack at 90 percent (about #1a1a1a), 55 percent (about #737373)Headings and body [Measured]
Soft text#9292b0Disabled labels [Measured]
Page#ededed, canvas #ffffffBackground and cards [Measured]
Sky wash#ebf7ffLight feature panels [Measured]
Disabled#d0d4e6Continue before input [Measured]

Typography

Proxima Nova at 300 to 700 for headings and buttons, and Inter at 400 to 600 for navigation and form labels. [Measured]

RoleDesktopMobileWeight
Display64 on 6440 on 40, -1.6px700 [Measured]
Headline40 on 40, -0.4px32 to 36 on 32 to 36700 [Measured]
Statnot measured24 on 27.6, -0.48px700 [Measured]
Lead20 on 24not measured400 [Measured]
Eyebrow16 on 24, 0.64px, uppercasenot measured700 [Measured]
Button16same600 [Measured]
Nav label14 on 18sameInter 600 [Measured]

Shape and spacing

Buttons use 6 on desktop and 12 on mobile, navigation pills 12, cards 20, 32 and 40, and chips full round. [Measured] Buttons carry 24 side padding, nav pills 16. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light page with fixed dark and yellow sections. The dark color scheme pass changed nothing. [Measured]

Platform: iOS

How the Mercado Pago iOS app looks and behaves was not captured. Mercado Libre's Andes design system was not read, 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, the card, activity and more is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Pay with a QR code, transfer or Pix, as prominent actions. [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 indigo, yellow and Proxima Nova with the web. [Inferred]

Platform: Android

How the Mercado Pago Android app looks and behaves was not captured. Mercado Libre's Andes design system was not read, 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, the card, activity and more is expected. [Inferred]

Main action

Expected on Android: Floating action button.

Pay with a QR code, transfer or Pix, as prominent actions. [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 indigo, yellow and Proxima Nova with the web. [Inferred]

Platform: Web

The home page, the savings page and the account upgrade 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 dark header row of charcoal product pills, 40 high with a 12px corner and white Inter 14px semibold text. On mobile, a menu opens from a charcoal button. [Measured]

Main action

Expected on Web: Page-level button.

An indigo #434ce4 button with white 16px semibold text, 48 high, with a 6px corner on desktop and 12 on mobile. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

The mobile menu sits over charcoal at 60 percent. [Measured]

Controls

Expected on Web: Native or custom.

FAQ items are 84 high rows. The sign-up field's Continue button stays #d0d4e6 until filled. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that step down at the mobile width. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons and pills are 40 to 48 high, FAQ rows 84. [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.

Sign-up starts with one field on the home page. [Observed]

Platform conformance

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

A conventional responsive site whose button corners grow on mobile (6 to 12). [Measured]

Cross-platform consistency

Consistent across platforms: the indigo action, the yellow and Proxima Nova. [Measured for web, Inferred for the apps]

Intentionally different: on the web, button corners are 6 on desktop and 12 on mobile. [Measured]

Do's and Don'ts

Do

  • Use indigo for opening an account and other main actions.
  • Use the yellow for full promotion bands.
  • Set headlines bold and solid.
  • Set text in black at 90 and 55 percent.

Don't

  • Don't use yellow for buttons.
  • Don't mix the link blue with the indigo action color.
  • Don't open up headline leading.

Known Gaps

  • The wallet, the card and payments sit behind an account and were not measured.
  • Only the Brazilian site was measured.
  • The iOS and Android apps were not captured, and the Andes design system was not read, so every mobile topic is inferred.
  • Icons, motion and modals were not measured.
  • Proxima Nova is private. Lato is used as the open alternative, matching the existing Mercado Libre file in this catalog so the two sister brands stay consistent. It was not compared again side by side for this file.
  • The disabled Continue button measures 2.05 to 1, which is normal for a disabled state.
  • Account deletion and store policy rules were not verified.