CarLog
Design System · v1.0 · Jun 2026
Sistema de design
A linguagem visual do ecossistema CarLog — base Material 3 com superfícies neutras quentes, três acentos por perfil (Cliente, Oficina, Colaborador) e tipografia Inter + JetBrains Mono. Esta página é a fonte única de verdade para cor, tipo, espaçamento e componentes.
01 · Marca
CarLog
Área de proteção = altura do documento
Ícone de app — fundos válidos
O símbolo tem áreas vazadas (janelas/grade); o fundo aparece através delas. Use sobre ink, verde escuro, creme ou branco. Nunca sobre fotos ou cores vibrantes.
Ink
Verde
Creme
Branco
02 · Cor
Acentos por perfil
Cliente
#d65a31
container · #ffe9df
Oficina
#1d4ed8
container · #dbeafe
Colaborador
#15803d
container · #dcfce7
Neutros & superfícies — base Material 3, tom quente
on-surface
#1a1a1a
on-surf-var
#65656b
outline
#d8d8d6
outline-var
#e8e8e6
surf-container
#f4f4f3
surface
#ffffff
Semânticas & avaliação
Sucesso
#2d6a4f
Atenção
#b08900
Erro
#ba1a1a
Avaliação
#f59e0b
03 · Tipografia
Display & corpo
Inter
300 · 400 · 500 · 600 · 700 · 800
Histórico do seu carro, sempre com você.
Labels, dados & código
JetBrains
400 · 500 · 600
RN-031 · ABC-1D23 · 45.200 km
Display · 52/800
Prontuário
Título · 28/600
Seção de telas
Subtítulo · 16/600
Cabeçalho de card
Corpo · 14/400
Texto de leitura e descrições no app.
Label · 11/500 mono
Eyebrow · meta · estados
04 · Espaço & forma
Raios
8px · chips internos
14px · cards
20px · superfícies
999px · pills/FAB
Escala de espaço
4 · 8 · 12 · 16
24 · gutter de grid
40 · entre seções
64 · marco de página
Grade base de 4px. Conteúdo a 1180px máx.
Elevação
0 · borda 1px
1 · FAB/cards flutuantes
2 · modais/sheets
05 · Componentes
Botões
Campos de texto
joao@email.com
••••••••focus
Placa inválida
Chips & filtros
SelecionadoPadrãoOficinaColaboradorRN-031
Avaliação por estrelas
★★★★★★★★★★
CR
Carlos R.
Colaborador
Faixas de status
Em teste · 23 dias
Já pode avaliar.
Finalizado
Serviço avaliado e confirmado.
Barra de navegação
Início
Garagem
Alertas
Perfil
Estes tokens espelham exatamente o protótipo Prontuário do Veículo — Spec. Ao criar telas novas, puxe daqui — não invente cor, raio ou tipo fora desta página.