Versão 1.0.0
Sistema de padrões para as aplicações do SIMEC
Este Design System estabelece padrões de UI e implementação para os produtos digitais do SIMEC - FNDE. Desenvolvido inicialmente para bibliotecas Bootstrap a partir da versão 3.0, que assegura compatibilidade, flexibilidade e reutilização em qualquer stack compatível ou aplicações geradas por IA.
Principles - princípios
O que orienta cada decisão do Design System.
- Base no Bootstrap 3Parte do que o SIMEC já usa, com compatibilidade a partir da versão 3.0 e evolução para as próximas.
- Fiel ao FigmaCada token nasce no Figma do SIMEC Obras e indica sua origem, sem valores soltos.
- Reutilizável em qualquer stackCSS e JSON por URL, componentes React via GitHub e contexto pronto para telas geradas por IA.
- Consistência antes de novidadeUma peça padrão para cada necessidade: mais previsibilidade para quem usa e para quem desenvolve.
- Documentado e copiávelTodo componente tem exemplo ao vivo e código pronto para copiar.
- Resolve ruídos reaisCada padrão nasce da análise de usabilidade do Obras 2.0: cor com significado, aviso que fecha, ícone com rótulo e nada que dependa de hover.
Guidelines - diretrizes gerais
Os fundamentos visuais que valem para toda tela do SIMEC.
- CoresAzul primário #2e6db4, vermelho de aviso do SIMEC e cores de estado do Bootstrap 3.
- TipografiaEscala de tamanhos e pesos para títulos, texto e rótulos.
- Espaço e alturasEspaçamentos e alturas de controles: 22, 30, 34 e 46 px.
- IconografiaFont Awesome para o domínio do SIMEC e Lucide para os componentes.
System status - status do sistema
Situação de cada área na versão 1.0.0.
| Área | O que inclui | Status |
|---|---|---|
| Foundations - fundamentos | Cores, tipografia, espaçamento, alturas, raios, iconografia | Estável |
| Tokens | 90 tokens em 12 grupos (CSS e JSON) | Estável |
| Components - componentes | Botão, campo, rádio e checkbox, abas, tabela, alertas, modal, rótulos | Estável |
| Navigation menu - menu de navegação | Desktop e mobile, com e sem ícones, em CSS e JS puros | Estável |
| Downloads | tokens (CSS, JSON, SCSS, LESS, JS) e menu (CSS, JS, HTML) | Estável |
| Systemic issues - ruídos sistêmicos | 6 de 21 pontos da análise do Obras 2.0 já resolvidos no DS; 5 parciais e 6 planejados | Em andamento |
| Templates - modelos · peças de página | Cabeçalho, menu, barra de ambiente, quadro da obra, rodapé | Estável |
| Templates - modelos · telas | Conclusão da obra (proposta aprovada) | Estável |
| Templates - modelos · telas | Listagem, formulário e login | Em breve |
Acessibilidade e tema escuro não fazem parte desta versão.