Ajustes de design

Mexa no design e veja na hora

Tudo o que você mudar aqui vale na hora em todas as telas — é só abrir outra aba do sistema para conferir. Fica salvo no seu navegador, não afeta ninguém. Quando gostar do resultado, clique em Copiar CSS e mande para a equipe fixar no projeto.

As cores são editadas para o modo claro. Use Modo escuro no topo para ajustar o outro também.

Tipografia

Fonte dos textos

Vale para tabelas, formulários e números.

Fonte dos títulos

Só os títulos de tela e de bloco.

Tamanho do título

Títulos de tela, bloco e números em destaque. 100% é o tamanho atual.

100%

Tamanho dos secundários

Parágrafos, legendas e descrições (texto secundário).

100%

Textos de apoio

Rótulos, captions e legendas menores (texto de apoio).

100%

Forma e respiro

Arredondamento

0px deixa tudo reto e industrial. 12px deixa bordas arredondadas.

4px

Densidade

Aumenta ou reduz todos os espaçamentos de uma vez.

100%

Cores da marca

Verde da marcaBotão principal, filete ativo, logo#084d2bVerde escuroBotão principal quando o mouse passa por cima#063d22Verde vivoDestaque, links, valores positivos#0f7a45Verde claro de fundoFundo de aviso positivo e linha selecionada#e2ede5Verde profundoMenu lateral e faixa do topo da landing#092318

Cores de texto

Texto principalTítulos e números em destaque#14201aTexto secundárioParágrafos e descrições#3f4b45Texto de apoioRótulos e legendas — o que a revisão apontou como cansativo#5f6b64

Fundos e linhas

Fundo dos cartõesCartões, tabelas e campos#ffffffFundo alternativoCabeçalho de tabela e blocos recuados#eaefe8Fundo da páginaA cor por trás de tudo#f5f7f4Linha e bordaDivisórias de tabela e contorno de campo#d6ddd6

Cores de estado

AtençãoPrazo apertado, pendência, documento faltando#8a5a00Fundo de atençãoFundo do aviso âmbar#fbf0d6CríticoErro, documento vencido, recusa#a32017Fundo críticoFundo do aviso vermelho#fae7e4InformaçãoAviso neutro, carga em trânsito#1e6e7eFundo de informaçãoFundo do aviso azul#dcedf0

Leitura das cores de texto

A regra de acessibilidade pede 4,5:1 sobre o fundo do cartão. Abaixo disso a leitura cansa — foi o que a revisão apontou.

Texto principal — texto de exemplo16.78:1 · passa
Texto secundário — texto de exemplo9.12:1 · passa
Texto de apoio — texto de exemplo5.56:1 · passa
Verde vivo — texto de exemplo5.40:1 · passa

Amostra da operação

As mesmas peças das telas reais, para julgar no contexto.

Tonelagem ganha

900 t

a designar: 90 t

Documento vencido

CNH fora da validade

Saldo de tonelagem

Total

2.400 t

Designada

1.620 t

Basculada

780 t

Saldo a designar

780 t

Em trânsitoCarregandoParadoBasculado

Viagem	Carreteiro	Cavalo	Tonelagem	Valor
VG-10231	Josué Ferreira	QAB-7C21	33,4 t	R$ 2.016,00
VG-10232	Marlon Ribeiro	RQA-1J55	28,0 t	R$ 1.764,00
VG-10237	Wesley Damasceno	TGA-9R12	35,0 t	R$ 2.205,00

Prazo apertado

Coleta em 2h · carreta ainda não designada.

CSS gerado

/* Tokens gerados pela tela de ajustes do FreteForte */
@theme inline {
  --font-sans: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Barlow", "Source Sans 3", sans-serif;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
}

:root {
  --escala-titulo: 1;
  --escala-secundario: 1;
  --escala-apoio: 1;
  --spacing: 4px;
  --verde-marca: #084d2b;
  --verde-escuro: #063d22;
  --verde-vivo: #0f7a45;
  --verde-tint: #e2ede5;
  --verde-profundo: #092318;
  --ink: #14201a;
  --ink-2: #3f4b45;
  --ink-3: #5f6b64;
  --superficie: #ffffff;
  --superficie-2: #eaefe8;
  --fundo: #f5f7f4;
  --linha: #d6ddd6;
  --atencao: #8a5a00;
  --atencao-tint: #fbf0d6;
  --critico: #a32017;
  --critico-tint: #fae7e4;
  --info: #1e6e7e;
  --info-tint: #dcedf0;
}

.dark {
  --verde-marca: #4fb37a;
  --verde-escuro: #3f9a66;
  --verde-vivo: #6cc793;
  --verde-tint: #16301f;
  --verde-profundo: #071a12;
  --ink: #e8eee9;
  --ink-2: #b8c5bc;
  --ink-3: #93a29a;
  --superficie: #121d17;
  --superficie-2: #1b2a22;
  --fundo: #0b1410;
  --linha: #26362c;
  --atencao: #e0ae4c;
  --atencao-tint: #33280f;
  --critico: #ee8b80;
  --critico-tint: #3a1a16;
  --info: #5aa7b8;
  --info-tint: #102a30;
}

/* body: calc(17px * var(--escala-secundario)) · ver regras de escala em styles.css */