Design Studio

Preview em Aplicação Real

Design que converte mais.

Veja na prática como as cores geradas interagem. A cor primária guia a ação, enquanto a complementar atrai a atenção para os detalhes cruciais.

Alta Performance

Testes provam que o contraste ideal aumenta a taxa de retenção dos usuários.

Acessibilidade

Cores calculadas utilizando WCAG para garantir leitura perfeita.

Integração Fácil

Copie as variáveis e aplique no seu ecossistema em minutos.

Ajustes do Vidro

GLASS
Código CSS:
Código HTML:
Código CSS:

Como Usar as Animações

  1. Passe o mouse nos blocos abaixo para visualizar o efeito.
  2. Clique no card da animação desejada para copiar o código CSS pronto.
  3. Cole o CSS no seu arquivo de estilos.
  4. Adicione a classe no seu elemento HTML. Exemplo: <button class="anim-bounce">Clique Aqui</button>

Mockup Interativo

Passe o mouse (hover) pelos elementos do site abaixo para ver as animações aplicadas na prática.

NOVIDADE

Microinterações que
engajam clientes.

Design focado em detalhes. Veja como pequenos movimentos ajudam a guiar o olhar do seu usuário e melhorar a conversão.

CNPJ: 67.608.658/0001-51