DS-001 — Cores e Tokens de Design
Paleta de cores extraída do Figma SISGEA (1:307) e dos CSS variables do SISGHA V2.0.
Cores Principais
| Token CSS | Hex | Uso |
|---|---|---|
--ldsa-green-1/100 | #2F9E41 | Verde primário (SISGHA) — botões, sidebar, destaques |
--ldsa-green-1/10 | rgba(47,158,65,0.1) | Verde primário 10% — backgrounds suaves, toggle ativo |
#39A048 | #39A048 | Verde sidebar (SISGEA) |
#118D3B | #118D3B | Verde escuro — botões de ação, bordas ativas |
#1BBA47 | #1BBA47 | Verde claro — textos de link, destaques secundários |
Cores Neutras
| Token CSS | Hex | Uso |
|---|---|---|
--ldsa-bg | #FFFFFF | Fundo principal (tema claro) |
--ldsa-text/default | #050F07 | Texto principal (quase preto) |
--ldsa-grey/100 | #9F9F9F | Cinza — bordas, placeholders, labels desabilitados |
--ldsa-grey/70 | rgba(159,159,159,0.7) | Cinza 70% — divisores, bordas sutis |
--ldsa-grey/20 | rgba(159,159,159,0.2) | Cinza 20% — backgrounds de elementos inativos |
--ldsa-white/100 | #FFFFFF | Branco puro — texto sobre fundo verde |
#9AB69E | #9AB69E | Verde-cinza — bordas SISGEA, textos secundários |
#ADADAD | #ADADAD | Cinza médio — textos desabilitados |
#F0F0F0 | #F0F0F0 | Cinza claro — backgrounds de inputs desabilitados |
#EBF8EF | #EBF8EF | Verde claro pastel — background do perfil de usuário |
Cores Semânticas
| Token CSS | Hex | Uso |
|---|---|---|
--ldsa-red/100 | #CD191E | Vermelho — botão cancelar, erros |
#E9001C | #E9001C | Vermelho intenso — textos de erro, alertas |
--ldsa-blue/100 | #1E5DCC | Azul — info boxes, links informativos |
--ldsa-blue/10 | rgba(30,93,204,0.1) | Azul 10% — background de info boxes |
--ldsa-text/green | #2F9E41 | Verde para texto — links, labels ativos |
Sombras
| Nome | Valor | Uso |
|---|---|---|
| Shadow principal | 0px 0px 33.5px 0px rgba(17,141,59,0.15) | Cards, formulários, modais |
| Shadow sidebar | 0px 0px 30px 0px rgba(17,141,59,0.15) | Sidebar DAPE e SISGEA |
| Shadow header | 0px 0px 33.5px 0px rgba(5,15,7,0.1) | Header do aluno |
| Shadow escura | 0px 0px 30px 0px rgba(0,0,0,0.25) | Elementos com mais destaque |
Tipografia
| Família | Peso | Tamanho | Uso |
|---|---|---|---|
| Poppins | Bold (700) | 20-22px | Títulos principais |
| Poppins | SemiBold (600) | 12-15px | Labels, botões, subtítulos |
| Poppins | Medium (500) | 11px | Corpo de texto, placeholders |
| Poppins | Regular (400) | 8-9px | Textos auxiliares, info boxes |
Bordas
| Raio | Uso |
|---|---|
8px | Botões, inputs, cards, modais |
8.93px | Select items (ligeiramente maior) |
10px | Cards de dia da semana |
100px | Avatares (circular) |
4px | Badges, tags, items de sidebar |
Fonte: Figma SISGEA paleta (1:307) + CSS variables do SISGHA V2.0.