Marca

Sistema visual da THM.

Princípios, logo, paleta, tipografia e componentes que dão forma à THM Saúde. 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

THM Saúde

Horizontal

THM Saúde

Vertical

THM Saúde

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.

Receita em minutos..display-1

Hero principal. Reservado para a primeira dobra.

Receita em minutos..display-2

Títulos de seção em landing pages.

Receita em minutos..display-3

Subtítulos e cards de destaque.

Receita em minutos..lead

Parágrafos de abertura. Acompanha um display.

Receita em minutos..eyebrow

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

BrandMais popularNeutro

Input

E-mail

Card de destaque

Recurso

Clínico geral 24h

Consultas por vídeo com médicos registrados, a qualquer momento.

Dispositivos de marca

Quatro recursos, um sotaque.

É com eles que a marca se distingue de qualquer outra healthtech azul. Use no máximo dois por peça.

Céu calmo

Atmosfera desfocada em teal, sky e um toque de pêssego. Fundo padrão das peças de confiança — acolhimento, não clínica fria. Classe .thm-ceu.

Pulso

Matriz de pontos: sinal de vídeo e sinal vital ao mesmo tempo. Só como textura leve. Classe .thm-pulso.

Selo

Carimbo circular com os três compromissos: médicos com CRM ativo · conexão criptografada · privacidade. Gira devagar; para com prefers-reduced-motion. Componente <Selo /> e arquivo /brand/selo.svg.

Tokens

--thm-teal:#0E7FA1; --thm-teal-700:#0A6583; --thm-teal-900:#07465C;
--thm-sky:#BDEDFB; --thm-tint:#E6F3F9; --thm-peach:#F6C9A9;
--thm-ink:#081E29; --thm-slate:#4A5E68; --thm-line:#CBD6DB;
--thm-mist:#EDF1F2; --thm-surface:#F6F9FA;
display: Newsreader 600 (itálico 500 na ênfase)
texto/UI: Hanken Grotesk 400–600
eyebrows: JetBrains Mono, caixa alta, tracking .22em

Voz e tom