Fundamentos
Marca e coruja
Imagotipo, símbolo e os estados da coruja.
Imagotipo#
Coruja + hibou + pay. "pay" é sempre Vivid Blue; "hibou" é preto no claro e branco no escuro.
tsx
import { Wordmark } from "@hiboupay/icons";
<Wordmark className="h-8" />
<Wordmark onDark className="h-8" />A coruja#
O símbolo, com o traço exato do imagotipo. Também é o ícone do agente.
sem state
Sem estado: a marca como assinatura, sem movimento.
state="idle"
Vigiando. Pisca a cada 6 s. Use onde o agente está disponível mas não age.
state="working"
Trabalhando. Ganha órbita azul. Use enquanto o agente lê, busca ou escreve.
Degradê#
8 paradas e três cores-chave, do Vivid Blue ao índigo. Só na coruja; nunca como fundo de tela.
#0162F7#0C53DA#312782
Uso#
Faça
- Respiro mínimo igual à altura da coruja em volta do imagotipo.
- Coruja sozinha abaixo de 96px de largura.
- tone="current" sobre noite ou dentro de botão.
Evite
- Redesenhar, esticar, girar ou contornar.
- Trocar a cor de "pay".
- Aplicar sobre foto sem scrim.
- Usar outro ícone para o agente.