50 ms.
É o tempo que a sua plateia leva para julgar o seu slide.halorDisplay · Sora
Aa
Faça cada olhar render.
Logo, títulos de impacto e números de capa. Nunca em texto corrido.
01 · Conceito
Halo + valor = Halor.
haloa primeira impressão que ilumina todo o resto + valoro resultado que essa luz gera = haloro halo que vira valor
O nome junta o efeito halo, descrito por Edward Thorndike em 1920, com o valor que ele gera. A primeira impressão ilumina o julgamento de todo o resto, e a Halor existe para capturar essa atenção e mantê-la acesa do primeiro ao último slide: numa aula, num kickoff, numa abertura de evento ou numa reunião de time. O caminho é a experiência. Movimento com propósito guia o olhar, e a interação traz quem assiste para dentro. Por isso o logo é um halo aberto: o vão é a porta por onde a plateia entra.
Luminosa
É clara, viva, fácil de lembrar.
Não é ofuscante nem exagerada.
Precisa
É medida, objetiva, baseada em dado.
Não é fria nem técnica demais.
Próxima
É humana, direta, do lado de quem apresenta.
Não é informal demais nem apelativa.
Arquitetura da marca
- Halor EstúdioOnde se constrói. Mundo Papel.
- Raio HalorIA que prevê o caminho do olhar antes do envio.
- Link HalorEnvio medido: cada abertura vira sinal.
- PalcoModo apresentação com a plateia votando, escrevendo e respondendo ao vivo.
- Painel HalorCada passo de aproximação, em números.
02 · Logo
Um halo aberto, um núcleo aceso.
halorPrincipal · Noite
halorPrincipal · Papel
- Grade
- 64 × 64 unidades
- Halo
- raio 26, traço 5,5, abertura de 40° a 45° (canto superior direito)
- Anel
- raio 16,5, traço 1,6, opacidade 60%
- Núcleo
- raio 8,5, gradiente Lúmen → Violeta
- Palavra
- Sora SemiBold, caixa baixa, espaço -3%
- Área de respiro
- o diâmetro do núcleo em volta de tudo
- Tamanho mínimo
- marca 16 px · assinatura 96 px de largura
Não faça
03 · Cores
Dois mundos, uma luz.
A Noite é o palco da marca: site, apresentações e momentos de impacto. O Papel é onde se trabalha: o Estúdio de construção, limpo e claro. O violeta é o fio que liga os dois. Clique em uma cor para copiar o código.
Núcleo · Noite
Estúdio · Papel
Proporção de uso
Noite
Papel
Escala da Cadeia Halor · dados
Um matiz só, do primeiro passo (Atenção) ao último (Valor). No Papel escurece; na Noite acende. Validada como rampa ordinal: luminosidade monotônica e passos visíveis.
1 · Atenção#C4A6FF
2 · Interesse#B08AFF
3 · Curiosidade#9C6CFF
4 · Aproximação#8B4FFA
5 · Confiança#7A33EB
6 · Parceria#6420CC
7 · Valor#4A11A0
1 · Atenção#5A35A8
2 · Interesse#7040D6
3 · Curiosidade#8752F5
4 · Aproximação#9F70FF
5 · Confiança#B791FF
6 · Parceria#CFB3FF
7 · Valor#E9DEFF
Semântica
Sucesso #17845A Atenção #8F5A00 Erro #C22F4B Informação #2D62C4
Sucesso como texto sobre o fundo claro usa o papel --ok-text (#0F6B47, 5,8:1). O #17845A sozinho fica abaixo do AA no texto (4,1:1) e serve a ícone, borda e gráfico.
Musgo · o tom de apoio
O musgo nomeia, confirma e etiqueta. O violeta age e destaca.
Onde entra
- Eyebrows de seção, com o traço de 16 px
- Checks do que está incluído: pacote, planos e provas da capa
- Selos de promoção e prazo: −20 % no anual, Para hoje, Para a semana
- O marcador da dose sutil
- A superfície papel-verde do guia de design, a única da página
- O vidro: cabeçalho rolado, palco da capa e cartão de compra
Onde não entra
- Botão, link, título ou anel de foco
- O claim
- O Campo Halor, o logo, gráficos e slides
- Estado: “Salvo” fica neutro e o verde de sucesso é só estado
- A categoria do cartão de tipo, que é Violeta 700
- Teto
- O musgo é no máximo 10 % dos acentos de cada trecho. Medido em pixel na capa do site: 2,9 % na página e 6,4 % no trecho mais verde, as promoções.
- Dois verdes
- Nunca juntos no mesmo componente: o verde de sucesso (
--ok) e o musgo não se encontram. - Vizinhança
- Nunca Musgo (#4F7A5A) encostado em Violeta Halor (#8B3DFF): a mesma luminosidade dá 1,01:1. Separe por tinta, lúmen ou pelo passo claro (Musgo 700 ou Musgo claro).
04 · Tipografia
Larga para chamar, precisa para ler.
Interface e texto · Instrument Sans
Aa
Atenção gera interesse. Interesse gera curiosidade.
Tudo que se lê e se clica: botões, parágrafos, tabelas e números de painel.
Dados e rótulos · JetBrains Mono
Aa
ÍNDICE HALOR · 86/100
Sobretítulos, códigos, tempos e rótulos técnicos. Sempre pequena.
Display
Seja escolhido
56-96 / 1,02 / -3,5%Título 1
Atenção que fica
30-48 / 1,04 / -3%Título 2
O visual vira número
26 / 1,15Texto
Cada passo de aproximação ganha um indicador.
16 / 1,55Apoio
Dados ilustrativos de um time de exemplo.
13,5 / 1,5Sobretítulo
Painel Halor
11 / caixa-alta / +16%05 · Componentes
Os mesmos componentes nos dois mundos.
Papel
Raio Halor SalvaRevisar título86
Noite
Raio Halor SalvaRevisar título Ao vivo
- Raios
- 68121828pílula
- Espaços
- 4 · 8 · 12 · 16 · 24 · 32 · 48 · 72 · 112
- Foco
- anel de 2 px em Violeta (Papel) ou Brilho (Noite), afastado 3 px
Vidro
Todo vidro é musgo, nos dois mundos. O violeta fica para ação, foco e dado; o vidro só segura o conteúdo sobre a luz.
Noite
Vidro musgoSem desfoque: Musgo profundo #12201APapel
Vidro musgoSem desfoque: branco #FFFFFF- Desfoque
--glass-blur16 px, o único, dentro da faixa de 12 a 18 px, com saturação de 140 %- Papéis
--glass-mosse--glass-moss-line(para onde apontam--glass-fille--glass-line),--glass-shadowe--glass-solid- Onde
- Três regiões, uma camada cada: o cabeçalho rolado, o palco da capa e o cartão de compra. Nunca em ticket, plano, cartão de tipo, texto longo ou slide em movimento.
- Sem desfoque
- Sem
backdrop-filterou com “reduzir transparência” ligado, o vidro vira superfície opaca: Musgo profundo na Noite, branco no Papel.
06 · Movimento
A luz guia o olhar. Nunca o distrai.
Campo Halorpartículas que respiram · o cursor reúne um halo · clique solta uma onda
Dose de movimento
Cada efeito tem uma dose. O medidor de 3 barras diz quanto ele pesa no slide: Musgo na sutil, Violeta na moderada e Violeta 700 na intensa.
Sutilà vontade
Moderadauma por slide
Intensasó na capa e na virada
Em cima de número, só a dose sutil.
- Durações
- 120 rápido · 240 base · 480 lento · 900 cinema
- Curvas
- halo-out cubic-bezier(.22,.61,.36,1) · brilho cubic-bezier(.34,1.56,.64,1)
- Regra
- Movimento só quando muda algo para o usuário. Com "reduzir movimento" ligado, tudo vira corte seco.
07 · Voz
Frases curtas. Verbos de ação. Números quando houver.
Assim
“3 pessoas abriram sua apresentação desde ontem.”
“Título com 11 palavras. Títulos de até 7 seguram mais o olhar.”
“Apresentação salva. O link já pode ser enviado.”
Assim não
“Revolucione suas vendas com o poder da neurociência!”
“Erro: violação da heurística de legibilidade.”
“Parabéns!!! Sua apresentação foi salva com sucesso!”
08 · Aplicações
A marca viva em cada tela.
Modelos de slide
halorFaça cada olhar render.
Seu nomeSeu cargovoce@empresa.com.br
9:41
Sua apresentação foi abertaAlguém voltou ao slide 6
09 · Próximas ondas
Do incremento à disrupção.
Incremental · agora
- Raio Halor por slide
- Link medido em todo envio
- Kit de marca travado por time
- Modelos por setor
- PowerPoint editável sem perda
Transformacional · 6 meses
- Coach de narrativa: reescreve títulos e ordena slides
- Mapa de atenção ao vivo, slide a slide
- Capas em teste A/B automático
- Órbita do mês: ranking do Índice Halor no time
- Reações da plateia que entram no slide na hora
Disruptiva · horizonte
- Apresentação viva: o deck se adapta a quem abre
- Agente que monta o deck a partir da reunião gravada
- Sala Halor: quem assistiu pergunta ao deck, 24 horas
- Índice Halor como referência de mercado
- Marketplace de modelos que prendem o olhar
10 · Tokens
Pronto para o front-end.
Copie as variáveis ou use o arquivo design-system/halor-tokens.css do repositório. Os componentes usam só os papéis (--bg, --text, --accent…), então trocar de mundo é trocar uma classe: .theme-night ou .theme-paper.
:root {
--halor-void: #07040f; /* Vazio */
--halor-violet: #8b3dff; /* Violeta Halor */
--halor-neon: #a970ff; /* Neon (texto no escuro) */
--halor-glow: #c9a6ff; /* Brilho */
--halor-lumen: #f4eeff; /* Lúmen */
--halor-moss: #4f7a5a; /* Musgo: ícone e borda de apoio, nunca ação */
--halor-moss-700: #2f5f3e; /* Musgo como texto no claro */
--halor-moss-n: #9ec4a6; /* Musgo claro: texto na Noite */
--halor-moss-wash: #e9f1ea; --halor-moss-deep: #12201a;
--glass-blur: 16px; /* o único desfoque do vidro */
--paper: #ffffff; --mist: #f8f6fe; --lilac-50: #f3eeff;
--ink: #17112b; --ink-2: #4a4366; --line: #e8e3f4;
--f-display: 'Sora', 'Helvetica Neue', Arial, sans-serif;
--f-ui: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
--f-mono: 'JetBrains Mono', ui-monospace, monospace;
--r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;
--ease-halo: cubic-bezier(.22, .61, .36, 1);
}
.theme-night { --bg: var(--halor-void); --text: var(--halor-lumen); --accent: var(--halor-violet); }
.theme-paper { --bg: var(--mist); --text: var(--ink); --accent: var(--halor-violet); }
/* papéis do musgo e do vidro (todo vidro é musgo; --glass-fill e --glass-line apontam para eles) */
.theme-night { --accent-2: var(--halor-moss-n); --accent-2-line: rgba(158, 196, 166, .32);
--glass-moss: rgba(158, 196, 166, .1); --glass-moss-line: rgba(158, 196, 166, .34);
--glass-shadow: 0 40px 90px -42px rgba(0, 0, 0, .9); --glass-solid: var(--halor-moss-deep); }
.theme-paper { --accent-2: var(--halor-moss); --accent-2-text: var(--halor-moss-700); --accent-2-line: rgba(79, 122, 90, .26);
--glass-moss: rgba(233, 241, 234, .72); --glass-moss-line: rgba(79, 122, 90, .28); --glass-solid: #ffffff; }