Tokens de Tipografia

Design System · Arrow DS · Dimensão 02 Tipografia

Versão: 1.0 · Status: Validado
Âncora base: 16px (type.body.md)
Depende de:
Usado por: Dimensão 01 Cor (combinação de tokens), todos os componentes de UI

Princípios da Dimensão

Hierarquia comunica antes de qualquer palavra ser lida.
Um usuário olha para uma tela da Effecti e, antes de ler uma letra, já sabe o que é título, o que é dado, o que é ação, o que é suporte. Isso não acontece por acaso acontece por sistema.

Inter a serviço da clareza.
Inter não foi desenhada para ser bonita foi desenhada para ser lida. Otimizada para telas, com métricas verticais precisas e neutralidade que não compete com o conteúdo. Para a Effecti plataforma densa em informação, prazos e valores a tipografia precisa ser invisível a serviço da clareza.

Tokens semânticos, não valores arbitrários.
Nenhum valor bruto de font-size, font-weight ou line-height entra diretamente no código de produto. Todo elemento referencia um token semântico nomeado por intenção, não por valor.

Fundação

Propriedade	Valor	Descrição
Família	Inter	Única família tipográfica do sistema
Fonte	Google Fonts	`https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap`
Pesos carregados	400 · 500 · 600 · 700	Conjunto canônico nenhum outro peso é utilizado
Fallback	`-apple-system, BlinkMacSystemFont, sans-serif`	Pilha de segurança para carregamento

