Mercadolibre Brand Design System Deep-Dive

1. Brand Overview

Mercadolibre’s design language is built for the largest e-commerce marketplace in Latin America. The brand’s visual system is engineered for scale — thousands of SKUs, dozens of categories, and a user base that spans mobile-first shoppers to desktop power users. It’s an interface that has to be fast, clear, and trustworthy.

The vibe? Pragmatic commerce with a hint of optimism. The brand’s yellow isn’t in the data here (it’s likely in other contexts), but their extracted UI palette leans heavily on #3483fa — a highly saturated, energetic blue — for interaction. This is a deliberate choice: blue in e-commerce signals trust and is familiar to a global audience (think PayPal, Facebook, Amazon accents). It’s paired with a grayscale that runs from #000000 to #f5f5f5 for a clean, neutral base.

Typography is functional. Proxima Nova dominates, with Arial fallback for system safety. Sizes scale tightly — no huge leaps — which keeps the interface dense but readable. They’re not going for editorial spaciousness; they’re going for information density without feeling cramped.

Spacing is built on an 8px grid, but with a lot of “off-grid” micro-values like 3px and 5px for fine-tuning. This is common in legacy e‑commerce platforms that have evolved over time. Rounded corners are modest — 4px, 5px, 6px — with occasional 50% for circular avatars and controls. No hyper-modern 16px radii here; it keeps things compact and businesslike.

Overall, Mercadolibre’s system is utilitarian but polished. The colors make it approachable, the typography makes it legible, and the components are designed for high-frequency use. This is a UI meant to get out of the way and let the transaction happen.

2. Color System

2.1 Primary Colors

The main accent and action color is rgb(52, 131, 250) → #3483fa. This is their “do something” color: buttons, links, focus states. It’s bright enough to stand out against white and light gray backgrounds, and it carries high contrast on neutral surfaces.

Psychologically, this blue is active but not aggressive. It builds trust (common in fintech and e‑commerce) and has enough saturation to pop in a sea of product images.

Competitors like Amazon lean on yellow/black, eBay on multi-color, and OLX on purple/green. Mercadolibre’s blue is a safer, more conservative choice — likely because the brand’s core yellow is already loud elsewhere, and blue balances it.

2.2 Complete Palette

2.3 Color Relationships

The palette is heavily neutral with a single strong accent. This keeps the interface from feeling chaotic and makes the blue stand out.

Contrast:

• #3483fa on white: WCAG AA passes for normal text.
• #ffffff on #3483fa: strong AAA contrast.
• Grays are light enough for backgrounds, dark enough for text in their respective roles.

No evidence of a dark mode palette here. The system is clearly tuned for light backgrounds.

2.4 Usage Guide

Works well:

