Magazine Luiza (Magalu)

---
name: Magazine Luiza (Magalu)
description: >
  Design system do e-commerce Magazine Luiza (Magalu), maior marketplace do Brasil.
  Identidade visual criada pela Tátil Design de Ideias com tipografia customizada
  Magalu Sans (Fabio Haag Type). A mascote virtual Lu do Magalu é elemento central
  da comunicação. O site utiliza componentes de marketplace como product cards,
  sistema de avaliações com estrelas, carrosséis promocionais e navegação por categorias.
colors:
  brand:
    primary: "#0086FF"
    primaryDark: "#0066CC"
    primaryDarkest: "#004D99"
    primaryLight: "#339EFF"
    primaryLightest: "#66B7FF"
    secondary: "#FF4C00"
    secondaryDark: "#CC3D00"
    secondaryLight: "#FF7033"
    accent: "#00C8FF"
  semantic:
    surface: "#FFFFFF"
    surfaceSecondary: "#F5F5F5"
    background: "#FFFFFF"
    backgroundGray: "#F0F1F3"
    onBackground: "#212121"
    onSurface: "#333333"
    highlight: "#0086FF"
    highEmphasis: "#212121"
    mediumEmphasis: "#666666"
    lowEmphasis: "#999999"
    disabled: "#CCCCCC"
  feedback:
    success: "#00A650"
    successLight: "#E6F9EF"
    warning: "#FF9500"
    warningLight: "#FFF4E5"
    error: "#E22D2D"
    errorLight: "#FDEDED"
    info: "#0086FF"
    infoLight: "#E5F2FF"
  promotional:
    sale: "#E22D2D"
    saleBackground: "#FFF0F0"
    blackFriday: "#000000"
    freeShipping: "#00A650"
    marketplace: "#6F4CFF"
    luMagalu: "#0086FF"
  neutral:
    white: "#FFFFFF"
    gray50: "#FAFAFA"
    gray100: "#F5F5F5"
    gray200: "#EEEEEE"
    gray300: "#E0E0E0"
    gray400: "#BDBDBD"
    gray500: "#9E9E9E"
    gray600: "#757575"
    gray700: "#616161"
    gray800: "#424242"
    gray900: "#212121"
    black: "#000000"
typography:
  families:
    - "Magalu Títulos"
    - "Magalu Textos"
    - "Magalu Submarcas"
    - "-apple-system, BlinkMacSystemFont, sans-serif"
  weights:
    regular: 400
    medium: 500
    bold: 700
    black: 900
  sizes:
    caption: 11
    small: 12
    body2: 13
    body1: 14
    subtitle2: 16
    subtitle1: 18
    heading6: 20
    heading5: 24
    heading4: 28
    heading3: 32
    heading2: 40
    heading1: 48
    display: 56
  lineHeights:
    tight: 1.2
    normal: 1.4
    relaxed: 1.6
rounded:
  none: 0
  small: 4
  medium: 8
  large: 12
  xLarge: 16
  pill: 999
  circle: "50%"
spacing:
  none: 0
  micro: 4
  tiny: 8
  small: 12
  standard: 16
  medium: 24
  large: 32
  xLarge: 48
  xxLarge: 64
---

## Overview

**Magazine Luiza** (nome comercial **Magalu**) é o maior marketplace e uma das maiores plataformas de e-commerce do Brasil, fundada em 1957 em Franca-SP. A empresa opera mais de 1.400 lojas físicas e uma plataforma digital que integra marcas como Netshoes, KaBuM!, Época Cosméticos e Estante Virtual.

A identidade visual atual (2019–presente) foi criada pela **Tátil Design de Ideias** com tipografia customizada desenvolvida pela **Fabio Haag Type**. O rebranding consolidou a marca sob o nome "Magalu" com um sistema tipográfico de três famílias especializadas.

A **Lu do Magalu** — influenciadora virtual com mais de 55 milhões de seguidores — é o elemento mais reconhecível da marca, atuando como assistente de compras, embaixadora e presença constante em toda a comunicação visual do e-commerce.

### Ecossistema

| Marca | Segmento |
|-------|----------|
| Magazine Luiza | Varejo geral, eletrônicos, móveis |
| Netshoes / Zattini | Moda e esportes |
| KaBuM! | Tecnologia e games |
| Época Cosméticos | Beleza e perfumaria |
| Estante Virtual | Livros |
| MagaluPay | Serviços financeiros |

