Fundamentos

tokens, tipografia, espaço, forma, elevação e ícones · cap. 03 e cap. 08

Cor, tipografia e ícones nos dois temas

Os tokens de papel mudam com o tema; os de escala não. O tamanho do título vem do papel (.hx-title-*), o nível vem do documento. cap. 03, cap. 08, ADRs 0006–0008, 0022, 0024, 0026.

Superfícies e texto
fundo--hibex-bg
superfície--hibex-surface-solid
texto forte--hibex-text
texto do corpo--hibex-text-body
texto apagado--hibex-text-muted
link e foco--hibex-link
Cinco papéis de estado — par texto/fundo
Neutro--hibex-status-neutral-*
Andamento--hibex-status-info-*
Atenção--hibex-status-warning-*
Perigo--hibex-status-danger-*
Concluído--hibex-status-success-*
Séries de gráfico e rampa
série 1--hibex-chart-1
série 2--hibex-chart-2
série 3--hibex-chart-3

Sobretítulo

Título da página · 40

Título de seção · 26

Título de cartão · 20

Parágrafo de abertura, 20 px — o que a tela resolve, numa frase.

Corpo em Questrial 16 px: um link no texto e uma ênfase pela cor, sem negrito sintético.

Metadado em 14 px, apagado · 02/10 às 23:49

Código em IBM Plex Mono: --hibex-font-code, <button type="submit">

Caveat — só no rabisco que explica uma ideia

Rótulo de coluna · 12

Ícones (Lucide, tabela de papéis) · 20 px
16 20 24
Superfícies e texto
fundo--hibex-bg
superfície--hibex-surface-solid
texto forte--hibex-text
texto do corpo--hibex-text-body
texto apagado--hibex-text-muted
link e foco--hibex-link
Cinco papéis de estado — par texto/fundo
Neutro--hibex-status-neutral-*
Andamento--hibex-status-info-*
Atenção--hibex-status-warning-*
Perigo--hibex-status-danger-*
Concluído--hibex-status-success-*
Séries de gráfico e rampa
série 1--hibex-chart-1
série 2--hibex-chart-2
série 3--hibex-chart-3

Sobretítulo

Título da página · 40

Título de seção · 26

Título de cartão · 20

Parágrafo de abertura, 20 px — o que a tela resolve, numa frase.

Corpo em Questrial 16 px: um link no texto e uma ênfase pela cor, sem negrito sintético.

Metadado em 14 px, apagado · 02/10 às 23:49

Código em IBM Plex Mono: --hibex-font-code, <button type="submit">

Caveat — só no rabisco que explica uma ideia

Rótulo de coluna · 12

Ícones (Lucide, tabela de papéis) · 20 px
16 20 24

Escalas

Espaço em grade de 4 (--hibex-space-1…8), raios por tipo de peça, três níveis de elevação (no escuro, um fio de luz na borda).

Espaço
4
8
12
16
24
32
48
64
Raios
xs · 4
sm · 8
md · 12
lg · 16
xl · 20
pill · pílula
Elevação
nível 1
nível 2
nível 3

Tema por elemento

Um trecho escuro numa página clara (o herói das landings): data-theme="dark" redefine os tokens só ali, e o trecho declara cor e fundo a partir deles (ADR-0022).

Página no tema claro.

Trecho escuro

Os mesmos tokens, outros valores: link em céu, texto do corpo claro.