Digital Store · Identidade

Design System Match

Sistema de design completo derivado da identidade da Match Digital Store. Roxo profundo, verde mint e branco — tokens, tipografia e componentes prontos para produto.

Roxo #511888 Mint #85DABD Branco #FFFFFF
Logotipo Match Digital Store
Fundamentos

Cores da marca

Três cores extraídas fielmente do logo original. Clique em qualquer amostra (ou Enter/Espaço) para copiar o hex.

Match
Roxo Match
Primária · ações, marca, texto forte
#511888
Match
Verde Mint
Secundária · destaques, fundos, energia
#85DABD
Match
Branco
Base · superfícies, respiro, contraste
#FFFFFF
Cores

Escalas & tokens

Escalas de 50 a 950 para roxo, mint e neutros, mais cores semânticas de estado. Tudo em tokens.css e tokens.json.

Roxo
Verde Mint
Neutros (com leve tom roxo)
Semânticas
success
#1FA971
warning
#F2A93B
error
#E5484D
info
#5B7CFA
Tipografia

Famílias & escala

Poppins para títulos (rima com as letras arredondadas do logo), Inter para texto corrido e Pacifico como acento script — eco do wordmark Match.

Ag
Poppins
Display / títulos · 600–800
Ag
Inter
Corpo / UI · 400–600
Match
Pacifico
Acento script · uso pontual
AaRegular 400
AaMedium 500
AaSemibold 600
AaBold 700
AaExtrabold 800
Especificações dos tokens tipográficos
TokenTamanhoLine-heightTrackingPesoUso
--text-6xl3.815rem1.05-0.02em800hero h1
--text-5xl3.052rem1.1-0.02em800display
--text-4xl2.441rem1.1-0.02em700h1 página
--text-3xl1.953rem1.15-0.02em700h2 seção
--text-2xl1.563rem1.2-0.01em600h3
--text-xl1.25rem1.3-0.01em600h4 / lead
--text-lg1.125rem1.40600subtítulo
--text-base1rem1.50400corpo
--text-sm0.875rem1.50400secundário
--text-xs0.75rem1.40.02em500label / caption
Layout

Espaçamento

Escala base 4px. Use os tokens --space-* para padding, gap e margin consistentes.

Estilo

Raio & sombra

Cantos generosos refletem o traço arredondado da marca. Sombras com tom roxo para profundidade coesa.

sm
md
lg
xl
brand
Fundamentos

Elevação

Escala semântica de elevação: cada nível mapeia uma sombra a um uso específico, do repouso ao topo da pilha.

1shadow-sm
2shadow-md
3shadow-lg
4shadow-xl
5shadow-brand
5shadow-mint
Escala de elevação e uso
NívelTokenUso
0nonesuperfície base, inputs em repouso
1--shadow-smcards sutis, sem-cards
2--shadow-mdcards de produto, swatches
3--shadow-lghover de card, dropdown
4--shadow-xlmodal, hero logo-card
brand--shadow-brandCTA primário, FAB
mint--shadow-mintCTA secundário
Fundamentos

Iconografia

Ícones inline SVG, traço 1.75, 24×24, herdam currentColor. Decorativos usam aria-hidden; informativos usam role="img" + aria-label.

cart
search
user
heart
check
x
chevron-down
chevron-right
arrow-right
bell
star
download
18 · sm
24 · base
32 · lg
Layout

Grid & breakpoints

Container de 1120px com 24px de padding lateral. Grid de 12 colunas, colapsando por breakpoint.

Breakpoints e colunas
Breakpointmin-widthColunasSidebar
mobile01empilhada (flex-wrap)
tablet861px2fixa 248px
desktop1120px3–4fixa 248px
Fundamentos

Motion

Durações e curvas de easing. Clique numa faixa para ver a curva animar. Respeita prefers-reduced-motion.

Tokens de motion
TokenValorUso
--duration-fast120mshover, focus, micro
--duration-base220mstransições padrão
--duration-slow380msoverlays, toast
--ease-standardcubic-bezier(.4,0,.2,1)maioria
--ease-emphasizedcubic-bezier(.2,0,0,1)entrada de elementos
--ease-bouncecubic-bezier(.34,1.56,.64,1)toggle, FAB, swatch
Componentes

