Ajuste a Base da Escala
16px
Este valor define `1rem` em todo o sistema. Mova o slider para escalar todos os tokens em tempo real.
Exportar Tokens
Benefícios da Regra do Múltiplo de 4px
- Consistência visual: Cria ritmo e harmonia, reforçando a identidade visual.
- Hierarquia e foco: Organiza o conteúdo e destaca o que é mais importante.
- Legibilidade e usabilidade: Facilita a interpretação dos elementos, melhorando a experiência do usuário.
- Agrupamento lógico: Agrupa visualmente elementos relacionados, evitando confusão.
- Comunicação com desenvolvimento: Facilita a implementação, reduzindo dúvidas e retrabalho.
- Escalabilidade e manutenção: Permite criar sistemas fáceis de manter e adaptar.
- Responsividade: Garante ajustes consistentes em diferentes tamanhos de tela.
Exemplos Interativos
Card de Exemplo
Este componente usa os tokens gerados para `padding`, `border-radius`, `font-size`, e `box-shadow`.
Anatomia do Card
Tokens de Espaçamento e Tamanho
| Token | PX | REM | Visualização |
|---|
Tokens de Tipografia
| Token | Size (PX/REM) | Line Height (PX/REM) | Exemplo |
|---|
Outros Tokens
| Tipo | Token | Valor | Visualização |
|---|