fundo da pagina e area de leitura.
design system
o que usar quando for montar a tela.
cor de clique, fundo, botao, campo e estado. o resto so entra quando resolver um problema real.
--canvas: #f1e9d6; --text-base: #1f1b16; --ui-action: #245f51; --screen-glow: #8bd891;
01 / tokens
cores com funcao
use estes nomes antes de inventar cor nova. se faltar um papel, documenta antes de virar padrao.
painel, apoio e botao secundario.
texto, titulo, borda e icone escuro.
o que a pessoa pode clicar ou escolher.
o brilho do ai dentro de uma tela escura.
erro, alerta serio e acao destrutiva.
02 / componentes
componentes sem firula
se parece botao, precisa fazer algo. se parece campo, precisa explicar o que entra. se parece status, precisa dizer onde parou.
botoes
um primario por bloco. verbo direto. destino real.
assinatura ai
ai e marca. no meio da frase, escreva resolvi com ai sem efeito.
campo
label sempre visivel. exemplo curto. erro dizendo como corrigir.
estado
nao basta trocar cor. diga se esta vazio, processando, com erro ou pronto.
pronto
3 pontos para revisar
confirme antes de enviar.
janela
use quando houver tela, preview ou saida. fora disso, vira enfeite.
recebe entrada, separa pontos, mostra o que revisar.
texto tecnico
mono e para path, token, status e codigo curto. texto normal continua sans.
brand-assets/tokens/resolvicomai-tokens.css
03 / aplicacao
antes de criar mais coisa
a pergunta nao e "fica bonito?". e "a pessoa entende melhor o que fazer agora?".
tem acao?botao verde, texto direto e link funcionando.
tem preview?pode usar janela; sem preview, nao precisa.
tem post?uma frase principal, logo legivel e sem excesso de detalhe.
tem codigo?mono pequeno. nada de transformar a marca em terminal.
so encheu espaco?apaga.
04 / arquivos
arquivos para usar agora
o necessario para implementar sem abrir cinco documentos.