Fundação
Componentes
As fontes Space Grotesk (sans) e Sometype Mono (mono) são carregadas com next/font no layout da app. Para Strong, aninha <strong> no elemento com as classes de texto.
Padrão nos componentes (packages/ui)
Os componentes do pacote usam utilitários Tailwind (text-sm, font-medium, leading-*, etc.). Isso mantém o código alinhado ao ecossistema shadcn/Radix e facilita manutenção.
| Contexto | Classes típicas | Notas |
|---|---|---|
| Botão (corpo) | text-sm font-medium; tamanhos menores: text-xs | Variantes e size definem altura (h-9, h-8…). |
Campos (Input, Textarea) | text-base md:text-sm | Legível em mobile; md aproxima o corpo compacto. |
| Overlays (diálogo, sheet, popover) | Título: text-base font-medium; descrição: text-sm text-muted-foreground | Ajuste com leading-* se precisar de mais ar. |
| Menus e listas | text-sm; rótulos secundários: text-xs text-muted-foreground | Atalhos: tracking-widest. |
| Tooltip | text-xs sobre fundo invertido | Cor: text-background sobre bg-foreground. |
| Sidebar | text-sm nos itens; secções: text-xs font-medium text-sidebar-foreground/70 | Tokens sidebar-* vêm do tema em globals.css. |
Para peso, combine com font-normal, font-medium, font-semibold. Para cor de texto, prefira tokens semânticos: text-foreground, text-muted-foreground, text-primary, text-destructive, etc. (ver Cores).
Exemplo
Exemplo
Parágrafo padrão. Destaque