Botões

Variantes primária, secundária, contorno, ghost e perigo. Cantos totalmente arredondados (pill). Estado disabled usa neutros (não opacidade).

Variantes

Tamanhos

Com ícone, icon-only, loading e disabled

Componentes

Badges & status

Indicadores compactos de status e categoria, tags removíveis e status-dot com rótulo. Todos com contraste AA.

Badges

Novo Destaque Em estoque Últimas unidades Esgotado Frete grátis -30%

Tags removíveis

Eletrônicos Acessórios Smartphones

Status-dot

Em estoque Poucas unidades Esgotado Descontinuado
Componentes

Cards

Superfícies de produto, conteúdo e planos. Cobertura em gradiente da marca e hover elevado.

Cards de produto

Produto digital

Card de listagem com hover elevado e raio generoso.

R$ 149

Oferta da semana

Combine roxo e mint em gradientes para destaque.

-30% Em estoque

Coleção premium

Fundo sólido roxo para itens premium e exclusivos.

Cards de conteúdo

Guia

Como escolher seu setup

Dicas práticas para montar a estação de trabalho ideal sem estourar o orçamento.

Ler mais
Tendência

Mint é o novo destaque

Por que a paleta verde-água domina as vitrines digitais neste semestre.

Ler mais
Novidade

Lançamentos da semana

Os produtos que acabaram de chegar na Match Digital Store.

Ler mais

Cards de plano

Básico
R$ 29/mês
  • Até 50 produtos
  • Relatórios básicos
  • Suporte por e-mail
Pro
Mais popular
R$ 79/mês
  • Produtos ilimitados
  • Relatórios avançados
  • Suporte prioritário
Loja
R$ 199/mês
  • Multi-lojas
  • API completa
  • Gerente de conta
Componentes

Formulários

Campos com foco em roxo, estados de erro/ok/disabled, controles customizados acessíveis e busca.

Inputs & estados

Usamos para enviar o recibo do pedido.
CEP inválido, verifique os dígitos.
Disponível.
Nenhum cupom ativo.

Busca

Checkbox, radio, toggle & slider

Notificações
Componentes

Feedback

Alertas com role semântico, avatares, progresso, skeletons, spinner e tooltip.

Alertas

Pedido confirmado com sucesso.
Novo recurso disponível na loja.

Avatares & grupo

M
A
T
C
M
A
T
+5

Progresso, spinner & tooltip

Carregando
Calculado no checkout

Skeleton (loading)

Toast (live region)

O toast aparece ao copiar qualquer token de cor (clique numa amostra acima). Usa role="status" + aria-live="polite" para anunciar a confirmação a leitores de tela.

Componentes

Overlays

Modal com focus-trap, dropdown menu e accordion. Fecham com Esc, click-outside e devolvem foco ao gatilho.

Modal & dropdown

Accordion

Componentes

Dados

Tabela, lista e cards de KPI para painéis e relatórios da loja.

KPIs

R$ 48.290
Vendas no mês
↑ 12%
1.204
Pedidos
↑ 8%
R$ 40
Ticket médio
↓ 3%
3,2%
Conversão
↑ 0,4pp

Tabela

Pedidos recentes
PedidoClienteStatusValor
#10293Ana SouzaPagoR$ 149,00
#10294Bruno LimaPendenteR$ 89,90
#10295Carla DiasEnviadoR$ 312,50
#10296Diego ReisCanceladoR$ 59,00

Lista

A
Ana SouzaÚltimo pedido há 2 dias · R$ 149,00
B
Bruno LimaCarrinho abandonado · R$ 89,90
C
Carla DiasCliente recorrente · 14 pedidos
Aplicação

Banner & CTA

Composições prontas combinando tokens, tipografia e componentes em peças de campanha.

Oferta limitada

Black Friday Match: até 50% OFF

Os melhores produtos digitais com o maior desconto do ano. Só nesta semana, enquanto durarem os estoques.

Pronto para vender mais? Comece grátis hoje.
Fale no WhatsApp
Copiado!