Começar

Marca

Duas peças vetorizadas do logotipo oficial, num sistema de coordenadas só. Marca única Hiperclini, sem sub-marca de IA: o agente é um recurso do produto, não um produto ao lado.

src/components/hiperclini-mark.tsxpublic/marca/*vetorizado do PNG oficial · 20/08/2026

As duas peças

<HipercliniMark> é só o SÍMBOLO — o arco aberto (o “C” de clínica que não fecha) com o ponto no vão. <HipercliniLogo> é a TRAVA inteira: símbolo mais a palavra hiperclini em caixa baixa. O vão entre os dois é do desenho, nunca de um gap de flex.

símbolo · viewBox 0 0 271 271 · o arco É a moldura (centro 135,5 · raio 135,5), então nasce opticamente centrado

trava · viewBox 0 0 1236 271 · proporção 4,56:1 — mede-se pela ALTURA, a largura sai sozinha

Qual das duas, e onde

A pergunta não é de tamanho — é de QUEM está nomeado ao lado.

Lugar	Peça	Por quê
Sidebar do app, topbar do celular	<HipercliniMark size={26} />	O nome ao lado é o da CLÍNICA (“Clínica Vida Plena”). A trava ali diria o nosso nome duas vezes.
Rodapé, telas de acesso, e-mail, este guia	<HipercliniLogo />	O nome ali é o nosso — vai a trava, com a palavra dentro do SVG.
Favicon, ícone de app, avatar	símbolo (public/marca/hiperclini-simbolo-512.png)	Quadrado pequeno: a palavra não sobreviveria à redução.
Estado vazio grande, capa de apresentação	símbolo 40px+	O símbolo aguenta escala grande sem virar decoração de texto.

Fundos e a variante mono

A marca não tem variante por fundo — o arco é sempre o verde do logotipo e o resto sai de currentColor. O que muda de um contexto pro outro é a COR DO TEXTO em volta. A única exceção é mono.

Fundo claro

O padrão. O ponto e a palavra herdam a cor do texto.

Fundo escuro

Mesmo desenho: o currentColor branco já resolve.

Sobre a cor da ação

mono — verde sobre verde some. Aqui o arco vira branco.

Impresso / uma tinta

mono — carimbo, fax, papel timbrado a uma cor.

Prop	Tipo	Padrão	O que faz
size / height	number	26	O símbolo mede pelo lado (`size`); a trava mede pela `height` e a largura vem da proporção.
mono	boolean	false	O arco larga o verde e vira currentColor também: uma tinta só, pro impresso e pra cima da própria cor de ação.
title	string \| null	"Hiperclini"	Vira o nome acessível do SVG. `null` = decorativo — use quando o nome já está escrito ao lado em texto de verdade, senão o leitor de tela fala duas vezes.

Tamanhos e área de respiro

Os tamanhos em uso no app, e o piso abaixo do qual o desenho deixa de se ler.

18 (rodapé fino) · 20 (barra do guia) · 26 (sidebar, topbar) · 44 (vitrine) · 64+ (vazio grande)

Medida	Valor	Nota
Símbolo — mínimo digital	16px	Abaixo disso o vão do arco fecha no antialiasing.
Trava — mínimo digital	14px de altura	≈ 64px de largura. Menos que isso, a palavra vira mancha.
Área de respiro	≥ metade da altura do símbolo	Nada de texto, borda ou ícone dentro dessa faixa em volta.
Cor do arco	#16a34a congelado	Constante no SVG, nunca var(--brand) — ver abaixo.

Os três verdes

Mesmos hex, donos diferentes. Confundir é o erro mais fácil de cometer aqui.

Verde do logotipo

#16a34a · congelado no SVG

Virou o mesmo valor da ação em 20/08/2026 — e ainda assim não pode virar var(--brand): o token vira #4ade80 nos três temas escuros e #2563eb no Azul clínico, e logotipo que troca de cor com o tema deixa de ser logotipo. Os dois começam iguais e seguem vidas separadas.

Verde da ação

--brand · veste o tema

É o CTA, o link, o item ativo, a nav selecionada. Este muda com o tema — é o papel, não o matiz. Troque o tema no topo desta página e veja este quadrado acompanhar enquanto o do logotipo fica onde está.

Verde do WhatsApp

#25D366 · marca de terceiro

Aparece só no glifo do canal, junto com a textura do chat e o ✓✓ de lida (--tick-read). É do CANAL, nunca cor de ação ou de estado — por isso o ✓✓ continua azul mesmo num app inteiro verde.

Fora do app, a marca é o verde

A regra mais curta desta página, e a que mais se quebra por engano: o produto tem cinco peles; a MARCA tem uma.

NuncaTema escuro é do modo escuro do app. Ponto final.

Landing page, apresentação, proposta, e-mail, post, anúncio, impresso, papelaria, slide, vídeo, capa, ícone de loja — todo material da Hiperclini que não é a tela do produto nasce no tema Claro: verde da marca sobre superfície branca, neutros da escala ink.

Os três temas escuros (Grafite, Verde profundo, Ardósia) existem por uma razão só: dar modo escuro a quem passa o dia dentro do app. Eles não são uma versão da marca e não vão pra peça nenhuma. O Azul clínico segue a mesma trava por outro motivo: ele é a preferência de uma CLÍNICA dentro do produto, não uma cor da Hiperclini.

Peça	Veste	Nota
A tela do app	a pele que a pessoa escolheu (5)	Único lugar onde escuro e azul existem.
Landing page, site, blog	Claro	Verde da marca sobre branco. Seção escura decorativa é decisão de layout, não de tema — e usa a ilha ink-950, não um data-theme.
E-mail transacional	Claro	Faixa verde no topo, losango ◊ como separador. Cliente de e-mail não herda CSS do app de qualquer jeito.
Apresentação, proposta, PDF	Claro	Fundo branco, verde só como sinal.
Post, anúncio, social	Claro	A marca precisa ser reconhecível ao lado de qualquer outra na mesma linha do tempo.
Impresso e papelaria	Claro, ou mono	Uma tinta só quando o processo pedir — a variante mono existe pra isso.
Print de tela em material de venda	Claro	Mostrar o app no escuro num anúncio vende a pele errada como se fosse a marca.

E o inverso também vale: o logotipo não veste tema. O arco é #16a34a congelado no SVG justamente pra isso — dentro do app escuro, quem clareia é a ação (--brand), não a marca.

O que nunca se faz com a marca

Cada item aqui já apareceu em algum rascunho e foi recusado.

Sim

A palavra vem DENTRO do SVG — é logotipo, não texto em Inter.

Não

Hiperclini

Nunca reescrever o nome em Inter ao lado do símbolo — nem improvisar letra num quadrado, nem usar emoji como logo.

Proibido	Por quê
Redesenhar o arco “no olho”	O traçado bate com o PNG original pixel a pixel. Precisou de arte fora do app? Os arquivos estão em public/marca/.
Girar, inclinar, espelhar ou esticar	A proporção 4,56:1 é do desenho. Ajuste a altura e deixe a largura seguir.
Pôr a marca sobre foto ou textura	O ponto e a palavra são currentColor: sobre imagem eles perdem o contraste e o arco sozinho vira ruído.
Trocar a cor do arco por um token	Logotipo que veste tema deixa de ser logotipo. Use mono quando o verde não serve.
Criar uma sub-marca “Hiperclini IA”	Marca única. A IA tem COR própria (--ia-*) e um ícone (Sparkles) — não um logotipo próprio.

A marca escrita

O nome e a tagline também são peças da marca, e ambos têm forma canônica.

BRAND_NAME · Hiperclini

BRAND_TAGLINE · sua clínica no seu melhor

BRAND_TAGLINE_LEAD · Sua clínica no seu melhor

lib/brand.ts — fonte única: as duas strings aparecem em lugares que não podem se importar entre si

Minúscula é a forma canônica

A tagline nasce correndo dentro de uma frase (e-mail, prosa). A versão com capitular é DERIVADA, não digitada de novo — senão as duas divergem no dia em que a frase mudar. Na aba do navegador o separador é o ponto médio, não o losango: o ◊ é assinatura da copy dos e-mails, e repetido em toda tela vira ruído.

NotaO losango ◊ é do e-mail

Nos e-mails transacionais o separador da assinatura é o losango, a faixa do topo é verde e não existe travessão em lugar nenhum do texto. O GoTrue (os e-mails que o Supabase Auth manda por conta própria) NÃO herda esse padrão — quem manda pelo Resend herda.

src/lib/brand.ts

export const BRAND_NAME = "Hiperclini";
export const BRAND_TAGLINE = "sua clínica no seu melhor";
export const BRAND_TAGLINE_LEAD =
  BRAND_TAGLINE[0].toUpperCase() + BRAND_TAGLINE.slice(1);

Arquivos

Pra tudo que não é o app — apresentação, papel, e-mail, perfil de rede.

Arquivo	Uso
public/marca/hiperclini-logo.svg	Trava colorida, vetor — o padrão pra qualquer peça digital.
public/marca/hiperclini-logo-branco.svg	Trava com a palavra branca, pro fundo escuro.
public/marca/hiperclini-logo-mono-branco.svg	Trava inteira em branco, uma tinta só.
public/marca/hiperclini-simbolo.svg	Símbolo colorido.
public/marca/hiperclini-simbolo-512.png	Símbolo em bitmap 512px — favicon, ícone de app, avatar.
public/marca/email-logo.png	A trava do cabeçalho dos e-mails (cliente de e-mail não renderiza SVG confiável).

No app, nunca importe estes arquivos: use os componentes. O SVG inline é o que deixa o ponto e a palavra herdarem currentColor — um <img> ficaria preto sobre o rodapé escuro.