Fundamentos
Cor
Três camadas: a marca (cobalto, menta, céu), os neutros por papel e cinco papéis de estado em pares texto/fundo, todos com contraste ≥ 4,5:1 nos dois temas.
Quando usar
- tokens de papel (
--hibex-text,--hibex-link…) em todo CSS - pares de estado para o que muda com o tempo
Quando não usar
- cor de estado em classificação (tipo, categoria)
- valores soltos de cor no CSS do produto
- cor como único sinal
Superfícies e texto
claro
fundo
--hibex-bgsuperfície
--hibex-surface-solidtexto forte
--hibex-textcorpo
--hibex-text-bodyapagado
--hibex-text-mutedlink e foco
--hibex-linkescuro
fundo
--hibex-bgsuperfície
--hibex-surface-solidtexto forte
--hibex-textcorpo
--hibex-text-bodyapagado
--hibex-text-mutedlink e foco
--hibex-link<div class="site-swatches"><div class="site-swatch"><span style="background:var(--hibex-bg)"></span><b>fundo</b><code>--hibex-bg</code></div><div class="site-swatch"><span style="background:var(--hibex-surface-solid)"></span><b>superfície</b><code>--hibex-surface-solid</code></div><div class="site-swatch"><span style="background:var(--hibex-text)"></span><b>texto forte</b><code>--hibex-text</code></div><div class="site-swatch"><span style="background:var(--hibex-text-body)"></span><b>corpo</b><code>--hibex-text-body</code></div><div class="site-swatch"><span style="background:var(--hibex-text-muted)"></span><b>apagado</b><code>--hibex-text-muted</code></div><div class="site-swatch"><span style="background:var(--hibex-link)"></span><b>link e foco</b><code>--hibex-link</code></div></div>Estados: preciso fazer algo?
claro
Neutronada a fazer
--hibex-status-neutral-fg/-bgAndamentoacompanhar
--hibex-status-info-fg/-bgAtençãoagir logo
--hibex-status-warning-fg/-bgPerigoagir agora
--hibex-status-danger-fg/-bgConcluídonada a fazer
--hibex-status-success-fg/-bgescuro
Neutronada a fazer
--hibex-status-neutral-fg/-bgAndamentoacompanhar
--hibex-status-info-fg/-bgAtençãoagir logo
--hibex-status-warning-fg/-bgPerigoagir agora
--hibex-status-danger-fg/-bgConcluídonada a fazer
--hibex-status-success-fg/-bg<div class="site-swatches"><div class="site-swatch"><span style="background:var(--hibex-status-neutral-bg);color:var(--hibex-status-neutral-fg)">Neutro</span><b>nada a fazer</b><code>--hibex-status-neutral-fg/-bg</code></div><div class="site-swatch"><span style="background:var(--hibex-status-info-bg);color:var(--hibex-status-info-fg)">Andamento</span><b>acompanhar</b><code>--hibex-status-info-fg/-bg</code></div><div class="site-swatch"><span style="background:var(--hibex-status-warning-bg);color:var(--hibex-status-warning-fg)">Atenção</span><b>agir logo</b><code>--hibex-status-warning-fg/-bg</code></div><div class="site-swatch"><span style="background:var(--hibex-status-danger-bg);color:var(--hibex-status-danger-fg)">Perigo</span><b>agir agora</b><code>--hibex-status-danger-fg/-bg</code></div><div class="site-swatch"><span style="background:var(--hibex-status-success-bg);color:var(--hibex-status-success-fg)">Concluído</span><b>nada a fazer</b><code>--hibex-status-success-fg/-bg</code></div></div>"Em andamento" é azul, não âmbar: âmbar fica só para atenção. Classificação não leva cor de estado — é etiqueta neutra.
Marca
Cobalto #1A4DB8, menta #00E5A0 e céu #40AAFF; a escala de cinzas azulada de gray-950 (noite) a gray-100 (névoa). Os valores vêm do stack-website; a fonte deles é este design system (ADR-0031).
Faça e não faça
Faça
- use a mesma palavra com o mesmo papel em todo sistema
- confira cada combinação nova nos dois temas
Não faça
- pinte o botão de confirmar de verde — verde é "concluído"
- use âmbar para "em andamento"
Referência
| Token | Papel |
|---|---|
--hibex-status-<papel>-fg / -bg | texto e fundo de cada papel: success, warning, danger, info, neutral |
--hibex-text, -text-body, -text-muted | texto forte, do corpo e apagado |
--hibex-link, --hibex-focus | link e anel de foco |
--hibex-chart-1…3, --hibex-ramp-1…5 | séries e rampa de gráfico |
Origem: cap. 03 §3.1 · ADR-0006, ADR-0031 · desde a versão 0.1.0