C3 · Componentes
Tag
Rótulos compactos para categorizar, filtrar ou marcar status. Seis tons. Cor de acento usada com moderação — só onde a prioridade é real.
Tons disponíveis
| Tom | Cor base | Uso |
|---|---|---|
| Neutral | --n-bone | Categorização padrão. |
| Accent | --accent-wash | Destaque editorial, prioridade. |
| Silver | --n-mist | Estados intermediários. |
| Dark | --brand-ink | Etiquetas premium ou enterprise. |
| Success | --sem-success-bg | Status ativo, ao vivo. |
| Warning | --sem-warning-bg | Beta, em revisão. |
Anatomia
Pílula com padding 4–6px vertical, 8–12px horizontal. Texto Mono caixa-alta espaçada para metadados, sans para nomes humanos.
<span class="pill">Drops</span> <span class="pill accent">Novo</span> <span class="pill ink">Pro</span>
Faça e não faça
Faça
- Use accent só para uma tag por contexto — sinaliza prioridade real.
- Combine no máximo 3 tags por item para preservar leitura.
- Tag de status sempre acompanha rótulo textual visível.
Não faça
- Não use tag como botão (ações exigem C1 Button).
- Não use cores semânticas (success/warning) decorativamente.
- Não invente novos tons — fique nos seis canônicos.
Acessibilidade
- Status comunicado por cor sempre acompanha texto visível.
- Tag clicável (filtro) recebe
role='button'ou usa<button>. - Em listas de tags, agrupe com
role='list'para leitores de tela.