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 | Quinze passos de 2 a 128 px (--ob-space-*) e apelidos por intenção. |
| Raios | Oito raios e um apelido por família de componente. |
| Sombras | Cinco elevações e o anel de foco. |
| Camadas e opacidade | A ordem fixa de empilhamento e os níveis de transparência com significado. |
| Breakpoints | As quatro larguras em que o layout muda, a regra mobile-first e o uso em CSS e JavaScript. |
| Movimento | Cinco durações, quatro curvas e o respeito a quem pede menos movimento. |
| Iconografia | Phosphor, o registro Icons e as marcas. |
| Marca | Logo e variações. |