Visão geral

Fundações são os design tokens: variáveis CSS com prefixo --ob- que guardam cores, tipografia, espaçamentos, raios, sombras e movimento. Componentes e páginas os consomem; ninguém escreve valor solto.

A fonte única é o arquivo tokens.css do pacote, e as tabelas destas páginas são geradas dele, então nunca ficam desatualizadas. Cada tabela mostra o valor no tema claro e, quando muda, no escuro.

Fundação	O que define
Cores	Paleta da marca, neutros e cores semânticas.
Tipografia	Famílias, pesos, escala de tamanhos e entrelinhas.
Espaçamento	Escala de 4 px e apelidos por intenção.
Raios	Arredondamento de cartões, botões e campos.
Sombras	Elevação nos temas claro e escuro.
Camadas e opacidade	Ordem de empilhamento e escalas de transparência.
Breakpoints	Larguras de referência para layouts responsivos.
Movimento	Durações e curvas de animação.
Iconografia	Phosphor, o registro Icons e as marcas.
Marca	Logo e variações.