Mini Guia de Identidade Visual

ODO

Documento de referência da marca ODO, app de histórico e controle de manutenção. É o padrão visual a seguir em telas, materiais e comunicações daqui pra frente.

01

Logo

A marca nasce de uma ideia única: o O é um mostrador de velocímetro. Anel aberto na base como o bezel de um instrumento, ponteiro firme em 2 horas, a posição clássica do volante. O ponteiro subindo comunica o que vem a seguir, que é a função central do app, prever a próxima manutenção. O lockup horizontal é a assinatura principal. A tagline DRIVE entra em mono, ecoando o nome completo, Odo Drive.

Ícone do app
Símbolo isolado
Lockup horizontal, assinatura principal
DRIVE
Lockup com tagline, para usos institucionais

Fazer

Aplicar sobre carvão ou fundo escuro, usar o âmbar exato, manter respiro mínimo ao redor igual a metade da altura do símbolo. Tamanho mínimo do símbolo, 24px.

Não fazer

Girar o ponteiro para fora das 2 horas, fechar o anel, recolorir, aplicar sombra ou brilho, usar sobre fundo claro sem contraste. Em 16px usar a versão dedicada do favicon.

02

Cor

Dark mode nativo. O carvão é o ambiente, o âmbar é o único acento. Paleta enxuta de propósito. Toque em qualquer amostra para copiar o hex.

Base e superfícies
Fundo
--odo-bg
#141416
Superfície
--odo-surface
#1C1C1E
Superfície elevada
--odo-surface-2
#26262A
Borda
--odo-border
#323237
Texto
Primário
--odo-text
#F4F4F5
Secundário
--odo-text-secondary
#A1A1AA
Discreto
--odo-text-muted
#6B6B72
Marca
Âmbar
--odo-amber
#F5A623
Âmbar hover
--odo-amber-hover
#FFB94A
Âmbar pressed
--odo-amber-pressed
#D88C12
Âmbar tint
--odo-amber-soft
rgba 245.166.35 / .12
03

Tipografia

Duas famílias, cada uma com um trabalho. Uma sans geométrica que conversa com os O circulares do logo, e uma monoespaçada para os números, que reforça a leitura de odômetro.

Sans · interface e títulos
Sora
Toda a interface, títulos, botões e textos de leitura.
Aa Bb Cc
Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700
Mono · números e datas
JetBrains Mono
Quilometragem, datas, custos e qualquer leitura de odômetro.
128.450 km
0 1 2 3 4 5 6 7 8 9  ·  24/05/2026  ·  R$ 320,00
Regra simples: se é número que o usuário lê como medição, é mono. Todo o resto é Sora.
04

Ícones

Biblioteca única em toda a interface, aplicada na cor e no traço do ODO. A biblioteca é uma ferramenta neutra, o que faz a identidade é a cor e o peso do traço.

Biblioteca
Lucide. Import nomeado em JSX, SVG inline em HTML.
Stroke
1.75
Tamanhos
16 inline · 20 botões e menu · 24 seções · 32+ empty states
Cor padrão
Texto secundário #A1A1AA
Cor ativa
Âmbar #F5A623
Cor desabilitada
Discreto #6B6B72
Exceção, veículos. No cadastro e nos cards de veículo, o ícone genérico dá lugar à marca da montadora, sempre em versão monocromática para não brigar com o âmbar. Vale só para identificar o veículo. Todo o resto da interface continua Lucide.
05

Cor de status

A sacada da marca: o âmbar é o acento e também o estado de revisão chegando, exatamente como a luz âmbar de um painel. O status de manutenção fala a língua do painel do carro.

Em dia

Manutenção dentro do prazo, sem ação necessária.

--odo-ok · #3FB97A

Revisão próxima

Serviço se aproximando. Atenção, igual à luz âmbar do painel.

--odo-due · #F5A623

Atrasada

Prazo ou quilometragem ultrapassados. Ação imediata.

--odo-overdue · #E5544B
06

Tom de voz

Preciso, direto, calmo. O ODO fala no domínio do veículo e da manutenção, nunca em linguagem de marketing. Frases curtas. Número e data sempre claros.

EvitarTudo certo!
UsarCruze em dia. Próxima troca de óleo em 2.300 km.
EvitarAlgo deu errado.
UsarNão foi possível salvar o serviço. Verifique a quilometragem informada.
EvitarCarregando...
UsarCalculando a próxima revisão...