Fundamentos
Raio
Raios concêntricos e a orelha do símbolo.
Escala#
xs
6px
sm
8px
md
12px
lg
16px
xl
22px
ear
9px
| Token | Valor | Tailwind | Uso |
|---|---|---|---|
| radius.xs | 6px | rounded-hb-xs | Etiqueta. |
| radius.sm | 8px | rounded-hb-sm | Controle pequeno, item de lista. |
| radius.md | 12px | rounded-hb-md | Controle padrão e input. |
| radius.lg | 16px | rounded-hb-lg | Cartão. |
| radius.xl | 22px | rounded-hb-xl | Modal e palco. |
| radius.ear | 9px | rounded-hb-ear | Orelhas do símbolo: chanfro dos cantos superiores. |
| radius.card | 16px | rounded-hibou-card | Compatibilidade CRM. Não usar no Core. |
| radius.pill | 999px | rounded-hibou-pill | Compatibilidade CRM. Não usar no Core. |
| radius.input | 12px | rounded-hibou-input | Compatibilidade CRM. Não usar no Core. |
| radius.modal | 22px | rounded-hibou-modal | Compatibilidade CRM. Não usar no Core. |
Raio concêntrico#
Raio interno = raio externo − padding. É o que faz um controle parecer encaixado, não colado.
16 − 4 = 12
Dentroencaixa
16 com 16 dentro · evite
Dentrosobra
A orelha#
Os cantos superiores cortados vêm das orelhas da coruja. Só em superfície preenchida, sem borda: o tile ativo da navegação, o dock.
Ativo
tsx
<span className="hb-ears rounded-b-[12px] bg-white">Ativo</span>hb-ears é um clip-path de 9px (token radius.ear). Não combine com borda ou anel: o recorte corta a borda também.
Regras#
Faça
- Badge 6, controle 8–12, cartão 16, diálogo 22.
- Raio interno pela conta do padding.
Evite
- Pílula (999) em etiqueta de estado.
- Raio arbitrário.
- hb-ears com borda.