Tipografia

O Arenito usa duas famílias tipográficas com papéis distintos: Space Grotesk para títulos e Inter para corpo de texto. Dark mode adapta as cores automaticamente.

foundation/typography.csstokens/variables.cssAbrir no Figma

Fontes

Duas famílias tipográficas com papéis complementares.

Papel	Fonte	Pesos	Uso
Headers	Space Grotesk	Medium (500), Bold (700)	Títulos e subtítulos
Paragraphs	Inter	Regular (400), Medium (500)	Corpo de texto, labels, inputs

Exemplos

Visualização em tamanho real de cada token tipográfico do sistema.

Header 01

Space Grotesk32px / 40pxBold 700--font-size-h1

Header 02

Space Grotesk20px / 30pxMedium 500--font-size-h2

Paragraph 01

Inter16px / 26pxMedium 500--font-size-p1

Paragraph 02

Inter16px / 26pxRegular 400--font-size-p2

Paragraph 03

Inter14px / 24pxMedium 500--font-size-p3

Paragraph 04

Inter14px / 24pxRegular 400--font-size-p4

Paragraph 05

Inter12px / 22pxMedium 500--font-size-p5

Paragraph 06

Inter12px / 22pxRegular 400--font-size-p6

Tokens de headers

Headers usam a fonte Space Grotesk e são aplicados em elementos h1-h6 e classes utilitárias.

Token	Classe	Size	Line Height	Weight	Uso
Header 01	.h1, .heading-1, .header-01	32px	40px	Bold (700)	Título principal de páginas
Header 02	.h2, .heading-2, .header-02	20px	30px	Medium (500)	Subtítulos e seções
Header 03	.h3	18px	28px	Medium (500)	Subtítulos terciários
Header 04	.h4	16px	24px	Medium (500)	Subtítulos quaternários
Header 05/06	.h5, .h6	14px	24px	Medium (500)	Subtítulos menores (usa Inter)

/* Variáveis */
--font-heading: 'Space Grotesk', sans-serif;
--font-size-h1: 32px;
--line-height-h1: 40px;
--font-size-h2: 20px;
--line-height-h2: 30px;

<h1>Título da página</h1>
<h2>Subtítulo da seção</h2>

<!-- Ou com classes -->
<span class="h1">Título com classe</span>
<span class="header-02">Subtítulo com classe</span>

Tokens de paragraphs

Paragraphs usam a fonte Inter. Cada tamanho tem duas variantes: medium (ímpares) e regular (pares).

Token	Classe	Aliases	Size	Line Height	Weight	Uso
Paragraph 01	.p1, .paragraph-01	.text-base-medium	16px	26px	Medium (500)	Texto principal, conteúdo importante
Paragraph 02	.p2, .paragraph-02	.text-base, .text-base-regular	16px	26px	Regular (400)	Corpo de texto regular
Paragraph 03	.p3, .paragraph-03	.text-sm-medium	14px	24px	Medium (500)	Labels, badges, botões
Paragraph 04	.p4, .paragraph-04	.text-sm, .text-sm-regular	14px	24px	Regular (400)	Texto secundário pequeno
Paragraph 05	.p5, .paragraph-05	.text-xs-medium	12px	22px	Medium (500)	Texto auxiliar, metadados
Paragraph 06	.p6, .paragraph-06	.text-xs, .text-xs-regular	12px	22px	Regular (400)	Notas de rodapé, timestamps

/* Variáveis */
--font-body: 'Inter', sans-serif;
--font-size-p1: 16px;   --line-height-p1: 26px;
--font-size-p2: 16px;   --line-height-p2: 26px;
--font-size-p3: 14px;   --line-height-p3: 24px;
--font-size-p4: 14px;   --line-height-p4: 24px;
--font-size-p5: 12px;   --line-height-p5: 22px;
--font-size-p6: 12px;   --line-height-p6: 22px;

<p class="p1">Texto importante em medium</p>
<p class="p2">Corpo de texto regular</p>
<p class="p3">Label ou badge</p>
<p class="p4">Texto secundário</p>
<p class="p5">Metadado em medium</p>
<p class="p6">Nota de rodapé</p>

Pesos

Três pesos disponíveis para controlar a hierarquia visual do texto.

Variável	Valor	Classes
--font-weight-regular	400	.fw-regular, .font-regular
--font-weight-medium	500	.fw-medium, .font-medium
--font-weight-bold	700	.fw-bold, .font-bold, .font-weight-bold

Classes utilitárias

Classes CSS prontas para aplicar estilos de texto diretamente no HTML.

Cor de texto

Classe	Variável semântica
.text-primary	--text-base-neutral-default
.text-secondary	--text-base-neutral-secondary
.text-muted	--text-base-neutral-subtle
.text-light	--text-base-neutral-white
.text-success	--text-base-success-default
.text-warning	--text-base-warning-default
.text-danger	--text-base-error-default
.text-accent	--accent-300

Alinhamento

Classe	Efeito
.text-left	Alinha à esquerda
.text-center	Centraliza
.text-right	Alinha à direita
.text-justify	Justifica

Transformação

Classe	Efeito
.text-uppercase	MAIÚSCULAS
.text-lowercase	minúsculas
.text-capitalize	Primeira Maiúscula
.text-normal	Remove transformação

Decoração

Classe	Efeito
.text-underline	Sublinhado
.text-line-through	Tachado
.text-no-decoration	Remove decoração

Estilo

Classe	Efeito
.text-italic	Itálico
.text-normal-style	Estilo normal

Overflow

Classe	Efeito
.text-truncate	Corta com reticências (...)
.text-nowrap	Impede quebra de linha
.text-break	Quebra palavras longas
.text-wrap	Permite quebra de linha

Links

Estilos padrão de links e classes utilitárias para diferentes hierarquias.

Classe	Cor	Hover
a (padrão)	--accent-300	--accent-400 + underline
.link-primary	--accent-300	--accent-400
.link-secondary	--text-base-neutral-secondary	--text-base-neutral-default
.link-muted	--text-base-neutral-subtle	--text-base-neutral-secondary

<a href="#">Link padrão</a>
<a href="#" class="link-secondary">Link secundário</a>
<a href="#" class="link-muted">Link discreto</a>

Listas

Estilos base para listas e classe utilitária.

Classe	Efeito
ul, ol	Herdam fonte Inter, tamanho p2
.list-unstyled	Remove bullets e padding

Use medium (ímpares: p1, p3, p5) para elementos que precisam de destaque: labels, botões, badges. Use regular (pares: p2, p4, p6) para corpo de texto e conteúdo de leitura.

Versão0.1.0

Última atualização13 mar 2026

Caminhosrc/foundation/typography.css