--- 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 | Role | Value | Where | |------|-------|-------| | Indigo | `#434ce4` | Open account buttons [Measured] | | Yellow | `#ffe600` | Promotion bands [Measured] | | Link blue | `#3483fa` | Links [Measured] | | Charcoal | `#282834` and at 70 and 60 percent | Navigation pills, dark sections, scrims [Measured] | | Black | `#030303` | Hero sections [Measured] | | Text | black at 90 percent (about `#1a1a1a`), 55 percent (about `#737373`) | Headings and body [Measured] | | Soft text | `#9292b0` | Disabled labels [Measured] | | Page | `#ededed`, canvas `#ffffff` | Background and cards [Measured] | | Sky wash | `#ebf7ff` | Light feature panels [Measured] | | Disabled | `#d0d4e6` | Continue 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] | Role | Desktop | Mobile | Weight | |------|---------|--------|--------| | Display | 64 on 64 | 40 on 40, -1.6px | 700 [Measured] | | Headline | 40 on 40, -0.4px | 32 to 36 on 32 to 36 | 700 [Measured] | | Stat | not measured | 24 on 27.6, -0.48px | 700 [Measured] | | Lead | 20 on 24 | not measured | 400 [Measured] | | Eyebrow | 16 on 24, 0.64px, uppercase | not measured | 700 [Measured] | | Button | 16 | same | 600 [Measured] | | Nav label | 14 on 18 | same | Inter 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.