### Princípios de Design

1. **Azul confiável** — O azul primário (#0086FF) transmite confiança e tecnologia, diferenciando de concorrentes que usam tons mais escuros
2. **Clareza sobre decoração** — Interface limpa com fundo branco, priorizando produtos sobre elementos visuais
3. **Acessibilidade democrática** — Design inclusivo que atende desde consumidores de primeira compra digital até power users
4. **Lu como guia** — A mascote humaniza a tecnologia e cria conexão emocional em todos os pontos de contato
5. **Marketplace multi-seller** — Componentes precisam diferenciar claramente produtos próprios de sellers terceiros

---

## Colors

A paleta do Magalu é dominada pelo **azul vibrante** (#0086FF) que distingue a marca no varejo brasileiro. O laranja/vermelho aparece como cor de contraste para promoções e CTAs urgentes.

### Brand Colors

| Token | Hex | Uso |
|-------|-----|-----|
| `brand.primary` | `#0086FF` | Cor institucional, header, botões primários, links |
| `brand.primaryDark` | `#0066CC` | Hover states, header escuro |
| `brand.primaryDarkest` | `#004D99` | Pressed states |
| `brand.primaryLight` | `#339EFF` | Highlights, seleções |
| `brand.primaryLightest` | `#66B7FF` | Backgrounds de destaque leve |
| `brand.secondary` | `#FF4C00` | Promoções, selos de desconto, urgência |
| `brand.secondaryDark` | `#CC3D00` | Hover em CTAs promocionais |
| `brand.secondaryLight` | `#FF7033` | Tags de oferta, badges |
| `brand.accent` | `#00C8FF` | Elementos da Lu, links informativos |

### Semantic Colors

| Token | Hex | Uso |
|-------|-----|-----|
| `surface` | `#FFFFFF` | Cards de produto, modais, drawers |
| `surfaceSecondary` | `#F5F5F5` | Seções alternadas, backgrounds de listagem |
| `background` | `#FFFFFF` | Background principal |
| `backgroundGray` | `#F0F1F3` | Background de página de produto |
| `onBackground` | `#212121` | Texto principal |
| `highlight` | `#0086FF` | Links ativos, preço com desconto |

### Feedback Colors

| Token | Hex | Uso |
|-------|-----|-----|
| `success` | `#00A650` | Frete grátis, produto disponível, compra confirmada |
| `warning` | `#FF9500` | Últimas unidades, estoque baixo |
| `error` | `#E22D2D` | Erros de formulário, produto indisponível |
| `info` | `#0086FF` | Informações, tooltips |

### Promotional Colors

| Token | Hex | Uso |
|-------|-----|-----|
| `sale` | `#E22D2D` | Preço de/por, selos de desconto percentual |
| `freeShipping` | `#00A650` | Badge "Frete Grátis", benefícios de entrega |
| `marketplace` | `#6F4CFF` | Indicador de vendedor marketplace |
| `blackFriday` | `#000000` | Campanhas sazonais Black Friday |
| `luMagalu` | `#0086FF` | Elementos associados à mascote Lu |

---

## Typography

### Font Families

- **Magalu Títulos** — Tipografia display customizada pela Fabio Haag Type. Espaçamento compacto e proporções reduzidas para headlines fortes e densas. Inclui Small Caps para maior densidade.
- **Magalu Textos** — Variante otimizada para legibilidade em tamanhos pequenos. Inclui `a` tradicional e ajustes em proporções de glifos e diacríticos para leitura fluida.
- **Magalu Submarcas** — Família para criação de sub-brands (produtos e serviços). 3 estilos com ligatures especiais e designs alternativos. Replica o design do logotipo.
- **System fallback** — `-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif` para web quando a font customizada não carrega.

A tipografia foi projetada com atenção especial aos **numerais** — superiores e inferiores desenhados para facilitar a composição de preços (incluindo centavos reduzidos) sem distorções ou escalonamento manual.

### Roles Tipográficos

| Role | Font Family | Weight | Uso |
|------|-------------|:------:|-----|
| `display` | Magalu Títulos | 900 (Black) | Hero banners, títulos de campanha |
| `headline` | Magalu Títulos | 700 (Bold) | Títulos de seção, headings |
| `subtitle` | Magalu Textos | 500 (Medium) | Subtítulos, breadcrumbs |
| `body` | Magalu Textos | 400 (Regular) | Descrições de produto, corpo de texto |
| `body.emphasis` | Magalu Textos | 700 (Bold) | Preços, destaques no corpo |
| `caption` | Magalu Textos | 400 (Regular) | Labels, informações auxiliares, avaliações |
| `price` | Magalu Títulos | 700 (Bold) | Preços destacados com numerais otimizados |
| `subbrand` | Magalu Submarcas | — | Nomes de sub-marcas e serviços |

### Escala Tipográfica

| Token | Tamanho (px) | Uso |
|-------|:---:|---|
| `caption` | 11 | Nota legal, timestamps |
| `small` | 12 | Labels, badges, avaliações |
| `body2` | 13 | Texto auxiliar, especificações |
| `body1` | 14 | Corpo padrão, descrições |
| `subtitle2` | 16 | Subtítulos, nome do produto em card |
| `subtitle1` | 18 | Títulos de seção menores |
| `heading6` | 20 | Heading terciário |
| `heading5` | 24 | Heading de categoria |
| `heading4` | 28 | Heading de página |
| `heading3` | 32 | Títulos de campanha |
| `heading2` | 40 | Display secundário |
| `heading1` | 48 | Display principal |
| `display` | 56 | Hero, banners promocionais |

### Preços

A tipografia de preços segue convenção brasileira:

| Elemento | Estilo | Exemplo |
|----------|--------|---------|
| Preço "de" | 14px, regular, `#999`, line-through | ~~R$ 2.499,00~~ |
| Preço "por" | 24px–32px, bold, `#212121` | **R$ 1.899,00** |
| Centavos | 60% do tamanho do preço, superscript | ,00 |
| Parcelas | 14px, regular, `#666` | ou 12x de R$ 158,25 |
| Desconto (%) | 12px, bold, branco sobre `#E22D2D` | -24% |

---

## Layout

### Spacing Scale

O site utiliza uma escala de espaçamento baseada em múltiplos de 4px:

| Token | Valor | Uso |
|-------|:---:|---|
| `none` | 0px | Reset |
| `micro` | 4px | Gaps internos de badge, entre estrelas de avaliação |
| `tiny` | 8px | Padding mínimo, gap ícone-texto |
| `small` | 12px | Padding interno de tags, separação de labels |
| `standard` | 16px | Padding padrão de cards, margens laterais mobile |
| `medium` | 24px | Espaçamento entre blocos de conteúdo |
| `large` | 32px | Separação entre seções |
| `xLarge` | 48px | Espaçamento entre áreas da página |
| `xxLarge` | 64px | Separação de seções hero |

### Grid

| Breakpoint | Colunas | Gutter | Margem | Uso |
|-----------|:-------:|:------:|:------:|-----|
| Mobile (<768px) | 2 | 8px | 16px | Listagem de produtos, cards 2-col |
| Tablet (768–1024px) | 3–4 | 12px | 24px | Grids de produto expandidos |
| Desktop (1024–1440px) | 4–5 | 16px | auto | Listagem padrão, PDP |
| Wide (>1440px) | 5–6 | 16px | auto, max-width 1440px | Grid máximo |

### Containers

| Área | Max-width | Comportamento |
|------|:---------:|---------------|
| Header | 100% | Sticky no scroll, azul #0086FF |
| Content | 1440px | Centralizado com auto margins |
| Product Grid | 1200px | Grid responsivo de cards |
| Footer | 100% | Full-width, background #F5F5F5 |

---

## Elevation & Depth

O Magalu usa elevação sutil com sombras leves, mantendo a interface limpa e os produtos como protagonistas:

| Token | Box-shadow | Uso |
|-------|-----------|-----|
| `none` | Nenhuma | Estado padrão de cards na listagem |
| `subtle` | `0 1px 2px rgba(0,0,0,0.08)` | Cards em repouso |
| `low` | `0 2px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)` | Cards hover |
| `medium` | `0 4px 8px rgba(0,0,0,0.12)` | Dropdown menus, tooltips |
| `high` | `0 8px 16px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08)` | Modais, drawers |
| `highest` | `0 16px 32px rgba(0,0,0,0.16), 0 8px 16px rgba(0,0,0,0.08)` | Overlays, mega menu |

### Transições

| Propriedade | Duração | Easing | Uso |
|------------|:-------:|--------|-----|
| Hover elevation | 200ms | ease-out | Card hover lift |
| Color change | 150ms | ease | Link/button hover |
| Drawer slide | 300ms | cubic-bezier(0.4, 0, 0.2, 1) | Menu mobile |
| Modal fade | 250ms | ease-in-out | Abertura de modal |

---

## Shapes

### Border Radius

| Token | Valor | Uso |
|-------|:---:|---|
| `none` | 0px | Imagens de produto full-bleed, banners |
| `small` | 4px | Tags, badges de desconto, inputs |
| `medium` | 8px | Product cards, botões, containers |
| `large` | 12px | Cards destacados, modais |
| `xLarge` | 16px | Cards promocionais, bottom sheets |
| `pill` | 999px | Botões pill (CTA), chips de filtro, badges arredondados |
| `circle` | 50% | Avatares, ícone da Lu, FABs |

O design padrão do Magalu usa **8px** como border-radius principal para cards de produto, dando um visual moderno mas não excessivamente arredondado.

### Borders

| Token | Valor | Uso |
|-------|-------|-----|
| `default` | `1px solid #E0E0E0` | Bordas de cards, separadores |
| `focus` | `2px solid #0086FF` | Focus ring de inputs |
| `error` | `1px solid #E22D2D` | Inputs com erro |
| `selected` | `2px solid #0086FF` | Itens selecionados |
| `divider` | `1px solid #EEEEEE` | Divisores horizontais leves |

---

## Components

A interface do Magazine Luiza é composta de componentes específicos de e-commerce marketplace:

### Header e Navegação
- **TopBar** — Faixa promocional superior com mensagem rotativa (frete grátis, cupons)
- **Header** — Background azul (#0086FF) com logo, barra de busca centralizada, ícones de conta/carrinho/favoritos
- **SearchBar** — Input proeminente com autocomplete, sugestões e histórico
- **MegaMenu** — Dropdown por departamentos com ícones de categoria e subcategorias em colunas
- **Breadcrumb** — Navegação hierárquica na página de produto

### Product Cards
- **ProductCard** — Card com imagem, nome, preço "de/por", parcelas, seller, badge de desconto, selo frete grátis, avaliação com estrelas
- **ProductCard.Image** — Imagem quadrada com aspect-ratio 1:1, lazy-load, zoom no hover
- **ProductCard.Badge** — Badge posicionado no canto superior (% desconto, "Mais vendido", "Oferta do dia")
- **ProductCard.Price** — Bloco de preços com "de" riscado, "por" destacado, e parcelamento
- **ProductCard.Rating** — Estrelas amarelas (#FFC107) com contagem de reviews
- **ProductCard.Seller** — Indicação "Vendido por [seller]" para marketplace
- **ProductCard.Shipping** — Badge verde "Frete Grátis" ou estimativa de entrega

### Página de Produto (PDP)
- **ProductGallery** — Carrossel de imagens com thumbnails, zoom e vídeo
- **ProductInfo** — Título, avaliação, preço, variantes (cor/tamanho), botão Comprar
- **BuyBox** — CTA principal "Adicionar ao Carrinho" em azul + "Comprar" em destaque
- **SellerInfo** — Card do vendedor com nome, avaliação e tempo de entrega
- **ProductSpecs** — Tabela de especificações técnicas colapsável
- **ReviewSection** — Bloco de avaliações com filtro por nota, fotos de clientes, resumo

### Avaliações e Reviews
- **StarRating** — 5 estrelas (preenchidas #FFC107, vazias #E0E0E0), display e input
- **ReviewCard** — Comentário com avatar, nome, data, nota, texto e fotos
- **RatingDistribution** — Barras horizontais mostrando distribuição 5★→1★
- **ReviewSummary** — Nota média grande + total de avaliações + destaques

### Promoções e Banners
- **HeroBanner** — Carrossel full-width com imagens de campanha e CTAs
- **OfferStrip** — Faixa horizontal de ofertas com countdown timer
- **CategoryCarousel** — Scroll horizontal de ícones de categorias (redondos)
- **ProductCarousel** — Carrossel horizontal de ProductCards com setas de navegação

### Checkout e Conversão
- **CartDrawer** — Drawer lateral com itens, quantidade, subtotal e botão finalizar
- **CartItem** — Linha com thumb, nome, quantidade editável, preço
- **AddressInput** — Input de CEP com cálculo de frete automático
- **PaymentOptions** — Opções de pagamento (Pix, cartão, boleto, MagaluPay)

### Marketplace
- **SellerBadge** — Badge "Vendido e entregue por [nome]" com ícone de verificação
- **SellerStorefront** — Página do seller com produtos, avaliações e dados
- **BuyBoxSelector** — Quando múltiplos sellers vendem o mesmo produto

### Lu do Magalu (Mascote)
- **LuAvatar** — Avatar circular da Lu usado em chat, avaliações e dicas
- **LuChat** — Widget de atendimento com a Lu como assistente virtual
- **LuTip** — Callout com dica da Lu (ícone + balão de fala)
- **LuBanner** — Banner com a Lu apresentando ofertas ou novidades

### Ações e Feedback
- **Button.Primary** — Azul #0086FF, texto branco, border-radius 8px, height 48px
- **Button.Secondary** — Outline azul, fundo branco
- **Button.Promotional** — Background #FF4C00 (laranja), texto branco para urgência
- **Toast** — Notificação temporária ("Produto adicionado ao carrinho")
- **Snackbar** — Mensagem com ação ("Desfazer")

---

## Do's and Don'ts

### ✅ Do's

- **Use o azul #0086FF como cor primária** — É o DNA visual do Magalu; header, CTAs e links devem usar essa cor
- **Priorize a clareza de preços** — O bloco de preços é o elemento mais importante do product card; dê destaque visual com hierarquia de tamanho e peso
- **Mantenha fundos brancos/claros** — O produto é o protagonista; backgrounds limpos garantem que imagens se destacam
- **Use a Lu como elemento de confiança** — A mascote deve aparecer em momentos de suporte, dicas e humanização da interface
- **Diferencie sellers de marketplace** — Sempre indicar claramente quando um produto é vendido por terceiro vs. Magalu diretamente
- **Use border-radius 8px como padrão** — Cards de produto, botões e containers seguem esse arredondamento
- **Respeite a hierarquia tipográfica** — Magalu Títulos para headlines, Magalu Textos para corpo; nunca inverter
- **Sinalize frete grátis em verde (#00A650)** — É um dos maiores drivers de conversão; sempre visível no card
- **Use estrelas amarelas (#FFC107) para avaliações** — Padrão universal reconhecido instantaneamente

### ❌ Don'ts

- **Não use azul escuro/marinho** — O azul Magalu é vibrante (#0086FF), não corporativo/escuro
- **Não sobrecarregue o card de produto** — Máximo de 2 badges por card; excesso polui e confunde
- **Não esconda o preço** — Nunca colocar preço atrás de interação (hover, clique); deve ser visível imediatamente
- **Não use a Lu de forma inconsistente** — A mascote tem poses e expressões aprovadas; não distorcer ou recriar
- **Não misture tipografias externas** — Respeitar a família Magalu Sans; não introduzir Roboto, Inter ou outras
- **Não use sombras pesadas** — Elevação deve ser sutil; sombras exageradas competem com imagens de produto
- **Não confunda vermelho de erro com vermelho de promoção** — Vermelho de preço (#E22D2D) é promoção; vermelho de feedback é erro contextual em formulários
- **Não ignore o mobile-first** — Mais de 70% do tráfego é mobile; grid de 2 colunas com cards compactos é a prioridade
- **Não omita informação de entrega** — CEP, prazo e custo de frete devem estar acessíveis antes do checkout
- **Não use backgrounds coloridos intensos** — Reservar cores vibrantes para badges e CTAs; áreas grandes em branco/#F5F5F5

---

## Attribution

| Campo | Valor |
|-------|-------|
| Source | [magazineluiza.com.br](https://www.magazineluiza.com.br/) |
| Brand Owner | Magazine Luiza S.A. (B3: MGLU3) |
| Identity Design | [Tátil Design de Ideias](https://www.tatil.com.br/) |
| Typography | [Fabio Haag Type](https://fabiohaagtype.com/en/magalu/) — Magalu Títulos, Magalu Textos, Magalu Submarcas (baseada em Margem) |
| Method | Public site CSS extraction + brand identity research |
| Date | 2026-07-05 |