/* Declaração global */
:root {
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Regra

A Inter é a única família tipográfica do sistema. Nenhuma segunda família é introduzida inclusive para dados técnicos. A categoria type.code.* usa Inter com font-variant-numeric: tabular-nums para alinhamento de dígitos.

Pesos Canônicos

Token	Valor	Papel no sistema
`font.weight.regular`	400	Corpo de texto, descrições, placeholders
`font.weight.medium`	500	Labels de UI, botões, dados técnicos
`font.weight.semibold`	600	Headings secundários (md e sm)
`font.weight.bold`	700	Display, headings primários (xl e lg)

Regra

Apenas estes 4 pesos são permitidos no sistema. Os pesos 300, 800 e 900 da Inter não são utilizados. Qualquer necessidade de ênfase adicional deve ser resolvida por tamanho ou cor nunca por peso fora do conjunto canônico.

Tokens Semânticos

Estrutura de cada token

Cada token semântico empacota 5 atributos:

type.{categoria}.{tamanho}
├── font-size
├── font-weight
├── line-height
├── letter-spacing
└── font-variant-numeric  (apenas type.code.*)

Categoria: Display

Papel: Títulos de alto impacto. Heroes, onboarding, empty states, páginas institucionais. Nunca em UI operacional densa.

Token	Size	Weight	Line-height	Tracking
`type.display.2xl`	56px	700	100%	−0.03em
`type.display.xl`	48px	700	100%	−0.025em
`type.display.lg`	40px	700	105%	−0.02em
`type.display.md`	32px	700	110%	−0.015em

--type-display-2xl-size: 56px;
--type-display-2xl-weight: 700;
--type-display-2xl-line-height: 1;
--type-display-2xl-tracking: -0.03em;

--type-display-xl-size: 48px;
--type-display-xl-weight: 700;
--type-display-xl-line-height: 1;
--type-display-xl-tracking: -0.025em;

--type-display-lg-size: 40px;
--type-display-lg-weight: 700;
--type-display-lg-line-height: 1.05;
--type-display-lg-tracking: -0.02em;

--type-display-md-size: 32px;
--type-display-md-weight: 700;
--type-display-md-line-height: 1.1;
--type-display-md-tracking: -0.015em;

Boas práticas Display

• Usar em superfícies com espaço e respiro nunca em layouts densos
• Combinar com type.body.lg ou type.body.md como texto de suporte logo abaixo
• type.display.2xl e type.display.xl são exclusivos para marketing e onboarding nunca em telas de produto operacional
• O tracking negativo é intencional e obrigatório não sobrescrever
• Máximo de um token display por tela

Categorias de marketing: Editorial e Metric

Papel: preservar hierarquias expressivas do site institucional sem recorrer a números mágicos locais. editorial.lg atende depoimentos e manifestos em destaque; metric.xl atende indicadores numéricos protagonistas.

Token	Size	Weight	Line-height	Tracking
`type.editorial.lg`	36px	500	120%	−0.04em
`type.metric.xl`	70px	400	130%	−0.04em

--type-editorial-lg-size: 36px;
--type-editorial-lg-weight: 500;
--type-editorial-lg-line-height: 1.2;
--type-editorial-lg-tracking: -0.04em;

--type-metric-xl-size: 70px;
--type-metric-xl-weight: 400;
--type-metric-xl-line-height: 1.3;
--type-metric-xl-tracking: -0.04em;

• Usar somente em páginas institucionais e superfícies de marketing.
• Não aplicar em produto operacional, tabelas ou formulários.
• Manter no máximo um papel editorial e um conjunto métrico protagonista por seção.

Categoria: Heading

Papel: Títulos de seção, páginas, modais, cards. A espinha dorsal hierárquica do produto.

Token	Size	Weight	Line-height	Tracking
`type.heading.xl`	28px	700	115%	−0.01em
`type.heading.lg`	24px	700	120%	−0.008em
`type.heading.md`	20px	600	125%	−0.005em
`type.heading.sm`	18px	600	130%	−0.003em

--type-heading-xl-size: 28px;
--type-heading-xl-weight: 700;
--type-heading-xl-line-height: 1.15;
--type-heading-xl-tracking: -0.01em;

--type-heading-lg-size: 24px;
--type-heading-lg-weight: 700;
--type-heading-lg-line-height: 1.2;
--type-heading-lg-tracking: -0.008em;

--type-heading-md-size: 20px;
--type-heading-md-weight: 600;
--type-heading-md-line-height: 1.25;
--type-heading-md-tracking: -0.005em;

--type-heading-sm-size: 18px;
--type-heading-sm-weight: 600;
--type-heading-sm-line-height: 1.3;
--type-heading-sm-tracking: -0.003em;

Boas práticas Heading

• type.heading.xl → título de página, tela principal de seção
• type.heading.lg → título de modal, título de card de destaque, seção de detalhe
• type.heading.md → subtítulo de seção dentro de página, agrupador de conteúdo
• type.heading.sm → título de card menor, label de grupo em formulário longo
• Nunca pular mais de um nível hierárquico consecutivo (ex: heading.xl direto para body.sm)
• Heading nunca substitui label se o texto está associado a um campo ou dado, usar type.label.*

Categoria: Body

Papel: Texto corrido, descrições, parágrafos, conteúdo editorial. A voz da Effecti em extensão.

Token	Size	Weight	Line-height	Tracking
`type.body.lg`	18px	400	160%	0
`type.body.md`	16px	400	160%	0
`type.body.sm`	14px	400	155%	0
`type.body.xs`	12px	400	150%	0

--type-body-lg-size: 18px;
--type-body-lg-weight: 400;
--type-body-lg-line-height: 1.6;
--type-body-lg-tracking: 0;

--type-body-md-size: 16px;
--type-body-md-weight: 400;
--type-body-md-line-height: 1.6;
--type-body-md-tracking: 0;

--type-body-sm-size: 14px;
--type-body-sm-weight: 400;
--type-body-sm-line-height: 1.55;
--type-body-sm-tracking: 0;

--type-body-xs-size: 12px;
--type-body-xs-weight: 400;
--type-body-xs-line-height: 1.5;
--type-body-xs-tracking: 0;

Boas práticas Body

• type.body.md é o padrão absoluto para todo texto de produto ponto de partida de qualquer decisão
• type.body.lg é reservado para textos de alta atenção: primeiros parágrafos, descrições de onboarding, leads editoriais
• type.body.sm para descrições secundárias, tooltips longos, texto de suporte em cards
• type.body.xs é o menor corpo de texto permitido exclusivo para disclaimers, notas legais, termos. Nunca usar como texto principal
• O line-height de 160% em body.md e body.lg é crítico e não pode ser reduzido
• Texto corrido nunca usa peso acima de 400

Categoria: Label

Papel: Labels de campos, tags, badges, metadados, navegação, texto de UI compacta. Elementos que identificam, não descrevem.

Token	Size	Weight	Line-height	Tracking
`type.label.lg`	14px	500	100%	+0.01em
`type.label.md`	12px	500	100%	+0.015em
`type.label.sm`	11px	500	100%	+0.02em

--type-label-lg-size: 14px;
--type-label-lg-weight: 500;
--type-label-lg-line-height: 1;
--type-label-lg-tracking: 0.01em;

--type-label-md-size: 12px;
--type-label-md-weight: 500;
--type-label-md-line-height: 1;
--type-label-md-tracking: 0.015em;

--type-label-sm-size: 11px;
--type-label-sm-weight: 500;
--type-label-sm-line-height: 1;
--type-label-sm-tracking: 0.02em;

Boas práticas Label

• type.label.lg → label de campo de formulário, item de navegação, texto de botão secundário
• type.label.md → metadata de card (data, categoria, status), badge de tag
• type.label.sm → metadado de suporte, informação contextual mínima, label de ícone
• O tracking positivo é obrigatório compensa a perda de legibilidade em tamanhos pequenos
• Labels nunca quebram linha se o texto não cabe em uma linha, revisar o conteúdo ou usar type.body.sm
• type.label.sm de 11px nunca é usado em elementos interativos apenas em texto estático

Categoria: Code

Papel: Dados técnicos, valores monetários, números de processo, CNPJ, datas em contexto de dado estruturado. Categoria exclusiva da Effecti.

Token	Size	Weight	Line-height	Tracking	Numeric
`type.code.lg`	16px	500	140%	+0.01em	tabular-nums
`type.code.md`	14px	400	140%	+0.01em	tabular-nums
`type.code.sm`	12px	400	140%	+0.01em	tabular-nums

--type-code-lg-size: 16px;
--type-code-lg-weight: 500;
--type-code-lg-line-height: 1.4;
--type-code-lg-tracking: 0.01em;

--type-code-md-size: 14px;
--type-code-md-weight: 400;
--type-code-md-line-height: 1.4;
--type-code-md-tracking: 0.01em;

--type-code-sm-size: 12px;
--type-code-sm-weight: 400;
--type-code-sm-line-height: 1.4;
--type-code-sm-tracking: 0.01em;

/* Aplicação obrigatória em todos os type.code.* */
.type-code {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

Boas práticas Code

• type.code.lg → valor monetário em destaque (R$ 1.247.893,00), número de processo em heading de card
• type.code.md → número de pregão, UASG, CNPJ em ficha técnica
• type.code.sm → dados técnicos em tabelas densas, metadados de processo em espaço comprimido
• font-variant-numeric: tabular-nums é obrigatório garante alinhamento de colunas numéricas em tabelas
• Valores monetários sempre com separador de milhar e duas casas decimais
• Esta categoria usa Inter não é uma família mono separada

Regras Globais do Sistema

Line-height a decisão mais crítica

Categoria	Range	Razão
Display	100%–110%	Leitura rápida, impacto visual, nunca quebra em mais de 2 linhas
Heading	115%–130%	Equilíbrio entre peso e legibilidade em títulos multi-linha
Body	150%–160%	Legibilidade em texto corrido mínimo inegociável
Label	100%	Elemento de UI nunca quebra linha
Code	140%	Dados técnicos podem ocorrer em múltiplas linhas em tabelas

Regra crítica

line-height: 100% é proibido em qualquer token de body.

Letter-spacing tracking com intenção

Direção	Onde	Por quê
Negativo (−0.03em a −0.003em)	Display e Heading	Tamanhos grandes têm espaçamento óptico aumentado o tracking negativo compensa
Zero	Body	Corpo de texto em tamanho neutro não precisa de ajuste
Positivo (+0.01em a +0.02em)	Label e Code	Tamanhos pequenos perdem legibilidade tracking positivo abre as letras

O que nunca fazer

Proibido	Alternativa correta
Usar hex de cor diretamente no componente	Usar `color.content.*` da Dimensão 01
Usar `font-size` ou `font-weight` arbitrários	Usar o token semântico mais próximo
Usar `line-height: 100%` em body	Mínimo de 150% para qualquer body
Usar `type.label.sm` em elementos interativos	Usar `type.label.lg` como mínimo interativo
Misturar label e body no mesmo papel	Label identifica, body descreve papéis distintos
Usar `type.body.xs` como texto principal	Reservado para disclaimers e notas legais
Introduzir peso fora do conjunto canônico	Apenas 400, 500, 600, 700
Segunda família tipográfica para dados	Inter com `tabular-nums` resolve

Integração com Dimensão 01 Cor

Token tipográfico	Token de cor recomendado	Contexto
`type.display.*`	`color.content.primary`	Título principal
`type.heading.*`	`color.content.primary`	Título de seção
`type.body.md/lg`	`color.content.secondary`	Texto corrido
`type.body.sm/xs`	`color.content.secondary`	Texto de suporte
`type.label.*`	`color.content.tertiary`	Metadado, label de campo
`type.label.*`	`color.content.primary`	Label ativo, selecionado
`type.code.*`	`color.content.primary`	Dado técnico em destaque
`type.code.*`	`color.content.secondary`	Dado técnico secundário
qualquer token	`color.content.accent`	Link, ação textual
qualquer token	`color.feedback.error`	Erro, prazo crítico

Decisões Estratégicas Registradas

Inter exclusiva sem segunda família
Todo o sistema usa Inter. A categoria type.code.* não usa família mono separada usa font-variant-numeric: tabular-nums, que ativa glifos de largura fixa nativos da Inter. Identidade visual unificada, sem fragmentação tipográfica.

4 pesos canônicos 400, 500, 600, 700
O sistema formaliza 4 pesos canônicos, incluindo SemiBold (600). Nenhum outro peso é permitido sem decisão explícita.

Stop 28px adicionado lacuna corrigida
O sistema anterior saltava de 24px para 32px. O stop 28px (type.heading.xl) preenche a lacuna para headings de página em dashboards e modais.

Line-height por categoria, não por tamanho
Body recebe line-height 150%–160% independente do tamanho. Display e heading recebem valores comprimidos.

type.code. categoria exclusiva para dados técnicos*
Valores monetários, números de processo, CNPJ e datas em contexto estruturado recebem tratamento tipográfico próprio com tabular-nums.

Exemplos de Uso

Escala tipográfica completa

display · heading · body · label · code — renderizados

Display

display.xl

display.lg

display.md

Heading

heading.xl — 28px · 700

heading.lg — 24px · 700

heading.md — 20px · 600

heading.sm — 18px · 600

Body

body.md — 16px · 400 · 160% — Padrão absoluto para todo texto de produto

body.sm — 14px · 400 · 155% — Descrições secundárias, texto de suporte em cards

Label · Code

label.lg — 14px · 500 — Label de campo, item de nav, texto de botão

code.lg — R$ 1.247.893,00

Ficha de pregão — combinação realista

heading + body + label + code em contexto real

Pregão Eletrônico

Aquisição de Equipamentos de TI

Contratação de empresa especializada para fornecimento de computadores, monitores e periféricos.

Número

0045/2026

Valor estimado

R$ 1.247.893,00

Arquivos de Output Dimensão 02

Arquivo	Formato	Conteúdo
`effecti_tokens_typography.css`	CSS	Custom Properties todos os tokens semânticos
`effecti_tokens_typography.dart`	Dart	Tokens para Flutter/Material
`effecti_typography_scale_v1.svg`	SVG	Visualização da escala para validação no Figma

Effecti Programa de Governança de Design System · Dimensão 02 · v1.0