UaiUI
Sistema de design com bordas retas, sombras duras e temas por tokens. Cada componente tem preview, código e requisitos de acessibilidade.
Introdução
UaiUI é um sistema de design com bordas retas, sombras duras e temas por tokens. Esta documentação mostra cada componente funcionando, com o código para copiar.
Princípios
- Uma fonte de verdade. As cores, medidas e densidades vêm das variables do Figma, exportadas para CSS. O CSS dos componentes só lê tokens.
- Tema e densidade por modo. Claro e Escuro mudam as cores; Desktop, Mobile e Compacto mudam tamanhos.
- Cor nunca é o único sinal. Estados e tons também mudam forma, ícone ou texto.
- Forma fixa. Borda de 2 px, raio zero e sombra reta de 2 a 4 px.
Componentes
Accordion
Esconde conteúdo secundário que a pessoa consulta sob demanda.
Button
Dispara uma ação. Três tipos (filled, outlined, ghost) e três estilos.
Toast
Aviso curto depois de uma ação ou de um evento; some sozinho.
Como ler cada página
Cada componente traz o Preview e o Código do mesmo exemplo, a instalação, quando usar e quando não usar, os atributos, e os requisitos de acessibilidade que ficam fora do Figma (papéis ARIA, teclado, movimento).
Esta é a primeira versão, com três componentes: accordion, button (com o botão de ícone) e toast. Os demais componentes do arquivo do Figma entram em seguida.