Fontes, tamanhos e pesos tipográficos do Kobana UI.
Conforme Branding Book, a Kobana usa duas famílias tipográficas:
Família Token Tailwind Uso Work Sans sansfont-sansUso geral: textos, títulos, interfaces. Clara, neutra e legível. Syne displayfont-displayUso pontual: headings de destaque, números, hero titles. Forte personalidade — evitar textos longos.
< p class = "font-sans" >Texto em Work Sans (padrão do body)</ p > < h1 class = "font-display text-3xl font-bold" >Título em Syne</ h1 > import { fontFamily } from "@kobana/ui/tokens/typography" fontFamily.sans // "'Work Sans', sans-serif" fontFamily.display // "'Syne', sans-serif" Alinhados com os defaults do Tailwind CSS.
Token Valor Pixels Tailwind Uso xs0.75rem 12px text-xsCaptions, labels, badges sm0.875rem 14px text-smBody small, table cells base1rem 16px text-baseBody text lg1.125rem 18px text-lgSubtítulos xl1.25rem 20px text-xlTítulos de seção 2xl1.5rem 24px text-2xlTítulos de página 3xl1.875rem 30px text-3xlHero titles (usar font-display)
Token Valor Tailwind normal400 font-normalmedium500 font-mediumsemibold600 font-semiboldbold700 font-bold
Token Valor Tailwind tight1.25 leading-tightnormal1.5 leading-normalrelaxed1.75 leading-relaxed
{ /* Hero title — Syne */ } < h1 className = "font-display text-3xl font-bold leading-tight" > A gente cuida dos seus processos </ h1 > { /* Page title — Work Sans */ } < h2 className = "text-2xl font-semibold leading-tight" > Cobranças </ h2 > { /* Body text — Work Sans (padrão) */ } < p className = "text-sm text-muted-foreground leading-normal" > Gerencie suas cobranças em um só lugar. </ p >