Typography
Tipografia baseada em Inter (variable font). Escala Tailwind padrão complementada por tamanhos customizados do Figma.
Font Family
Inter Variable
font-sans · OpenType features: cv02, cv03, cv04, cv11
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()
Escala Padrão (Tailwind)
Escala de tipografia built-in do Tailwind CSS. Usar preferencialmente.
text-4xl36pxDesign System
Títulos de seção (homepage)text-3xl30pxDesign System
Títulos de seção (mobile)text-2xl24pxDesign System
Títulos de páginatext-xl20pxDesign System
Subtítulostext-lg18pxDesign System
Títulos secundáriostext-base16pxDesign System
Corpo de textotext-sm14pxDesign System
Corpo compacto, labelstext-xs12pxDesign System
Captions, metadataTamanhos Customizados (Figma)
Tamanhos específicos usados no design do storefront (consultant-catalog). Usar com valores arbitrários do Tailwind.
| Tamanho | Classe | Uso | Preview |
|---|---|---|---|
| 37px | text-[37px] | Títulos de seção (Figma) | Aa |
| 26px | text-[26px] | Newsletter headline | Aa |
| 17px | text-[17px] | Nome da consultora | Aa |
| 15px | text-[15px] | Preços de produto | Aa |
| 11px | text-[11px] | Labels pequenas, search placeholder | Aa |
| 10px | text-[10px] | Utility bar, ícone labels | Aa |
| 9.5px | text-[9.5px] | Micro labels ("Minha") | Aa |
| 8px | text-[8px] | Descrição de produto no card | Aa |
Font Weights
font-normalRegular (400)
font-mediumMedium (500)
font-semiboldSemiBold (600)
font-boldBold (700)
Como usar
{/* Títulos de seção (homepage) */}
<h2 className="text-2xl font-bold sm:text-3xl md:text-[37px]">
Queridinhos das autênticas
</h2>
{/* Corpo */}
<p className="text-sm text-muted-foreground">
Descrição aqui
</p>
{/* Label pequena */}
<span className="text-[10px] font-semibold text-foreground">
Body Splash
</span>
{/* Preço */}
<p className="text-[15px] font-semibold text-primary">
R$ 49,90
</p>