Techniques
Yellow brand ribbon on navy
The signature MercadoLibre brand moment: a flat Turbo-yellow banner/ribbon stamped across the navy ground, used for promos and headers.
.element {
background: #FFE600;
color: #2D3277;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: 0.02em;
padding: 8px 20px;
box-shadow: 0 1px 4px rgba(16, 18, 35, 0.24);
}
.element::after {
content: '';
position: absolute;
right: -10px;
top: 0;
border-style: solid;
border-width: 0 0 100% 10px;
border-color: transparent transparent transparent #D6C100;
}
White product card on navy field
The marketplace's core unit: a clean white card floating on the deep navy ground with a light cool shadow and a bright-blue CTA.
.element {
background: #FFFFFF;
border: 1px solid #E6E8F2;
border-radius: 8px;
padding: 16px;
box-shadow: 0 1px 4px rgba(16, 18, 35, 0.24);
transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.element:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(16, 18, 35, 0.32);
}
.element .cta {
background: #3483FA;
color: #FFFFFF;
border-radius: 6px;
}
Navy chrome bar
The persistent navy header/nav chrome with a yellow logo lockup, anchoring the marketplace layout.
.element {
background: #2D3277;
border-bottom: 1px solid #1F2C73;
color: #FFFFFF;
padding: 12px 24px;
display: flex;
align-items: center;
gap: 16px;
}
.element .logo {
color: #FFE600;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
}