Um sistema de cores da IU é um conjunto de variantes de cores criadas a partir de uma única cor inicial. Ele fornece escalas consistentes de claro a escuro para tokens de design, botões, planos de fundo e cores de texto.
Selecione uma cor inicial e escolha um estilo (Tailwind ou Material). A ferramenta gera uma paleta completa de 10 etapas, do claro (50) ao escuro (900), perfeita para sistemas de design.
Frequently Asked Questions
Q: O que é um token de design?
O que é um token de design? Um token de design é um valor nomeado que armazena um atributo de design, como uma cor, usado de forma consistente em um sistema de design.
Q: Por que preciso de 10 tons?
Por que preciso de 10 tons? Diferentes elementos da IU precisam de diferentes níveis de contraste. Uma escala de 10 etapas oferece flexibilidade para planos de fundo, bordas, estados de foco e texto.
Q: O que é uma paleta de tokens de design?
O que é uma paleta de tokens de design? Uma paleta de tokens de design é um conjunto sistemático de variáveis de cores (primária, secundária, superfície, texto) geradas a partir de uma única cor de marca. Ele garante consistência em toda a sua IU.
Q: Posso exportar para sistemas de design diferentes do Tailwind?
Posso exportar para sistemas de design diferentes do Tailwind? Sim, a ferramenta exporta para propriedades personalizadas CSS, variáveis SCSS e formato de configuração Tailwind. Copie o formato que corresponde à sua pilha.
Q: Como faço para lidar com o modo escuro com esta ferramenta?
Como faço para lidar com o modo escuro com esta ferramenta? Gere primeiro sua paleta de modo claro e, em seguida, use a mesma cor inicial com valores reduzidos de saturação e luminosidade para o modo escuro. Muitos sistemas de design invertem as cores da superfície e do texto.