Brandbook do Horizontes Hub

A marca que coloca
horizontes em movimento.

Cores, tipografia, componentes, imagem e voz do Horizontes Hub, para agências, desenvolvedores e fornecedores. A fonte primária é o site oficial, com as cores como aparecem na tela.

Explore a marca Veja o que mudou

descubra a marca

Princípios da marca

Nascemos da experiência da Unimed-BH e da convivência com desafios reais de médicos, clientes, empresas e profissionais de saúde. A marca traduz essa origem em uma linguagem editorial, escura e precisa, com um único acento vibrante.

Da saúde
para a saúde.

Ritmo

Fundos que se alternam

Preto, roxo profundo, branco e lilás claro marcam a passagem entre seções. Nenhuma seção repete o fundo da anterior.

Composição

Texto à esquerda, grade assimétrica

Grade de 12 colunas com blocos deslocados: rótulo em uma coluna estreita, título e texto em colunas largas à direita.

Título

Duas vozes no mesmo título

Uma linha em peso leve e reto; a linha de ênfase em SemiBold itálico colorido.

Acento

Um roxo vibrante só

#D35CFC faz todo o destaque: botão principal, números, rótulos de hero, seleção de texto.

Forma

Retângulos e linhas finas

Botões retos, divisórias de 1px, nenhuma sombra. O círculo aparece só em setas e retratos.

Detalhe

Setas desenhadas

Toda chamada para ação leva uma seta em SVG de traço fino. Nunca emoji ou caractere de texto.

Arquitetura de marca

Com o hóri,
você

A marca se organiza em quatro verbos. Cada verbo abre uma frente do Hub e dá nome a uma página do site. Os verbos são sempre escritos em minúsculas e em SemiBold itálico.

acessa e adquire

Plataformas, aplicativos e agentes de IA criados para a saúde.

Marketplace

participa

Programas e encontros que mobilizam diferentes públicos.

Eventos e programas de inovação

experimenta

Tendências, tecnologias e novos modelos em ambientes de experimentação.

Labs de Futuro

expande

Investimentos, experiência e conexões para negócios em saúde.

Investimentos e Novos Negócios

Marca

Horizontes Hub

Nome institucional. Escrito com iniciais maiúsculas em texto; em minúsculas só dentro da assinatura gráfica.

Tratamento

hóri

Como a marca fala de si em primeira aproximação: “Com o hóri, você”, “Fale com o hóri”.

Frentes

Studio Digital, Studio IA, Labs de Futuro

Agrupam produtos e experiências dentro de cada verbo.

Origem

Made by hóri, Startup investida

Etiquetas que dizem de onde vem cada produto do Marketplace.

Logo

Assinatura em
duas linhas.

“horizontes” em peso forte sobre “hub” em peso leve. Acompanhada, no cabeçalho e no rodapé, da frase “Inovação Digital & IA para a saúde”.

O vínculo com a Unimed-BH aparece em bloco próprio, com o selo institucional, e não dentro da assinatura.

Inovação
Digital & IA
para a saúde

Assinatura com frase

Onde: cabeçalho e rodapé
Frase: SemiBold 8px (9px no rodapé), caixa alta, espaçamento 0,16em, branco a 70%
Separação: fio vertical branco a 25%, 12px de recuo

Assinatura isolada

Onde: hero da página inicial
Arquivo: horizontes-hub-logo-v4-white.png
Alturas no site: 24px (cabeçalho, celular), 28px (rodapé), 32px (cabeçalho, desktop), 40px (hero)

Versão para fundo claro

Cor: #313131
Uso: o site não usa a assinatura sobre fundo claro; esta versão vem do pacote do template e mantém o mesmo desenho

Bloco “Somos Uni”

Função: apresenta a origem na Unimed-BH
Verde Unimed: só dentro do selo oficial; nunca como cor de interface
Rótulo: “Somos”, caixa alta espaçada, acima da imagem

Ícone “h”

Monograma para espaço pequeno: favicon, avatar, ícone de aplicativo. No site, a letra em #933ED6 sobre quadrado branco com cantos arredondados (raio 96 em 512).

Área de proteção e tamanho mínimo de reprodução ainda não foram definidos. Consulte o Hub antes de aplicar o logo em impressos ou telas pequenas.

Cor

Roxos profundos,
um acento vibrante.

Valores medidos no site no ar, como aparecem na tela. Clique em uma cor para copiar o hex.

Paleta principal

Acentos dos Labs de Futuro

Uso restrito aos nomes dos quatro Labs: Consultório 2030 e Gerações na Saúde em verde-menta; IA na Saúde e Meta Saúde em magenta.

