Voltar ao site

Marca e design system

MarketGov Express

A identidade nasce do Canal de Compras Brasil: o mesmo anil, o mesmo amarelo, o mesmo quadrado reto no símbolo, a mesma Montserrat no nome e as mesmas fontes na interface (Space Grotesk e Inter). A diferença é a inversão do varejo: aqui o amarelo domina a tela e o anil age.

Símbolo. Monograma M: quadrado reto anil, como o do Canal de Compras, com o M inclinado e três rastros amarelos de velocidade. É o carrinho andando: o Express.

Família. Lado a lado com o Canal de Compras: mesma cor, mesmo quadrado reto. Nome em Montserrat: MARKET fino e GOV pesado na mesma linha, com EXPRESS numa tag reta embaixo, letras espaçadas e 60% da largura do nome, como o BRASIL do Canal de Compras.

Uso. Símbolo sozinho a partir de 16 px (ícone de aba). Logotipo completo a partir de 120 px de largura. Área livre em volta: um quarto da altura do símbolo. Não girar, não contornar, não trocar as cores fora das três versões acima.

Cores

Amarelo Predominante: topo, faixas de campanha, destaques

  • amarelo-50
  • amarelo-100
  • amarelo-200
  • amarelo-300
  • amarelo-400
  • amarelo-500
  • amarelo-600
  • amarelo-700
  • amarelo-800
  • amarelo-900

Anil Secundária: ação, preço, texto de marca, blocos premium

  • anil-50
  • anil-100
  • anil-200
  • anil-300
  • anil-400
  • anil-500
  • anil-600
  • anil-700
  • anil-800
  • anil-900

Neutros Fundo da página, cartões, textos e linhas

  • cinza-0
  • cinza-25
  • cinza-50
  • cinza-100
  • cinza-200
  • cinza-300
  • cinza-400
  • cinza-500
  • cinza-600
  • cinza-700
  • cinza-800
  • cinza-900

  • Verde --verde-600
    Economia, entrega, prazo cumprido

  • Laranja --laranja-700
    Selo "mais comprado"

  • Noite --anil-900
    Rodapé, faixas escuras, versão premium

Contraste

  • AaAnil sobre amarelo8,5 : 1
  • AaAnil sobre branco12,6 : 1
  • AaAmarelo sobre noite13,0 : 1
  • AaVerde sobre branco5,5 : 1
  • AaSelo verde (chip)4,9 : 1
  • AaBranco sobre laranja5,2 : 1
  • AaTexto secundário6,3 : 1

Tipografia

As mesmas fontes do Canal de Compras: Space Grotesk nos títulos e preços, Inter no texto e na interface, JetBrains Mono em códigos e hashes. Montserrat fica só no nome do logotipo.

  • Título de páginaCompras públicas na velocidade do e-commerceSpace Grotesk 700 · 48/1,05
  • Título de seçãoSeis passos, do catálogo ao pagamentoSpace Grotesk 700 · 32/1,15
  • Título de cartãoRanking auditávelSpace Grotesk 700 · 20/1,25
  • SobretítuloDECRETO 13.106/2026Space Grotesk 700 · 12 · caixa alta · espaçamento 0,14em
  • TextoO preço vem das ofertas, e as ofertas aptas são ordenadas por regra pública e versionada.Inter 400 · 16/1,6
  • PreçoR$ 31,50Inter 400 · 26 · números tabulares

Componentes

Botões

PrimárioAmareloContorno
Sobre o escuroVidro

Selos de marca (só na vitrine e no cartão de produto)

1º mais compradoMEAbaixo da referênciaPrévia do catálogo

Busca

Buscar itens do catálogo, categorias ou fornecedores

Carregando: sempre esqueleto, nunca spinner

Sem foto: ícone "Imagem não disponível", na moldura da foto (nada de imagem por IA)

Cartão de oferta

Componentes dos painéis

Peças de src/components/ui usadas nos painéis do comprador, do fornecedor e do administrador. Cada uma traz o jeito de usar.

Botao

<Botao variante="contorno" icone={Download} tamanho="p">Exportar</Botao>

BotaoMenu e Menu

<BotaoMenu rotulo="Mais ações" modo="seta" opcoes={[{ rotulo: "Duplicar", icone: Copy, aoClicar }]} />

Chip

RecebidoAguardando confirmaçãoConfirmadoEntregueRecusadoCanceladoRecebedorSituação: em aberto
<Chip tom="espera">Aguardando confirmação</Chip>

BarraLista

<BarraLista aoBuscar={setBusca} filtros={2} aoFiltros={abrir} ordens={ordens} ordem={ordem} aoOrdenar={setOrdem} />

.cartao e .acoes

Pedidos em aberto12 pedidos aguardando a Autoridade
<div className="cartao"> ... <div className="acoes">botões</div></div>

Voz e escrita

  • Direto e em português do dia a dia. "Informe seu município", não "Parametrize sua localidade".
  • A lei com endereço. Toda regra citada leva o artigo: "recebimento provisório em até 2 dias úteis (art. 22)".
  • Nunca prometer o que é do órgão. Quem paga é o comprador; a plataforma controla prazos e mostra a trilha.
  • Plataforma privada, dito com clareza. O MarketGov Express não é o Sicx nem é operado pelo governo federal.
  • Sem travessão. Dois-pontos, vírgula ou ponto no lugar. Campo sem valor mostra "Não informado".