Princípio 1
Forma antes da cor
Campo, botão, mensagem, selo e etiqueta se reconhecem pelo contorno e pelo canto, antes de qualquer cor — mesmo em escala de cinza.
Design system · sistemas web
Uma linguagem só, para todos os sistemas.
Três menus, três cantos — e a mesma linguagem em todo sistema Hibex: tokens, componentes e padrões de tela, nos dois temas, do celular ao monitor largo.
Gestão de projetos
Ana Souza AS
Projeto Aurora Em execução
DocumentaçãoTermos de usoPrivacidadeContato© 2026 Hibex
Seis princípios
Princípio 2
Alinhamento acima de tudo
Nenhum elemento sai do lugar por causa de outro: o erro cresce para baixo, as larguras são poucas, as colunas coincidem.
Princípio 3
Refinado, nunca fino demais
Texto de interface a partir de 14 px, campos e botões de 44 px, traço de ícone de 2, contornos que passam no contraste.
Princípio 4
A cor responde uma pergunta
Cinco papéis de estado — e a pergunta é sempre a mesma: preciso fazer algo? A mesma palavra, a mesma cor, em todo sistema.
Princípio 5
A plataforma primeiro
HTML e CSS do navegador antes de qualquer script; nenhuma tecnologia de servidor pressuposta; todo estado num atributo padrão.
Princípio 6
Dois temas, de primeira classe
Claro e escuro desenhados juntos, medidos juntos e mostrados lado a lado em toda página deste site.
Por onde começar
Começar
Ligar a biblioteca numa página: uma folha de estilo, o sprite de ícones, o tema.
Três menus, três cantos
A ideia da navegação, em rabiscos, e páginas de verdade para experimentar.
Exemplos
Painel, login, conta, extrato, landing: páginas inteiras, no claro e no escuro.
Adotar num produto
Copiar uma versão para o repositório do produto e conviver com o Bootstrap.
O que é e o que não é
É a biblioteca própria da Hibex: tokens --hibex-*, classes hx-*, componentes escritos em CSS nativo. Aprende com o Bootstrap 5.3 — princípios, acessibilidade, a forma de documentar — sem ser um tema dele (ADR-0012).
Está acima dos produtos (ADR-0013): os sistemas se ajustam a ela. Toda regra aqui veio de um capítulo do estudo, defendido com capturas reais de 62 telas em 234 cenários, e de uma decisão registrada.
Origem: README do repositório · ADR-0012, ADR-0013 · desde a versão 0.1.0