Ritmo de fundos da página inicial

heroarquiteturamarketplaceindicadoresorigemcontato e rodapé

O encerramento da página de Investimentos usa uma mistura de 38% de lilás com branco (#E1D8E6), o único fundo fora da paleta direta.

Texto sobre fundo

Amostra	Texto	Fundo	Contraste	Uso
Aa	branco #FFFFFF	#150D19	19,03:1	Texto corrido
Aa	branco 55% #FFFFFF	#150D19	6,22:1	Texto corrido
Aa	branco 55% #FFFFFF	#2A0837	5,90:1	Texto corrido
Aa	roxo vibrante #D35CFC	#150D19	6,08:1	Texto corrido
Aa	roxo vibrante #D35CFC	#2A0837	5,64:1	Texto corrido
Aa	preto profundo #050306	#D35CFC	6,56:1	Texto corrido
Aa	branco #FFFFFF	#D35CFC	3,13:1	Só texto a partir de 24px e ícones
Aa	preto #150D19	#F3EFF7	16,77:1	Texto corrido
Aa	preto 60% #150D19	#F3EFF7	4,81:1	Texto corrido
Aa	roxo institucional #451957	#F3EFF7	12,09:1	Texto corrido
Aa	preto 35% #150D19	#FFFFFF	2,30:1	Não use para texto
Aa	roxo vibrante #D35CFC	#FFFFFF	3,13:1	Só texto a partir de 24px e ícones

Mínimo de 4,5:1 para texto corrido e 3:1 para texto a partir de 24px. Na prática: texto branco a partir de 55% de opacidade sobre fundo escuro; texto preto a partir de 60% sobre fundo claro.

Tipografia

Unimed Sans,
em três estilos.

Book para quase tudo, SemiBold para rótulos e nomes, SemiBold itálico para a linha de ênfase e os verbos.

Fonte proprietária da Unimed. Não existe como fonte web pública: precisa ser servida pelo próprio projeto.

Book

Peso 400 no CSS. Títulos editoriais, corpo, números.

SemiBold

Peso 600. Rótulos, etiquetas, nomes, botões secundários.

SemiBold itálico

Peso 600 itálico. Linha de ênfase dos títulos e verbos da arquitetura.

Escala

Display de heroBook, 37px a 4,7vw
espaçamento −0,035em, entrelinha 1,04

Da saúde para a saúde

Título em duas vozesBook + SemiBold itálico
#451957 no claro, #D35CFC no escuro

Produtos
Digitais

Título de seçãoBook, 34px a 56px

Autoridade nacional em inovação aplicada à saúde

Título de blocoBook, 30px a 42px

Plataforma de Telemedicina

VerboSemiBold itálico, 28px a 34px
espaçamento −0,02em, minúsculas

acessa e adquire

LeadBook, 17px a 22px, entrelinha 1,45

Encontre a solução a partir do desafio que sua empresa precisa resolver.

CorpoBook, 16px, entrelinha 1,7 a 1,8

O Marketplace transforma a experiência e o conhecimento aplicados da Unimed-BH em novas soluções para empresas de saúde.

ApoioBook, 13,5px e 12,5px, entrelinha 1,75 a 1,8

Espaços físicos onde desafios reais da saúde se encontram com tendências, tecnologias e novos comportamentos.

EyebrowSemiBold 11px, caixa alta, 0,18em
asterisco antes do rótulo

Inovação aplicada

EtiquetaSemiBold 10px, caixa alta, 0,14em

Made by hóri

NumeraçãoBook 10px, espaçamento 0,2em

Regras de uso

Títulos em capitalização de frase: “Nascemos da Unimed-BH.”
O itálico aparece só na linha de ênfase do título e nos verbos. Não é usado para destacar palavras soltas no corpo.
Títulos grandes quebram em linhas curtas, com largura máxima de 11 a 24 caracteres por linha.
Parágrafos em colunas estreitas: 34 a 62 caracteres por linha.
Dois níveis de parágrafo: lead maior e mais escuro, apoio menor e mais claro, logo abaixo.

Para desenvolvedores

@font-face {
  font-family: "Unimed Sans";
  src: url("UnimedSans-Bk.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Unimed Sans";
  src: url("UnimedSans-Sb.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Unimed Sans";
  src: url("UnimedSans-SbIt.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
font-family: "Unimed Sans", "Hanken Grotesk",
             ui-sans-serif, system-ui, sans-serif;

Em PowerPoint e Word, use o nome registrado de cada arquivo: Unimed Sans - 2020 Book, Unimed Sans - 2020 SemiBold. Um nome errado cai em Calibri ou Aptos sem aviso.

Forma e espaço

Linhas finas,
cantos retos.

A estrutura aparece por divisórias de 1px e pela troca de fundo entre seções. Não há sombra, não há cartão flutuante.

Largura

1360px

Container centralizado. Margem lateral de 24px no celular e 40px a partir de 768px.

Respiro

96 a 144px

Espaço vertical entre seções. Faixas de apoio usam 56 a 64px.

Raio

2px

Botões, campos, cards e imagens praticamente retos. Círculo completo só em setas, play e retratos.

Linhas

1px

Preto a 10–15% no claro; branco a 10–25% no escuro. Grades de cards usam 1px de intervalo sobre fundo de linha.

Grade de 12 colunas: composições recorrentes

Rótulo, título e texto lado a lado (5 + 6, deslocado)

Coluna fixa à esquerda com lista à direita (4 + 8)

Rótulo, título e texto em três faixas (3 + 5 + 4)

Inovação
Digital & IA
para a saúde

Vidro só no que fica fixo

O cabeçalho, o menu suspenso e as barras de navegação internas usam fundo translúcido com desfoque: #050306 a 72%, desfoque de 18px e saturação de 140%, com fio inferior branco a 10%. Nenhum outro elemento usa desfoque.

Componentes

Peças da interface, como estão no site.

Botões

Retângulos sem raio, altura mínima de 44px, sempre com seta diagonal depois do rótulo. O hover troca a cor de fundo.

Explore o Marketplace Conheça o hóri Conecte-se Solicite uma demo

Principal: roxo vibrante, texto #050306; hover branco
Secundário: texto com sublinhado de 1px a 40%
Contorno: borda branca 30%; hover preenche de branco
Sólido: branco no escuro, preto no claro, SemiBold; hover em roxo

Solicite uma demo Conheça todo o portfólio

Link de texto: 13px, sublinhado preto a 30%
Atenção: texto branco sobre roxo vibrante tem contraste 3,13:1 e não passa para texto de 16px. Use texto #050306

Setas e etiquetas

Três setas em SVG, traço de 1,25 e pontas quadradas. A seta circular marca itens clicáveis em listas e cards.

Para clientesMade by hóriLink One

Seta circular: 36px, borda a 25–35%; no hover do item, preenche
Etiqueta: retangular, borda a 35–45%, SemiBold 10px
Selo de programa: 9px, borda branca 20%, texto roxo vibrante

Linha de produto

Listas substituem grades de cards. Cada produto ocupa uma linha com etiqueta de origem, nome, tipo em título grande, descrição e chamada.

Made by hóri

Saúde Digital

Plataforma de Telemedicina

Telemedicina e gestão em saúde integradas em uma jornada segura, simples e eficiente.

Indicadores

Número no estilo do título editorial, em roxo vibrante, com legenda curta abaixo. Colunas separadas por fios verticais.

+50

clientes B2B em todo o Brasil

+2 milhões

atendimentos na plataforma de telemedicina Saúde Digital

+300

ritos de governança online pela plataforma Arena Digital

Etapas

Numeração discreta no topo, texto na base, seta circular roxa sobre a divisória entre etapas.

01
Desafios da saúde
02
Tendências em teste
03
Experimentação, teste e codesenvolvimento de soluções
04
Produtos no Marketplace do Horizontes Hub

Acordeão

Um item aberto por vez. Nome grande na cor de destaque do item, resumo abaixo, seta circular que aponta para baixo quando fechado.

Desafios⁹Tendências²³Experimente²

Desafio 01

Abertura do consultório

Simplificar decisões, processos e etapas para estruturar um consultório médico e iniciar sua operação.

Formulário e vídeo

Campos retos com fundo translúcido no escuro. Rótulos no estilo eyebrow. Mensagens de validação e de sucesso usam o roxo vibrante.

NomeTelefone Plataforma de telemedicina

Selecione ao menos uma opção.

Assistir

Vídeo: 16:9, escurecimento de 35%, botão de play de 64px; abre em janela sobreposta

Imagem

Pessoas reais,
luz baixa.

As fotos mostram equipes e espaços do Hub e recebem camadas escuras para o texto branco ler bem por cima.

Tratamento de fotografia

Hero de página interna
gradiente lateral 100% → 85% → 25% + vertical

Hero da página inicial
preto a 95% → roxo profundo a 70% → preto a 30%

Card de foto
roxo em multiplicação + escurecimento na base

Retratos

Círculo, foco no rosto

96 a 128px, recorte pelo topo. Aparecem em depoimentos, sobre fundo lilás claro.

Logos de parceiros

Em cinza, a 80%

Nunca nas cores originais. Altura de 40px, largura máxima de 140px.

Movimento

Paralaxe e zoom lento

Paralaxe de 0,3 nos heróis; vídeo em loop com pausa de 5s; zoom de 5% em 700ms nos cards. Tudo desligado com movimento reduzido.

Voz e nomenclatura

Uma arquitetura de conexão criada para diferentes formas de se relacionar. Com o hóri, você:

participaexperimentaacessa e adquireexpande

Termos

Escreva os termos como estão no site

Os termos da marca não são traduzidos nem reescritos: hóri, Digital & IA, Marketplace, Labs de Futuro, Made by hóri, Studio Digital, Studio IA e os nomes de produtos.

Frases da marca

“Da saúde para a saúde.” “Horizontes existem.”

Princípio e assinatura conceitual. Assinatura de interface: “Inovação Digital & IA para a saúde”.

Pessoa

Você, no presente

A marca fala com o leitor em segunda pessoa e com verbos de ação: você participa, experimenta, acessa, expande.

Vocabulário de chamadas e mensagens

Situação	Texto usado no site
Contato comercial	Fale com um especialista · Fale com especialista · Solicite uma demo
Contato geral	Fale com o hóri · Conecte-se
Navegação	Explore o Marketplace · Explore os produtos · Explore os Labs · Explore oportunidades · Conheça o hóri · Conheça nossa origem
Participação	Participe · Apresente sua startup · Quero ser parceiro · Quero contribuir com este Lab
Envio concluído	Mensagem enviada. Em breve o time do Horizontes Hub entra em contato.
Falha no envio	Não foi possível enviar agora. Tente novamente em instantes.
Validação	Selecione ao menos uma opção.

O que mudou

Do template
para o site.

Materiais feitos com o template de apresentações da equipe (versão 2.0, agosto de 2026) seguem regras que o site substituiu. Use esta tabela para atualizar peças antigas.

Item	Template (substituído)	Site (vale agora)
Fundo escuro padrão	`#380D57`, cards em `#1B0531`	`#150D19` e `#2A0837`, alternados com claros
Acento	magenta `#BE33FF`	roxo vibrante `#D35CFC`
Fundo claro	`#F2F9F7`; branco proibido como fundo	`#F3EFF7` e branco `#FFFFFF`
Cores de apoio	verde `#33D0A6`, magenta claro `#DD76FC`, roxo médio `#5D238A`	lilás `#B29ABE`, gelo `#DDD8E7`, roxo institucional `#451957`
Logo	assinatura com selo Unimed em todas as peças	assinatura com a frase “Inovação Digital & IA para a saúde”; selo em bloco próprio
Título	Book itálico em minúsculas; subtítulo condensado em magenta	título editorial em duas vozes, capitalização de frase
Eyebrow	`CATEGORIA · TEMA`	✱ + rótulo único
Raio de card	14px	2px, praticamente reto
Marcador de bloco	régua magenta de 2pt	fio de 1px na largura toda
Desfoque	proibido	só em cabeçalho, menu e barras fixas
Grafismos	hexágono, padrão Hori, variações coloridas do “h”	nenhum grafismo; “h” roxo só como ícone
Fonte em HTML	alias `UnimedSans2020`, 26 arquivos	`"Unimed Sans"`, 3 arquivos
Fonte de reserva	Helvetica Neue, Helvetica, Arial	Hanken Grotesk, fonte do sistema

A marca que colocahorizontes em movimento.

Da saúdepara a saúde.

Com o hóri,você

Assinatura emduas linhas.

Roxos profundos,um acento vibrante.

Paleta principal

Acentos dos Labs de Futuro

Ritmo de fundos da página inicial

Texto sobre fundo

Unimed Sans,em três estilos.

Escala

Regras de uso

Para desenvolvedores

Linhas finas,cantos retos.

Grade de 12 colunas: composições recorrentes

Peças da interface, como estão no site.

Botões

Setas e etiquetas

Linha de produto

Plataforma de Telemedicina

Indicadores

Etapas

Acordeão

Formulário e vídeo

Pessoas reais,luz baixa.

Tratamento de fotografia

Uma arquitetura de conexão criada para diferentes formas de se relacionar. Com o hóri, você:

Vocabulário de chamadas e mensagens

Do templatepara o site.

A marca que coloca
horizontes em movimento.

Da saúde
para a saúde.

Com o hóri,
você

Assinatura em
duas linhas.

Roxos profundos,
um acento vibrante.

Unimed Sans,
em três estilos.

Linhas finas,
cantos retos.

Pessoas reais,
luz baixa.

Do template
para o site.