Brand
Motivos Gráficos
Os elementos de linguagem visual que assinam a marca. Usados com parcimônia: são assinatura, não enfeite. Um motivo repetido em toda seção deixa de ser assinatura e vira scaffold.
Pill de acento
Uma barra pill Volts de 44×4px sob os títulos de seção. É o gesto que marca hierarquia sem recorrer a cor de fundo ou caixa. Aparece em todo SectionTitle.
Engenharia com acabamento
Kicker mono
Eyebrow técnico em Geist Mono, caixa alta, tracking 0.25em. É a assinatura 'data sheet' do laboratório, usada em pontos específicos (hero, microcopy), jamais como scaffold em toda seção.
v2026.1 · Laboratório Elétrico
Uso pontual: no máximo uma vez por vista. Repetido em cada bloco, vira o AI tell que a marca rejeita.
Glow Volts
O halo Lima Volts (shadow-brand + .cta-glow) é exclusivo do CTA primário. Sua raridade é a força: nenhum card, link ou superfície secundária recebe glow. Demonstrado aqui na bancada escura, onde o CTA de fato vive.
Único elemento com glow na página. É o semáforo da decisão.
Fluido do Reator
O gradiente violeta var(--gradient-brand) e o efeito LiquidEther do hero. Energia que vive SOB o conteúdo: atmosfera e profundidade, nunca superfície de UI em primeiro plano (The Fluid Stays Under Rule). O fluido nunca aparece cru: o pattern da marca vai sempre por cima do gradiente, dando textura à atmosfera.
Hero · atmosfera WebGL
O reator pulsa sob a superfície.
O conteúdo permanece por cima, legível e plano. O fluido dá profundidade sem competir pela leitura.
Pattern da marca
A textura texture.png repetida, o padrão HG do laboratório. Diferente da marca d'água (um símbolo grande e isolado), o pattern é uma malha que se repete e cobre a área inteira. Aparece em dois contextos: sempre que uma área usa gradiente ou degradê, o pattern vai por cima do gradiente; e sobre fundos claros ou brancos de seção, como nas seções claras do site.
Pattern sobre gradiente
Painel esquerdo do login, hero do site: o pattern entra por cima do gradiente violeta, dando textura à atmosfera.
Pattern sobre fundo claro
Seções claras do site: o mesmo pattern reforça a marca sem competir com o conteúdo, apoiado no mix-blend-multiply.
Aplicação técnica: bg-repeat + opacity-30 + mix-blend-multiply. A classe utilitária .brand-pattern já entrega esse comportamento via ::before, mantendo o conteúdo acima da textura.
Marca d'água
O logo ou símbolo grande e isolado, a 8–16% de opacidade, sangrando pela borda. É uma peça única de destaque em capas e blocos amplos, presente mas nunca protagonista. Não confundir com o pattern: a marca d'água é um símbolo grande; o pattern é textura repetida.
Capa · marca d'água
Brand Guideline 2026
Dot pulsante
Um ponto Volts com pulso (animate-pulse-dot) sinaliza status ativo — 'disponível', 'novo', 'ao vivo'. Semântico, não decorativo.
Restrição do gradiente de marca
O gradiente violeta é exclusivo destes motivos gráficos (fluido, marca d'água, atmosfera de capa). Fora deles, é proibido.
Do
- Usar var(--gradient-brand) como atmosfera SOB o conteúdo.
- Aplicar o gradiente em capas, hero e marca d'água.
- Manter os violetas como profundidade, nunca como ação.
Don't
- Usar o gradiente em texto (gradient text / background-clip).
- Aplicar o gradiente em botões ou superfícies de UI.
- Trazer o fluido para o primeiro plano da interface.