| 🏠 Página inicial | Voltar |
Referência de Estilos e Design
Este guia apresenta a proposta visual e os princípios estéticos adotados no sistema da Eniac Academy. Acreditamos que um design bem pensado é essencial para garantir uma experiência agradável, acessível e coerente para todos os usuários — estudantes, professores e gestores.
Importante: Este documento não contém todos os estilos em detalhes, mas serve como introdução ao sistema de design, explicando as ideias por trás das decisões visuais e como elas foram organizadas no projeto.
📌 Índice
Objetivo do Design
Nosso objetivo é criar uma identidade visual consistente, moderna e funcional, que reflita os valores da instituição e torne a navegação intuitiva, mesmo para usuários que não estão familiarizados com tecnologia.
Cada decisão, desde o tom da paleta de cores até o tamanho das sombras, foi pensada para garantir:
- Clareza visual
- Acessibilidade
- Facilidade de manutenção
- Coesão entre páginas e componentes
Estrutura do Design System
A documentação completa foi separada em duas partes principais:
1. Referência Técnica de Estilos (CSS)
Esta seção cobre os padrões técnicos utilizados no desenvolvimento:
- Paleta de cores
- Tipografia
- Espaçamentos
- Bordas e arredondamentos
- Sombras e profundidade
- Duração de animações e transições
- Breakpoints e responsividade
- Blurs e efeitos visuais
Além de mostrar os tokens visuais, esta seção ajuda a entender como reutilizar e manter esses estilos no código.
2. Referência Visual e Componentes (Figma)
Esta parte é focada na prototipagem visual feita no Figma. Lá você encontra:
- Layouts de páginas
- Mockups de telas
- Componentes reutilizáveis
- Padrões de interação
Essas ilustrações servem como guia visual para desenvolvedores e designers entenderem como os componentes se comportam na prática.
Por que usar um Design System?
Organizar os estilos em um sistema padronizado evita problemas como:
- Códigos duplicados e inconsistentes
- Dificuldade de leitura e manutenção
- Layouts quebrando em diferentes telas
- Dificuldade para novos desenvolvedores entenderem o projeto
Com essa estrutura clara, qualquer membro da equipe pode contribuir com confiança e manter a mesma linguagem visual em toda a aplicação.
Nota: Se for implementar novos estilos ou componentes, siga sempre as referências acima para manter a padronização e evitar conflitos visuais no sistema ou atualize o Design System.