color
Paleta brand pequena + tokens semânticos Carbon. Tokens descrevem função (background, text-primary, support-error) — nunca o valor cru. Trocar tema = trocar tokens.
paleta brand
Cores que carregam a identidade Casa Hacker. Code é a cor de destaque (CTA, focus, links), Dos é o fundo escuro, Console o claro. As demais são níveis intermediários e cores de apoio.
primárias
secundárias e apoio
paleta estendida · purple
O PerifaImpacto introduz uma paleta roxa que estende o sistema sem quebrá-lo. O mesmo roxo é usado pra marcar conteúdo gerado por IA (ver Casa Hacker for AI).
Purple Light
#D3BAF5
Purple
#AA78E6
Purple Dark
#6C44A0
tokens semânticos
Toda cor em componente é via token semântico. var(--background) em vez
de #F8FCF8. Lista completa, agrupada por função.
backgrounds
| token | light | dark | uso |
|---|---|---|---|
| --background | #F8FCF8 | #3C433C | fundo da página |
| --background-hover | #F0F5F0 | #444B44 | hover sobre o background |
| --background-active | #D7DCD7 | #525952 | pressed state |
| --background-selected | rgba(50,250,150,.12) | rgba(50,250,150,.16) | item selecionado |
| --background-inverse | #3C433C | #F8FCF8 | tooltip · modal backdrop |
| --background-brand | #32FA96 | #32FA96 | destaque brand |
layers (cards, painéis)
| token | light | dark | uso |
|---|---|---|---|
| --layer-01 | #FFFFFF | #2C322C | card primário |
| --layer-02 | #F0F5F0 | #383E38 | card aninhado |
| --layer-03 | #D7DCD7 | #444B44 | 3º nível de aninhamento |
text
| token | light | dark | uso |
|---|---|---|---|
| --text-primary | #3C433C | #F8FCF8 | corpo de texto e títulos |
| --text-secondary | #5C625C | #D7DCD7 | descrições, suporte |
| --text-tertiary | #91938C | #ADB1A9 | placeholders, metadados |
| --text-helper | #91938C | #ADB1A9 | helper de form |
| --text-on-color | #3C433C | #3C433C | texto sobre cor brand |
| --text-inverse | #F8FCF8 | #3C433C | texto em fundo invertido |
| --text-error | #DA1E28 | #FF8389 | mensagem de erro |
support (estados)
| token | light | uso |
|---|---|---|
| --support-error | #DA1E28 | erros e danger |
| --support-success | #24C775 | confirmações |
| --support-warning | #D79B2E | avisos |
| --support-info | #0F62FE | informação neutra |
light e dark theme
O tema é controlado por data-theme="dark" no elemento <html>.
Sem JS, sem build — só CSS variables sendo redeclaradas dentro do seletor de atributo.
casa hacker
background sutil, texto Dos, destaques Code.
casa hacker
fundo Dos, texto CSS, mesmo Code de destaque.
contraste & a11y
Todo par de tokens texto/fundo do sistema passa em WCAG AA (4.5:1 para texto normal, 3:1 para texto grande). Tabela verificada manualmente.
| par | razão | aa text | aa large |
|---|---|---|---|
| text-primary / background (light) | 11.7 : 1 | ✓ | ✓ |
| text-secondary / background (light) | 7.2 : 1 | ✓ | ✓ |
| text-on-color / background-brand | 11.5 : 1 | ✓ | ✓ |
| text-primary / background (dark) | 13.4 : 1 | ✓ | ✓ |
| text-secondary / background (dark) | 9.1 : 1 | ✓ | ✓ |
| support-error / background (light) | 5.2 : 1 | ✓ | ✓ |