Foundation
Design Tokens
O vocabulário atômico da bancada Hogrid: cor, tipografia, forma, elevação e ritmo. Cada token é uma decisão de marca codificada: a fonte da verdade que mantém o produto e a comunicação em uma só voz elétrica. Os valores abaixo são os tokens do produto (a bancada dark-only), catalogados aqui neste guideline claro; as amostras de produto aparecem sobre a bancada escura, emolduradas no documento.
Cores da Marca
A paleta é committed: o Violeta Reator habita a atmosfera (fluido WebGL, gradientes de fundo) e o Volts domina a camada de ação. Os neutros são levemente tintos para o hue violeta-magenta (~285): coesão, não neutro puro.
Primárias
O condutor e a energia contida. Volts acende a decisão; a Bancada é o preto-quente do laboratório; a Tinta é o texto.
Volts / Lima Elétrica
#c4f005 · bg-brand
Bancada
#0d0d0d · bg-background
Tinta
oklch(0.985 0 0)
Secundárias: o Reator
Os violetas e éteres que compõem o fluido do hero. Dinâmica de shader e gradiente de fundo, nunca UI de primeiro plano (The Fluid Stays Under Rule).
Violeta Reator
#4800d6 · violet-hogrid
Éter Azul
#5227ff · ether-primary
Éter Magenta
#9f11a1 · ether-secondary
Violeta Claro
#732ffa · violet-light
Neutras & Superfícies
Camadas tonais que constroem profundidade sem sombra. A elevação vem do empilhamento Bancada → Superfície → Superfície-Luz.
Superfície
#1a1a1a · bg-surface
Superfície-Luz
#252525 · surface-light
Tinta-Muda
oklch(0.72 0.014 285)
Linha
oklch(0.264 0.006 285)
Semânticas
Reservadas para comunicar estado de dados: sucesso, atenção, informação, erro. Ficam fora da conta cromática da marca; nunca decoração.
Success
#3ecf8e · text-success
Warning
#f5b41f · text-warning
Info
#8f7bff · --info
Destructive
--destructive-foreground
Tokens de UI
Aliases semânticos que os componentes consomem. Referenciar sempre o token, nunca o hex bruto.
--background
Bancada
--card
Superfície
--border
Linha
--muted
Fundo muted
--ring
Foco visível
Escala tonal: Bancada
Nove passos do preto-quente ao quase-branco, tintos para o hue violeta. Estruturam superfícies, bordas e texto muted.
Escala Volts
Shades e tints do condutor, para estados (hover, disabled, foco) e visualização de dados. O #c4f005 permanece o único usado em ação.
Especificação de Cores
Valores exatos das oito cores de marca para produção, tela e impressão. RGB é conversão direta do HEX; CMYK é aproximação de referência para material impresso.
| Cor | HEX | RGB | CMYK |
|---|---|---|---|
| Volts | #c4f005 | 196 · 240 · 5 | 19 · 0 · 98 · 6 |
| Bancada | #0d0d0d | 13 · 13 · 13 | 0 · 0 · 0 · 95 |
| Tinta | #fafafa | 250 · 250 · 250 | 0 · 0 · 0 · 2 |
| Violeta Reator | #4800d6 | 72 · 0 · 214 | 66 · 100 · 0 · 16 |
| Éter Azul | #5227ff | 82 · 39 · 255 | 68 · 85 · 0 · 0 |
| Éter Magenta | #9f11a1 | 159 · 17 · 161 | 1 · 89 · 0 · 37 |
| Violeta Claro | #732ffa | 115 · 47 · 250 | 54 · 81 · 0 · 2 |
| Superfície | #1a1a1a | 26 · 26 · 26 | 0 · 0 · 0 · 90 |
Tipografia
Ballinger Condensed grita nos títulos; Sarvatrik conversa no corpo e na UI; Geist Mono assina os kickers técnicos. Condensada é impacto, não leitura (The Condensed-For-Impact Rule).
Display
Ballinger · 800 · clamp 2.25→5.5rem · lh 1 · -0.02em
Laboratório Elétrico
Headline
Ballinger · 800 · clamp 1.875→3rem · lh 1.1
Engenharia que se prova ao vivo
Title
Ballinger · 600 · 18px · lh 1.4
Sistemas sob medida, do MVP ao enterprise
Body
Sarvatrik · 400 · 15–16px · lh 1.6
Construímos apps, sites e sistemas com acabamento fino e performance medida. A interface argumenta por si; a autoridade vem da clareza técnica, não do adjetivo.
Label
Sarvatrik · 600 · 14px
Iniciar um projeto
Mono kicker
Geist Mono · 400 · 10–12px · 0.25em · caixa alta
v2026.1 · sistema operante
Eyebrow (kicker mono)
O rótulo mono em caixa alta que abre seções é a assinatura data sheet do laboratório: uma linha de acento, o rótulo e, opcional, um sublabel após um divisor. É pontual por definição — sua força vem da raridade, não da repetição.
Anatomia
Geist Mono, caixa alta, tracking 0.25em. Uma linha de acento à esquerda, o rótulo na cor de acento e um sublabel opcional após o divisor. O separador · ou — é permitido aqui: no eyebrow o traço é elemento gráfico da marca, não pontuação de texto.
Título da seção
Aplicações e cor
A cor do acento acompanha o fundo, como no site: Volts sobre a bancada escura, Violeta Reator sobre superfícies claras. Varia também em alinhamento (esquerda ou centro) e na presença do sublabel de versão ou status.
Sobre a bancada · acento Volts
Sobre o claro · acento Violeta
Alinhamento centralizado
Em heros e aberturas centradas, o eyebrow também centraliza; as linhas de acento emolduram o rótulo dos dois lados.
Onde usar
Reservado a pontos de entrada: o topo de uma página do guideline, a abertura de uma seção-âncora, o kicker do hero, uma microcopy técnica de rodapé. É o mesmo papel do prop kicker que abre cada página e do SectionTitle.
Do
- Usar o eyebrow para situar: qual seção, qual versão, qual status.
- Deixar o acento seguir o fundo: Volts no escuro, Violeta no claro.
- Mantê-lo curto: uma a três palavras, ou um par versão/status.
- Aceitar · e — como separadores gráficos dentro do eyebrow (assinatura da marca).
Don't
- Repetir o eyebrow em toda seção; vira scaffold de SaaS e perde a força.
- Escrever frases no eyebrow; ele rotula, não narra.
- Usar Volts como acento sobre fundo claro, onde ele perde contraste.
- Confundir com o travessão em texto corrido, que é proibido pela regra de voz.
Specimen Tipográfico
Caixa alta e baixa, numerais e sinais das duas famílias de texto: a referência para inspecionar traço, largura e ritmo antes de aplicar.
Ballinger Condensed — títulos
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&?
Sarvatrik Latin — corpo & UI
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&?
Border Radius
A curvatura é gradual até a assinatura: a pill (300px) fecha totalmente botões, badges, inputs e cards. É o traço formal que identifica o sistema à distância.
6px
rounded-sm
8px
rounded-md
10px
rounded-lg
14px
rounded-xl
16px
rounded-2xl
24px
rounded-3xl
80px
rounded-section
300px
rounded-pill
Elevação: Sombras & Glow
Plano por padrão. Superfícies em repouso não têm sombra; a profundidade vem de camadas tonais. Glow e lift aparecem apenas como resposta a estado ou como assinatura do CTA primário.
Flat-By-Default
Nenhuma sombra em repouso.
Volts Glow
shadow-brand + .cta-glow, exclusivo do CTA.
Hover Lift
--shadow-lift: resposta ao hover.
The One Conductor Rule
O Volts Glow é a assinatura do CTA primário e não migra para cards, links ou badges. Sua raridade é o que dá autoridade ao halo.
Espaçamento
Escala base-4: todo respiro é múltiplo de 4px. Ritmo previsível entre componentes, seções e densidade de dados.
Escala Tipográfica
Os tokens de texto com família, peso, tamanho e métrica: a especificação que os estilos acima renderizam.
| Token | Família | Peso | Tamanho | Line-height | Tracking |
|---|---|---|---|---|---|
display | Ballinger | 800 | clamp 2.25→5.5rem | 1 | -0.02em |
headline | Ballinger | 800 | clamp 1.875→3rem | 1.1 | -0.02em |
title | Ballinger | 600 | 18px | 1.4 | -0.01em |
body | Sarvatrik | 400 | 15–16px | 1.6 | normal |
label | Sarvatrik | 600 | 14px | 1.4 | normal |
mono-kicker | Geist Mono | 400 | 10–12px | 1.4 | 0.25em |
Cores de Gráfico
A paleta de visualização de dados. Começa no Volts, atravessa os violetas do reator e fecha em neutros: legível sobre a Bancada, distinta em série.
--chart-1
#c4f005
--chart-2
#732ffa
--chart-3
#9f11a1
--chart-4
#3ecf8e
--chart-5
#8f8f9a
Componentes
Uma amostra do kit construído sobre estes tokens. A biblioteca completa vive nas páginas de Components.
Botões
A moeda de conversão. Sempre pill; glow só no primário.
Badges
Status para dados; dot pulsante sinaliza disponibilidade.
Alerts
Comunicação de estado com ícone semântico Lucide.
Deploy concluído
A build de produção subiu sem erros.
Certificado expira em 7 dias
Renove o SSL antes do vencimento.
Nova versão da API
A v2 já está disponível em staging.
Falha na integração
O webhook retornou 500 nas últimas 3 tentativas.
SectionTitle
Motivo pill de acento: abre seções em interfaces e documentos.
Serviços
O que construímos
Apps nativos, sistemas sob medida e experiências de web que se sustentam em performance e acabamento.
StatCard
KPI plano: camada tonal, sem glow.
Projetos entregues
140+
+18%vs. 2025
Uptime médio
99,95%
+0,3%12 meses
NPS
72
+9%trimestre
Card, RadioGroup & Separator
Superfícies pill e controles de formulário.
Sistemas sob medida
Arquitetura, backend e integrações desenhados para o seu processo, do MVP ao enterprise.
Qual serviço interessa?
Separator divide grupos sem introduzir uma nova superfície.
Referência de Tokens
O índice completo: token CSS, valor e uso. A fonte da verdade para consumir a bancada em código.
| Token | Valor | Uso |
|---|---|---|
--brand | #c4f005 | Condutor: CTA, hover ativo, status, seleção |
--background | oklch(0.141 …) | Bancada: fundo do body |
--card | #1a1a1a | Superfície de cards e popovers |
--surface-light | #252525 | Hover de superfície, código inline |
--violet-reactor | #4800d6 | Atmosfera WebGL e gradiente de marca |
--border | oklch(0.264 …) | Bordas e divisores sutis |
--muted-foreground | oklch(0.72 …) | Texto secundário (validar ≥4.5:1) |
--radius-pill | 300px | Assinatura: botões, badges, inputs, cards |
--radius-section | 5rem | Recortes de blocos e seções |
--shadow-brand | 0 4px 27.9px rgba(196,240,5,.3) | Volts Glow: só CTA primário |
--shadow-lift | 0 8px 31.9px rgba(0,0,0,.2) | Hover Lift de cards |
--font-heading | ballinger-condensed | Títulos (display, headline, title) |
--font-sans | sarvatrik-latin-variable | Corpo, UI, labels |
--font-mono | geist-mono | Kickers técnicos e dados |
--space-4 | 16px | Unidade base do ritmo (escala base-4) |
--gradient-brand | 135deg #4800d6→#9f11a1 | Motivos gráficos (nunca texto/botão) |