Design System
Fundamentos visuais, componentes e padrões de interface usados em todas as telas do HaisFaturamento. Use esta referência antes de criar qualquer tela nova.
Fundamentos
Marca
Logos do HaisFaturamento e da HaisTech para download, com as regras de uso.
Logo — fundo claro
Menu lateral no tema claro, documentos e telas com fundo claro.
haisfaturamento-logo.png · PNG
Logo — fundo escuro
Telas de autenticação, menu lateral no tema escuro e fundos da marca.
haisfaturamento-logo-dark.png · PNG
Símbolo
Favicon, menu recolhido e ícone do aplicativo, quando não há espaço para o nome.
haisfaturamento-simbolo.svg · SVG
Logo HaisTech — fundo claro
Rodapé e assinatura institucional em fundos claros. Não substitui a logo do produto.
haistech-logo.svg · SVG
Logo HaisTech — fundo escuro
Assinatura institucional sobre o gradiente da marca ou o tema escuro.
haistech-logo-dark.svg · SVG
Pattern Hais
Textura de fundo das telas de autenticação, sobre o gradiente da marca, ancorada embaixo e esmaecendo para cima.
hais-pattern.svg · SVG
Faça
- Use a versão para fundo escuro sobre o gradiente da marca ou o tema escuro.
- Mantenha em volta da logo um espaço livre igual à altura do símbolo.
- Respeite a altura mínima de 24 px para a logo completa e 16 px para o símbolo.
- Redimensione sempre mantendo a proporção original.
Evite
- Esticar, achatar ou girar a logo.
- Mudar as cores, aplicar sombra, contorno ou transparência.
- Colocar a logo sobre fotos ou fundos com pouco contraste.
- Recriar a logo com texto ou trocar a fonte.