Simulador de componentes

Visualize botao, card, barra superior e formulario e exporte a mesma paleta em JSON, CSS, Tailwind e Figma abaixo.

Marca Início · Preços · Contato

Card de exemplo

Texto descritivo para validar hierarquia e contraste.

Dica: confira o contraste texto e fundo no validador WCAG.

Exportar paleta (cores do simulador)

Os quatro valores acima viram tokens nomeados: primary, surface, text e border. A exportacao atualiza ao mudar as cores.