Marca
Sistema visual da THM.
Princípios, logo, paleta, tipografia e componentes que dão forma à THM Médicos On-line. Use como referência para qualquer comunicação interna ou externa.
Princípios
Como a THM se comunica.
Quatro orientações que valem para qualquer ponto de contato — produto, suporte, redes ou material impresso.
Calma antes de urgência
Healthtech é vulnerabilidade. Cada palavra deve baixar a temperatura — nunca subir.
Autoridade médica, voz humana
Soa como um(a) profissional que conhece o paciente: técnico onde precisa, caloroso sempre.
Cada detalhe importa
Tipografia, espaçamento e movimento são parte do cuidado. Detalhe imperfeito quebra confiança.
Sem hype, sem jargão
Nada de "revolucionário", "incrível", "best-in-class". Português brasileiro natural.
Logo
O símbolo e o wordmark.
O símbolo é um quadrado arredondado com gradiente navy. Combina formas tipográficas de T (com serifa horizontal) e M (com vértice elevado). Sempre apareça com respiração — nunca tocando outros elementos.
Símbolo
Horizontal
Vertical
Faça
- Deixe respiração de pelo menos a altura do “T” do wordmark em todos os lados.
- Use o gradiente brand sobre fundos claros; versão branca sobre fundos navy ou imagens escuras.
- Mantenha proporções originais — escale por igual.
Não faça
- Não troque as cores do gradiente nem aplique sombras decorativas.
- Não rotacione, distorça ou recorte o símbolo.
- Não use sobre fundos com baixo contraste — escolha a versão correta para o fundo.
Paleta
Cor como acento, não como estrutura.
O navy ancora a marca. O verde confirma. Tons de ink dão o esqueleto. Use poucos pesos por tela e mantenha a hierarquia tipográfica fazendo o trabalho pesado.
Brand · Navy
brand-50
#f0f5fc
Fundos suaves, hover de superfícies claras.
brand-100
#dbe7f7
Hover de seleção, bordas sutis.
brand-200
#b8cdef
Bordas e divisores em destaque.
brand-300
#8aaee0
Estados dark — texto, links.
brand-400
#5b8cce
brand-500
#1e5ac8
CTAs primários, foco, ações.
brand-600
#174ab0
Hover de CTAs.
brand-700
#143d96
Texto sobre fundos brand-50.
brand-800
#0b3d91
Tom institucional, theme-color.
brand-900
#082d6f
brand-950
#04183b
Fundos escuros sólidos.
Accent · Verde
accent-50
#ecfdf5
accent-100
#d1fae5
accent-300
#6ee7b7
accent-500
#10b981
Sucesso, confirmações.
accent-600
#059669
Hover sobre accent-500.
accent-700
#047857
Ink · Neutros
ink-50
#fafaf9
ink-100
#f5f5f4
ink-300
#d6d3d1
ink-500
#78716c
Texto secundário.
ink-700
#44403c
ink-900
#1c1917
ink-950
#0c0a09
Texto primário em light.
Tipografia
Inter e Fraunces.
Inter, sans-serif geométrica clara, faz o corpo. Fraunces, serif moderna com opsz dinâmico, faz os destaques. Juntas: autoridade médica com calor humano.
Hero principal. Reservado para a primeira dobra.
Títulos de seção em landing pages.
Subtítulos e cards de destaque.
Parágrafos de abertura. Acompanha um display.
Etiqueta acima de títulos. Sempre maiúscula.
Sans · Inter
Aa Bb Cc 0–9
Pesos 400, 500, 600, 700. Body, UI, navegação.
Display · Fraunces
Aa Bb Cc 0–9
Pesos 500, 600. Hero, headings de destaque, eyebrow.
Componentes
Blocos básicos.
Padronizados em globals.css. Use as utilities — não crie variações soltas.
Botões
Badges
Input
Card de destaque
Recurso
Clínico geral 24h
Consultas por vídeo com médicos registrados, a qualquer momento.
Voz e tom
O som da THM.
Calma, técnica quando precisa, sempre humana. Pequenas decisões verbais constroem confiança.
Faça
Sua consulta foi marcada.
Evite
Consulta agendada!
Sem exclamações em estados normais. O ponto final transmite calma.
Faça
Médicos de plantão 24h por dia.
Evite
Revolução na sua saúde!
Promessa direta e verificável > slogan vazio.
Faça
Receita, atestado e orientações em minutos.
Evite
Tudo o que você precisa, num só lugar!
Específico > genérico. Lista concreta gera confiança.
Faça
Aguarde o médico entrar na sala.
Evite
Aguardando…
Frases completas > reticências passivas.
Downloads
Assets prontos para uso.
SVG vetorial em todas as versões. Para integrações ou impressão, fale com o suporte.
Símbolo · padrão
Baixar SVG
Símbolo · fundo escuro
Baixar SVG
Horizontal · padrão
Baixar SVG
Horizontal · fundo escuro
Baixar SVG
Vertical · padrão
Baixar SVG
Precisa de algo específico (PNG em alta, versão para impressão, copies aprovadas)? Acessar conta ou enviar mensagem.