• Blue (#3483fa) on white — high visibility CTAs.
• Black/near-black text on light gray backgrounds — clean, readable.
• White text on blue buttons — consistent and accessible.

Avoid:

• Blue text on gray backgrounds without enough contrast.
• Using mid-grays (#666666, #737373) for primary text — they’re too low-contrast for body copy.

3. Typography

3.1 Font Families

Primary: Proxima Nova — a geometric sans-serif, modern but friendly.
Fallbacks: -apple-system, Helvetica Neue, helvetica, roboto, arial (varies by context).

Buttons and some system UI use Arial for safety, especially in form controls.

No Google Fonts or Adobe Fonts detected — likely self-hosted.

3.2 Type Scale

Here's every extracted style:

3.3 Hierarchy

The hierarchy is tight. Small jumps between heading sizes keep the UI dense. Uppercase is used for emphasis in headings and buttons, but sparingly. Long line-heights (2.29, 2.59) show up in link lists — likely footer navigation.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid, but includes non-standard increments.

4.2 Layout

Breakpoints range from 280px (tiny devices) up to 1600px. Many are clustered around common device widths (768px tablet, 1024px desktop). This tells me they’re optimizing for a responsive, fluid grid rather than fixed container widths.

5. Visual Elements

Border Radius

Shadows

Dominant shadow: rgba(0, 0, 0, 0.12) 0px 1px 2px 0px — subtle, used for cards and floating elements.
Others: inset white borders for contrast, light 0.1 opacity shadows.

Borders

Common: 1px solid rgba(0,0,0,0.1) — for cards/divs.
Also: 1px solid rgb(213, 217, 217) — for separators.

6. Components

6.1 Buttons

Example variant — Cookie Consent Action
Default: bg rgba(65, 137, 230, 0.15), color #3483fa, padding 10px 14px, radius 5px.
Hover: bg #3483fa, color white.
Active: bg white(0.04), color white.
Focus: transparent bg, white text, no border.

Primary CTA (loyalty widget)
Default: bg #3483fa, color white, padding 0px 12px, radius 5px.
Hover: bg #f7f7f7, dashed border, transform scale(1.05).
Active: bg white(0.32), shadow.
Focus: outline 2px solid rgb(52, 132, 250), subtle shadow.

Circular buttons use 50% radius, small icon sizes.

6.2 Links

Variants:

• Blue (#3483fa) default → darker blue on hover, no underline.
• Black text → blue + underline on hover.
• White text on dark backgrounds → no change on hover.

6.3 Forms

Inputs: white bg, no visible border by default, radius 2px, subtle shadow.
Focus: border-color #3483fa, no shadow.

6.4 Cards

Cards: radius 6px, 1px solid rgba(0,0,0,0.1) border, subtle shadow (0.12 opacity).

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-600: #999999;
  --color-primary-blue: #3483fa;
  --color-gray-500: #666666;
  --color-near-black: #0f1111;
  --color-gray-100: #f5f5f5;
  --color-gray-700: #4b4b4b;
  --color-gray-550: #737373;
  --color-overlay-dark-95: #090909;
  --color-overlay-dark-89: #191919;

  /* Typography */
  --font-primary: "Proxima Nova", -apple-system, Helvetica Neue, helvetica, roboto, arial;
  --font-secondary: Arial, sans-serif;

  /* Spacing scale */
  --space-1: 1px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-23: 23px;
  --space-24: 24px;
  --space-32: 32px;
  --space-35: 35px;
  --space-36: 36px;
  --space-42: 42px;
  --space-46: 46px;

  /* Border radius */
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.12) 0px 1px 2px 0px;
}

8. AI Coding Assistant Prompt

# Mercadolibre Design System Specification

You are a Mercadolibre design expert. Build UIs matching their visual language exactly.

## Brand Context
Mercadolibre's design is utilitarian, commerce-focused, and optimized for high-density information. It uses a neutral base with a single strong blue accent for actions, modest rounded corners, and a restrained shadow system.

## Color Palette
- Black: #000000 — Primary text, icons
- White: #ffffff — Backgrounds, text on dark
- Gray 600: #999999 — Secondary text (footer info)
- Primary Blue: #3483fa — CTAs, links, focus states
- Gray 500: #666666 — Icons, inactive text
- Near Black: #0f1111 — Headings on dark backgrounds
- Gray 100: #f5f5f5 — Section backgrounds
- Gray 700: #4b4b4b — Body text
- Gray 550: #737373 — Secondary text
- Overlay Dark 95%: #090909 — Hover/focus overlays
- Overlay Dark 89.8%: #191919 — Hover/focus overlays

## Typography
- Primary: "Proxima Nova", -apple-system, Helvetica Neue, helvetica, roboto, arial
- Secondary: Arial, sans-serif

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 26px | 700 | — | Page titles |
| H2 | 22px | 600 | 1.09 | Section headings |
| Button-lg | 16px | 600 | — | Primary buttons |
| Body | 14px | 400 | 1.29 | Paragraph text |
| Caption | 12px | 400 | — | Metadata |

## Spacing & Grid
Base: 8px grid. Scale includes 1px, 3px, 4px, 5px, 6px, 8px, 9px, 10px, 12px, 13px, 14px, 16px, 20px, 23px, 24px, 32px, 35px, 36px, 42px, 46px.

## Border Radius
- sm: 2px — inputs
- md: 4px — buttons, cards
- lg: 6px — cards, images
- full: 50% — circular buttons, avatars

## Shadows & Depth
- Small: rgba(0, 0, 0, 0.12) 0px 1px 2px 0px — cards, popovers
- Inset white borders for light-on-dark contrast

## Component Specifications

### Primary Button
Default: bg #3483fa; color #ffffff; padding 0px 12px; border-radius 5px; border none; font-weight 600; font-size 14px.  
Hover: bg #f7f7f7; dashed border 1px rgba(0,0,0,0.25); transform scale(1.05).  
Active: bg rgba(255,255,255,0.32); shadow rgba(0,0,0,0.1) 0px 8px 16px 0px.  
Focus: outline 2px solid rgb(52, 132, 250); shadow rgba(15,17,17,0.15) 0px 2px 5px.

### Secondary Button
Default: transparent bg; color #3483fa; border-radius 4px; font-weight 600; font-size 12px.  
Hover: bg #3483fa; color #ffffff.  
Focus: no border; color #ffffff.

### Navigation Links
Default: color #3483fa; no underline.  
Hover: darker blue (#1259c3); no underline (except for black variant, which underlines on hover).

### Input Fields
Default: bg #ffffff; border 1px solid transparent; border-radius 2px; padding 10px 60px 10px 15px; shadow rgba(0,0,0,0.2) 0px 1px 2px.  
Focus: border-color #3483fa; no shadow.

### Cards
bg #ffffff; border-radius 6px; border 1px solid rgba(0,0,0,0.1); shadow rgba(0,0,0,0.12) 0px 1px 2px.

## Layout & Responsive Rules
Breakpoints: 280px, 340px, 620px, 768px, 1024px, up to 1600px.  
Use fluid layouts; maintain 8px spacing grid.

## Interaction Rules
- Transitions: 150ms ease for hover/focus/active states
- Focus: visible outlines for accessibility
- Hover: subtle bg or color change, never drastic

## DO List
- Use only colors from the palette
- Maintain 8px grid
- Keep border radius consistent per component type
- Use Proxima Nova for headings, Arial only when specified
- Ensure text contrast meets WCAG AA

## DON'T List
- Add custom colors
- Mix multiple radius values in one component
- Remove focus outlines
- Use shadows heavier than specified

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #3483fa;
  color: #fff;
  padding: 0 12px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #f7f7f7;
  border: 1px dashed rgba(0,0,0,0.25);
  transform: scale(1.05);
}
.btn-primary:focus {
  outline: 2px solid rgb(52, 132, 250);
}
```

### Card
```css
.card {
  background: #fff;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: rgba(0,0,0,0.12) 0px 1px 2px;
  padding: 16px;
}
```

### Input
```css
.input {
  background: #fff;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 10px 60px 10px 15px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 2px;
}
.input:focus {
  border-color: #3483fa;
  outline: none;
  box-shadow: none;
}
```

9. Summary

TL;DR — Mercadolibre’s design system is commerce-first: one strong blue accent, a clean grayscale base, modest radii, and subtle shadows. It’s built for density, clarity, and trust.

Brand Keywords:

• commerce-focused
• trust-driven
• dense-legible
• blue-accented
• grid-disciplined