Hórus é o deus-falcão egípcio da visão e da proteção — o Olho que tudo vê. A marca traduz isso num vórtice hexagonal: seis pás convergindo para um núcleo, a inteligência que reúne tudo num só foco. Dark-first, glass, com um sistema cor-por-produto: uma forma e um vocabulário visual que vestem cinco identidades.
O emblema
Uma forma só, seis pás em espiral (4 camadas) e um núcleo hexagonal. Recolore por produto via .prod-* — mesma lógica dos tokens. Marca principal no gradiente CTA (ciano→azul→roxo).
Cores & escalas
Cada produto = 1 cor (passo 600, canônico) + gradiente 135°, expandidos em escala tonal 50→900. CC = contraste do texto sobre o fundo.
Neutros (dark-first)
Funcionais
Semânticos · mode dark
Gradientes assinatura
Quatro famílias
Escala
Espaço · raio · sombra
Espaçamento · base 4px
Raio · base 0.75rem
Sombra & glow (glow tintado pela cor ativa)
Easings & glass
Curvas de transição da casa — clique pra animar. O spring dá a vivacidade premium das micro-interações.
Ao vivo
Todos herdam --hp-* — trocam de cor com o produto ativo (use o seletor na lateral).
Card do produto
Faixa, glow e título herdam a cor ativa.
Design tokens · DTCG
Tudo nesta página vem de um único token set no padrão W3C Design Tokens. Vive em @horus/ui (PR #1) e gera CSS/iOS/Android/Flutter via Style Dictionary.
Formato (DTCG)
// horus.tokens.json — primitivo + semantico
{ "color": { "product": { "estagiario": {
"600": { "$type":"color", "$value":"#7c26d9" } } },
"semantic": { "action-default": {
"$value": "{color.product.estagiario.600}" } } }Consumo
/* CSS */
@import "@horus/ui/tokens-full.css";
/* troca a marca inteira: */
<body class="prod-jurislab">
<button style="background:var(--hp-gradient)">
// TS
import { productGradient } from '@horus/ui'Camadas
Primitivos (escalas 50→900 · neutros · funcionais) → Semânticos (aliases: bg, surface, action-default, focus-ring…) → Componente (--hp-primary, --hp-gradient por .prod-*). Componentes nunca consomem primitivos direto.