Hogriddesign system

Foundation

Regra do Condutor

Na Hogrid a cor é função, não decoração. A tela se divide em três camadas com pesos deliberados: a Bancada sustenta, o Reator dá atmosfera e a Corrente conduz a ação. A proporção é o que mantém o Volts como semáforo de decisão.

A Proporção da Bancada

A distribuição cromática é intencional. Quanto mais raro o Volts, mais autoridade ele carrega quando aparece.

Bancada · ~85%
Reator
Volts

As Três Camadas

~85%

A Bancada

Fundo & estrutura

Neutros escuros carregam quase toda a tela: Bancada, Superfície, Superfície-Luz e a Tinta do texto. É o ambiente do laboratório: escuro por função, não por estilo.

~10%

O Reator

Atmosfera sob o conteúdoThe Fluid Stays Under Rule

Os violetas e éteres vivem no fluido WebGL e nos gradientes de fundo: profundidade e energia contida sob o conteúdo. Nunca sobem para a UI de primeiro plano.

≤5–10%

A Corrente

Exclusiva de açãoThe One Conductor Rule

O Volts acende só a decisão: CTA primário, hover ativo, dot de status e ::selection. A escassez é a força: usá-lo largo apagaria o semáforo.

A Regra em Ação

Uma composição real: a Bancada domina, o Reator pulsa no fundo, e um único Volts aponta o caminho.

Engenharia de software

Um só condutor aponta a decisão

Todo o resto é bancada e atmosfera. O olho vai direto para a corrente.

Cores Semânticas Ficam Fora

Success, warning, info e destructive não entram na proporção 85/10/5: são um canal à parte, reservado para comunicar estado de dados. Nunca decoração, nunca substituem o Volts na ação.

Do & Don't

Do

  • Manter o Volts em ≤10% da tela, exclusivo de ação e status.
  • Deixar violetas e éteres sob o conteúdo: fluido e gradiente de fundo.
  • Construir profundidade com camadas tonais da Bancada, não com sombra.
  • Reservar cores semânticas para estado de dados, fora da conta cromática.

Don't

  • Usar o Volts como fundo largo, corpo de texto ou decoração genérica.
  • Trazer o Violeta Reator para botões, cards ou UI de primeiro plano.
  • Confundir o Volts (ação) com o Success (estado): papéis distintos.
  • Espalhar acentos coloridos até o Volts perder função de semáforo.