Padrão visual consistente para todo o ecossistema Alfeg
Estilos CSS prontos para copiar e colar. Inclui paleta de cores, componentes e animações.
Configuração Tailwind CSS com tema Alfeg. Pronto para usar em projetos React.
DownloadGuia detalhado com paleta de cores, componentes, exemplos e instruções de integração.
Ler DocumentaçãoCores OKLCH otimizadas para perceptibilidade visual em light e dark mode
Botões, cards, inputs e muito mais prontos para usar
Efeitos flutuantes, glow e gradientes animados
Suporte nativo a tema claro e escuro
Mobile-first com breakpoints Tailwind
Contraste adequado e suporte a navegação por teclado
<!-- 1. Importe o CSS -->
<link rel="stylesheet" href="https://auth.alfeg.com.br/design/alfeg-theme.css">
<!-- 2. Use as classes -->
<button class="btn-alfeg">Entrar</button>
<div class="glass-card">Seu conteúdo</div><button class="btn-alfeg">Clique aqui</button><div class="glass-card rounded-2xl p-6">
Seu conteúdo aqui
</div><input class="input-elegant" placeholder="Digite aqui" /><h1 class="text-gradient-alfeg">Bem-vindo</h1><div class="bg-animated min-h-screen">
Seu conteúdo aqui
</div>CSS: https://auth.alfeg.com.br/design/alfeg-theme.css
Tailwind Config: https://auth.alfeg.com.br/design/tailwind.config.ts
Documentação: https://auth.alfeg.com.br/design/README.md
Início Rápido: https://auth.alfeg.com.br/design/QUICK_START.mdCopie o arquivo alfeg-theme.css para seu projeto e comece a usar!