Components
Login
O padrão oficial de acesso: painel de marca com gradiente violeta e o pattern da Hogrid por cima, logo branca ao centro e formulário à direita com um único CTA.
Tela completa
Duas colunas iguais em desktop. Em telas pequenas, o painel de marca vira uma faixa superior e o formulário segue abaixo.
Regras do padrão
O acesso é a primeira impressão do produto: sóbrio, escuro por função e conduzido por um único gesto.
Do
- Vestir o painel de marca com o gradiente violeta e o pattern da Hogrid por cima.
- Usar a logo branca centralizada sobre o painel de marca.
- Oferecer um único CTA primário em Volts: Entrar.
- Manter o pattern discreto, sob o conteúdo do painel.
- Colapsar o painel em faixa superior no mobile.
Don't
- Trocar o gradiente da marca por um degradê colorido aleatório.
- Competir CTAs (Entrar e Cadastrar com o mesmo peso).
- Usar a logo preta sobre o painel de marca.
- Trazer os violetas para cima do formulário.
- Adicionar glassmorphism ou sombras decorativas.
Referência
| Elemento | Detalhe | Import / Asset |
|---|---|---|
| Painel esquerdo | gradiente violeta + pattern da marca | var(--gradient-brand) · .brand-pattern |
| Logo | logo-white.svg centralizada | /brand/logo-white.svg |
| Campos | HogridInput (label embutido) | @/components/ui/input |
| CTA | HogridButton variant primary, w-full | @/components/ui/button |