PRINCÍPIOS MOBILE-FIRST
TOQUE PRIMEIRO
Alvos mínimos 48×48px. CTAs e ícones pensados para o polegar.
IMAGEM EM DESTAQUE
Produto e lifestyle ocupam o topo; tipografia secundária e espaçada.
CHECKOUT RÁPIDO
Poucas etapas; Pix e cartão visíveis; confirmação clara pós-compra.
RÁPIDO E ESTÁVEL
WebP, lazy load abaixo da dobra, skeleton em #E7E7E4 → #F5F5F3.
TELAS MOBILE
HOME
STREET
ESSENTIAL
PREMIUM
NOVA SEÇÃO
VER COLEÇÃO
PRODUTO
CAMISETA
WHATSAPP
GUEPARD Essential Tee
Corte reto · Algodão pesado · Preto
R$ 189,90
COMPRAR AGORA
BREAKPOINTS
| Breakpoint | Valor | Comportamento |
|---|---|---|
| sm | 0 – 767px | 1 coluna, menu hambúrguer, hero full-width, grid de produto 1 col. |
| md | 768px – 1023px | 2 colunas, navegação expandida onde couber. |
| lg | 1024px – 1279px | 3 colunas, lifestyle grid, tipografia em escala desktop. |
| xl | 1280px+ | Container máx. 1200px, hierarquia editorial completa. |
IMAGENS
FORMATO
WebP para produto e lifestyle; fallback JPG. Meta ~800KB por imagem hero.
LAZY LOADING
Abaixo do fold: loading="lazy". Hero com prioridade de carregamento.