Fundamentos
Tipografia
Quatro papéis — Plex Serif nos títulos, Questrial no texto, Plex Mono no código, Caveat só no rabisco —; escala de seis passos; corpo em 16 px; sem negrito sintético.
Escala
Sobretítulo · 12
Título da página · 40
Título de seção · 26
Título de cartão · 20
Parágrafo de abertura · 20
Corpo e campos · 16 — com um link e uma ênfase pela cor.
Sobretítulo · 12
Título da página · 40
Título de seção · 26
Título de cartão · 20
Parágrafo de abertura · 20
Corpo e campos · 16 — com um link e uma ênfase pela cor.
<p class="hx-eyebrow">Sobretítulo · 12</p>
<p class="hx-title-page site-title-sample">Título da página · 40</p>
<p class="hx-title-section site-title-sample">Título de seção · 26</p>
<p class="hx-title-card site-title-sample">Título de cartão · 20</p>
<p class="hx-lead">Parágrafo de abertura · 20</p>
<p>Corpo e campos · 16 — com <a href="#">um link</a> e uma <strong>ênfase pela cor</strong>.</p>
<p class="hx-meta">Tabela, metadado, erro e dica · 14</p>Quatro papéis
| Token | Família e uso |
|---|---|
--hibex-font-title | IBM Plex Serif 400/600 — títulos de página, seção, cartão e vitrine |
--hibex-font-text | Questrial 400 — interface, corpo, campos, botões |
--hibex-font-code | IBM Plex Mono 400 — code, kbd, samp, pre |
--hibex-font-sketch | Caveat 500/700 — só títulos e anotações do estilo de rabisco (Ideias); nunca em tela de produto |
Código: <button class="hx-button" type="submit">
Rabisco: a ideia antes da tela
Código: <button class="hx-button" type="submit">
Rabisco: a ideia antes da tela
<p>Código: <code><button class="hx-button" type="submit"></code></p>
<p style="font-family:var(--hibex-font-sketch);font-size:2rem;font-weight:700;color:var(--hibex-link);margin:0">Rabisco: a ideia antes da tela</p>Nível × tamanho
O nível (h1…h4) segue a estrutura do documento; o tamanho segue o papel, com .hx-title-display, -page, -section, -card. Um h1 por página; os níveis não pulam.
Faça e não faça
Faça
- dê ênfase pela cor do texto forte ou pelo tamanho
- mantenha campos em 16 px (menos que isso dá zoom no Safari do iPhone)
Não faça
- use negrito em Questrial — ela só tem 400 e o navegador borra
- escreva texto de interface abaixo de 14 px fora de rótulo de coluna e selo
Referência
| Token ou classe | Valor |
|---|---|
--hibex-font-size-100…600 | 12, 14, 16, 20, 26, 40 px |
--hibex-font-size-display | vitrine das landings: clamp(2.3rem, 6vw, 4.2rem) |
--hibex-font-title, --hibex-font-text | IBM Plex Serif; Questrial |
.hx-title-*, .hx-lead, .hx-eyebrow, .hx-meta | tamanho por papel, abertura, sobretítulo, metadado |
Origem: cap. 03 §3.2 e §3.9 · ADR-0007, ADR-0022, ADR-0036 · desde a versão 0.1.0