sobre o sistema
Sistema de design open-source que estende o IBM Carbon com a identidade Casa Hacker · pra produtos, eventos e materiais da comunidade tech brasileira.
por que um ds próprio
Cada projeto da Casa Hacker reinventava cores, tipografia, espaçamento e componentes do zero. Resultado: inconsistência visual, retrabalho e dificuldade de manter acessibilidade. O CHDS consolida decisões de design em um único lugar para que todos os produtos da casa partam do mesmo vocabulário visual.
consistência
Um único conjunto de tokens garante que a paleta, espaçamento e tipografia sejam idênticos em todos os produtos.
velocidade
Times param de "redesenhar o botão". Decisões de baixo nível ficam resolvidas, foco vai pra solução do problema.
acessibilidade
WCAG 2.1 AA por padrão. Contrastes, foco visível e navegação por teclado já vêm garantidos.
o que tem aqui
| área | conteúdo | status |
|---|---|---|
| foundations | color, typography, spacing/BIT, grid 2x, iconography, motion, themes | stable |
| guidelines | accessibility, content & voice, Casa Hacker for AI | stable |
| components | 22 componentes (button, modal, form, table, etc.) | stable |
| patterns | BIT modular, colored symbol, grafismos, login, dialogs, status | stable |
| data viz | anatomy, chart types, color palettes | beta |
| submarcas | 5 marcas-filha com identidade própria | stable |
| impressos | papelaria, eventos, loja & merch | stable |
como o sistema é organizado
tokens
Valores primitivos (cores, espaçamento, tipografia) e tokens semânticos (background, layer, text-primary) mapeados via CSS custom properties. Mudança de tema = mudança de tokens, sem refatorar componente.
componentes
Cada componente é documentado com anatomia, variantes, estados, comportamentos, modificadores, casos de uso, acessibilidade e código pronto pra copiar.
padrões
Combinações de componentes resolvendo problemas recorrentes — formulários, autenticação, navegação, estados vazios.
marca
Submarcas e materiais impressos seguem as mesmas regras do sistema digital, garantindo que a Casa Hacker fale uma única voz no físico e no virtual.
stack técnico
O CHDS é deliberadamente zero-build: HTML, CSS e JS vanilla servidos diretamente. Sem bundler, sem framework, sem dependências externas. Funciona em qualquer servidor estático — inclusive GitHub Pages.
- HTML semântico (sem JSX, sem template engines)
- CSS custom properties para tokens — nada de Sass ou PostCSS
- JS vanilla em
shell.js(nav + theme + TOC) ecomponents.js(modal/tabs/dropdown/accordion) - Fontes self-hosted em WOFF2 — IBM Plex Mono, Roboto Flex variable, VT323
- SVG inline pra ícones e símbolos — zero icon font
versionamento
Seguimos Semantic Versioning. Major (1.x.x) quebra retrocompatibilidade, minor (x.1.x) adiciona features, patch (x.x.1) corrige bugs e ajustes visuais sem mudar API.
| versão | data | destaques |
|---|---|---|
| 1.0.0 | 2026-05 | Rewrite completo, todas as páginas em padrão Carbon, JS interativo, GH Pages-ready |
| 0.1.0 | 2026-05 | Versão inicial, button + foundations parciais |
próximos passos
manifesto + missão
O futuro não é uma coisa distante · texto oficial + frases-fonte pra design.
ler manifestoprincípios
Os 5 valores que guiam as decisões de design do sistema.
ler princípioscolor
Paleta, tokens semânticos, themes claro e escuro.
ver tokenscontribuir
Como propor componentes, padrões e melhorias.
contribuir