Fundação do Design System

Amostra tipográfica

Barlow nos títulos, Source Sans 3 no corpo, IBM Plex Mono nos dados.

rotulo11px / 600 / 0.09emSALDO RESTANTE

legenda13px / 400Coleta em 27/08/2026, janela 07h às 11h

corpo-tabela15px / 400Transportes Serra Azul — 18 veículos

corpo17px / 400Congonhas/MG para Betim/MG, minério de ferro

titulo-bloco20px / 600Propostas recebidas

titulo-secao24px / 600Negociação nível 1

titulo-tela30px / 700Fretes disponíveis

Dígitos tabulares alinhados à direita

Rota	Tonelagem	Saldo	R$ / t
Congonhas/MG → Betim/MG	500,0 t	170,0 t	R$ 70,00
Belo Horizonte/MG → Sete Lagoas/MG	200,0 t	30,0 t	R$ 58,00
Itabira/MG → Vitória/ES	1.200,0 t	1.200,0 t	R$ 94,00
Uberaba/MG → Ribeirão Preto/SP	340,0 t	80,0 t	R$ 63,50

Paleta

Cores de marca separadas das cores de estado operacional.

Marca

--verde-marca#084D2B

Cor principal, botão primário

--verde-escuro#063D22

Hover e pressionado

--verde-vivo#0F7A45

Destaque, links, sucesso

--verde-tint#E2EDE5

Fundo suave de destaque

--verde-profundo#092318

Fundo escuro de marca

Neutros (viés esverdeado)

--ink#14201A

Texto principal

--ink-2#4A5751

Texto secundário

--ink-3#77837C

Rótulos e apoio

--linha#D6DDD6

Bordas e divisores

--superficie#FFFFFF

Cartões e tabelas

--superficie-2#EAEFE8

Cabeçalho de tabela, faixa

--fundo#F5F7F4

Fundo da página

Estados operacionais

--atencao#B47500

A caminho da coleta, prazo apertado

--atencao-tint#FBF0D6

Fundo de aviso de atenção

--critico#A32017

Carreta parada, falha fiscal

--critico-tint#FAE7E4

Fundo de aviso crítico

--info#1E6E7E

Carregando, informativo

--info-tint#DCEDF0

Fundo informativo

Chips de estado da carga

Cor + rótulo escrito + indicador de forma. Distinguíveis em escala de cinza.

Padrão

Aguardando designaçãoA caminho da coletaCarregandoEm trânsitoParadoBasculadoSem sinal

Compacto (uso em tabela, linha de 40px)

Placa	Motorista	Capacidade	Estado da carga
RTP2A34	José Aparecido da Silva	30,0 t	Aguardando designação
MGX1B27	Sebastião Ferreira Lima	40,0 t	A caminho da coleta
QPB7C09	Marcos Vinícius Andrade	50,0 t	Carregando
RTP2A34	José Aparecido da Silva	30,0 t	Em trânsito
MGX1B27	Sebastião Ferreira Lima	40,0 t	Parado
QPB7C09	Marcos Vinícius Andrade	50,0 t	Basculado
RTP2A34	José Aparecido da Silva	30,0 t	Sem sinal

Espaçamento, raio e sombra

Múltiplos de 4px. Sombra máxima de 1px.

Escala de espaçamento

4px

8px

12px

16px

24px

32px

48px

64px

Raio e sombra

Chip · 2px

Campo / botão · 4px

Cartão · 6px

Sombra única: 0 1px 2px rgba(20,32,26,0.06). Nada de sombra pesada, gradiente roxo-azul ou glassmorphism.