Educa+ Design System
Sistema de identidade visual vivo, escalável e estruturado. Tokens, tipografia, cores e componentes do ecossistema Educa+.
Cores
Paleta cromática completa: DNA raiz (Indigo), 6 escalas funcionais, cores especiais, neutros e semânticos.
Indigo
DNA Raiz
50
#EEF2FF
100
#E0E7FF
300
#A5B4FC
500
#6366F1
600
#4F46E5
800
#3730A3
Azul
Dados
50
#EFF6FF
100
#DBEAFE
300
#93C5FD
500
#3B82F6
600
#2563EB
800
#1E40AF
Verde
Progresso
50
#F0FDF4
100
#DCFCE7
300
#86EFAC
500
#22C55E
600
#16A34A
800
#166534
Ambar
Acao
50
#FFF7ED
100
#FFEDD5
300
#FDBA74
500
#F97316
600
#EA580C
800
#9A3412
Roxo/Violeta
Criatividade
50
#FAF5FF
100
#F3E8FF
300
#D8B4FE
500
#A855F7
600
#9333EA
800
#6B21A8
Vermelho
Critico
50
#FEF2F2
100
#FEE2E2
300
#FCA5A5
500
#EF4444
600
#DC2626
800
#991B1B
Especiais
Ciano
#06B6D4
Rosa
#EC4899
Neutros Light
White
#FFFFFF
Gray 50
#F8FAFC
Gray 100
#F1F5F9
Gray 200
#E2E8F0
Gray 300
#CBD5E1
Gray 400
#94A3B8
Gray 500
#64748B
Gray 600
#475569
Gray 700
#334155
Gray 900
#0F172A
Neutros Dark
Dark 900
#0A0A0F
Dark 800
#1E1E2E
Dark 700
#2D2D3D
Dark 300
#94A3B8
Dark 100
#E2E8F0
White
#FFFFFF
Semanticos
Success
#22C55E
Warning
#F97316
Error
#EF4444
Info
#3B82F6
Tipografia
3 famílias tipográficas: Inter (UI), Plus Jakarta Sans (body), JetBrains Mono (dados). 18 tokens tipográficos.
Display
Display/XL
Design System
Inter ExtraBold / 64px / line-height 1.1 / letter-spacing -0.03em
Display/LG
Design System
Inter ExtraBold / 48px / line-height 1.15 / letter-spacing -0.02em
Headings
H1
Heading One
Inter Bold / 36px / line-height 1.2 / letter-spacing -0.01em
H2
Heading Two
Inter SemiBold / 28px / line-height 1.25 / letter-spacing -0.01em
H3
Heading Three
Inter SemiBold / 22px / line-height 1.3
H4
Heading Four
Inter Medium / 18px / line-height 1.4
H5
Heading Five
Inter Medium / 16px / line-height 1.4 / letter-spacing 0.01em
H6 Caps
HEADING SIX
Inter SemiBold / 12px / line-height 1.4 / letter-spacing 0.08em / uppercase
Body
Body/LG
The quick brown fox jumps over the lazy dog. Learning is a lifelong journey.
Plus Jakarta Sans Regular / 18px / line-height 1.6
Body/MD
The quick brown fox jumps over the lazy dog. Learning is a lifelong journey.
Inter Regular / 16px / line-height 1.5
Body/SM
The quick brown fox jumps over the lazy dog. Learning is a lifelong journey.
Inter Regular / 14px / line-height 1.5
Labels
Label/LG
Label Large
Inter Medium / 14px / line-height 1.4
Label/MD
Label Medium
Inter Medium / 12px / line-height 1.4 / letter-spacing 0.02em
Label/SM Caps
LABEL SMALL
Inter SemiBold / 11px / line-height 1.4 / letter-spacing 0.10em / uppercase
Data
Data/XL
12,345
JetBrains Mono Bold / 40px / line-height 1.1 / letter-spacing -0.02em
Data/LG
8,192
JetBrains Mono Medium / 28px / line-height 1.2 / letter-spacing -0.01em
Data/MD
2,048
JetBrains Mono Medium / 18px / line-height 1.3
Data/SM
512
JetBrains Mono Regular / 13px / line-height 1.4
Espaçamento
Escala de espaçamento baseada em 4px (sistema de 8px). 12 tokens de space-1 (4px) a space-24 (96px).
Sombras
6 níveis de sombra + shadow brand especial para elementos de destaque.
XS
0 0 1px rgba(15,23,42,0.05)
SM
0 2px 4px rgba(15,23,42,0.08)
MD
0 4px 12px rgba(15,23,42,0.10)
LG
0 8px 24px rgba(15,23,42,0.12)
XL
0 16px 40px rgba(15,23,42,0.14)
Brand
0 4px 16px rgba(99,102,241,0.25)
Border Radius
7 valores de border-radius de 4px (sm) a 24px (4xl).
sm
4px
md
6px
lg
8px
xl
12px
2xl
16px
3xl
20px
4xl
24px
Ícones
Tamanhos padrão de ícones usando Lucide React.
12px
14px
16px
20px
24px
32px
40px
Inputs
Campos de texto com estados: default, focus, error, disabled. Inclui textarea e select.
Cards
4 tipos de card: KPI, List, Step e Gradient.
MINHAS TURMAS
12
+2 novas turmas este mês
- Prova de Matematica corrigida
- Novo aluno matriculado
- Relatorio mensal gerado
- 1Preencha seus dados pessoais
- 2Configure suas turmas
- 3Convide seus alunos
Gerencie turmas, alunos e conteudos em um so lugar.
Alerts
4 variantes semanticas: success, warning, error, info.
Badges
Badges coloridos para categorias, status e labels.
Calendar
8 variantes: simples, dropdown, range, presets, datas desabilitadas, date picker, range picker e visualização.
Simples (data única)
Seleção de uma única data. Clique em um dia para selecionar.
Selecionado: 22 de maio de 2026
Com dropdown mês/ano
Navegação rápida via dropdowns para mês e ano.
Range (período com 2 meses)
Selecione um período de datas. O range é exibido visualmente entre os dois meses.
Periodo: 12/05/2026 - 26/05/2026
Com presets
Atalhos rápidos para datas comuns combinados com o calendário.
Com datas desabilitadas
Datas ocupadas aparecem riscadas e nao podem ser selecionadas.
Dias 15-22 do mês atual estão marcados como ocupados.
Date Picker (popover)
Botao que abre um popover com calendario para selecionar uma data.
Date Range Picker (popover)
Botão que abre um popover com 2 meses para selecionar um período.
Somente visualização (eventos)
Calendário com marcações de eventos, sem interação de seleção.
4 eventos marcados nos próximos dias.
Form Elements
Checkbox, Radio, Switch, Slider, Toggle, Toggle Group e OTP Input.
Checkbox
Radio Group
Switch
Slider
Toggle
Toggle Group
OTP Input
Data Display
Avatar, Table, Progress e Skeleton para exibicao de dados.
Avatar
Table
| Aluno | Turma | Progresso | Status |
|---|---|---|---|
| Ana Costa | Turma A | 85% | Ativo |
| Bruno Lima | Turma B | 62% | Ativo |
| Carla Souza | Turma A | 45% | Pendente |
| Diego Ferreira | Turma C | 90% | Ativo |
Progress
25%
60%
90%
Skeleton
Overlays
Dialog, Sheet, Drawer, Popover, Tooltip, Dropdown e Command Palette.
Command Palette
Disclosure
Accordion e Collapsible para conteudo expansivel.
Accordion
Collapsible
Detalhes adicionais
Extras
Toast (Sonner), Carousel, Hover Card, Scroll Area, Resizable e Context Menu.
Toast (Sonner)
Notificacoes toast com diferentes variantes.
Carousel
Componente de carrossel horizontal com navegacao por setas.
Hover Card
Card que aparece ao passar o mouse sobre um elemento.
Scroll Area
Area com rolagem customizada e scrollbar estilizada.
Resizable
Paineis redimensionaveis arrastando a alca central.
Context Menu
Clique com o botão direito na área abaixo para ver o menu.
Clique direito aqui