Ambiente de Desenvolvimento

Turmita — Catálogo do Design System

Guia visual de componentes, tokens semânticos de cores, tipografia, espaçamentos e estados de interação.

1. Tokens de Cores Fundamentais

Cores institucionais e semânticas definidas em CSS Variables, garantindo alto contraste e sobriedade.

Azul Profundo
#193A52
Estrutura & Display
Azul Petróleo
#327A86
Ação Primária (CTAs)
Fundo Principal
#F5F7F8
Superfície de Leitura
Cinza Azulado
#DCE6E9
Bordas e Divisores
Âmbar Institucional
#D89B52
Realces & Atenção

2. Botões & Ações Padronizadas

Hierarquia de botões clara com foco acessível e estados completos de hover e active.

Tamanhos:

3. Badges & Indicadores de Estado

Pills semânticas para validação de horário, status de homologação e tipo de vínculo.

Homologado
Em Análise
Conflito de Horário
Turma Multisseriada
Hora-Atividade
SEMED Joinville
Efetivo
40h Semanais

4. Banners de Alerta & Mensageria

Comunicação assertiva para regras da secretaria, avisos pedagógicos e integridade.

5. Estados Vazios e Carregamento (Skeleton)

Garantia de que a interface mantém estrutura visual previsível em todos os ciclos de vida.

Nenhuma pendência na matriz horária

Todas as turmas regulares e multisseriadas desta unidade escolar estão com as cargas horárias completadas.