--- 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 | Role | Value | Where | |------|-------|-------| | Yellow | `#ffe600` | Header | | Blue | `#3483fa` | Links and tonal buttons | | Blue wash | about `#e6f0fd` | Tonal button fill (15 percent blue) | | Offer magenta | `#e60063` | Discount marks | | Text | black at 90 percent, about `#1a1a1a` | Titles and body | | Secondary text | black at 55 and 65 percent, about `#737373` and `#595959` | Meta | | Page and cards | `#ffffff`, `#f5f5f5` | Surfaces | | Divider | `#ebebeb` | Rules | ### 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.