Design System MBL
Tokens visuais extraidos do design system oficial, mapeados para Tailwind CSS.
Cores
| Nome | Hex | Classe Tailwind | Uso |
|---|---|---|---|
| Verde Primario | #5CBCAE | bg-mbl-verde / text-mbl-verde | Botoes, CTAs, header, links ativos |
| Verde Secundario | #47D1BC | bg-mbl-verde-secundario | Gradientes, elementos graficos |
| Laranja Destaque | #EB894F | bg-mbl-laranja | Alertas, destaques pontuais |
| Preto | #000000 | bg-mbl-preto | Texto principal, headings |
| Branco | #FFFFFF | bg-mbl-branco | Fundo de cards, texto em fundo escuro |
| Cinza Fundo | #F9F9F9 | bg-mbl-cinza-fundo | Background da pagina |
| Cinza Input | #F2F2F2 | bg-mbl-cinza-input | Background de form fields |
| Cinza Rodape | #EEEEEE | bg-mbl-cinza-rodape | Rodape |
Tipografia
Fonte: Afacad (Google Fonts) — pesos 400, 500, 600, 700.
| Classe | Tamanho | Line Height | Uso |
|---|---|---|---|
text-display | 48px | 1.2 | Titulos hero/cover |
text-h1 | 42px | 1.2 | Titulo principal da pagina |
text-h2 | 30px | 1.3 | Titulos de secao |
text-h3 | 22px | 1.3 | Titulos de cards/subsecoes |
text-h4 | 18px | 1.4 | Subtitulos, labels |
text-body | 16px | 1.6 | Texto corpo |
text-small | 14px | 1.5 | Texto secundario |
text-caption | 12px | 1.4 | Labels, metadata |
text-overline | 10px | 1.4 | Categorias (uppercase) |
Espacamento
Base de 4px. Use as classes padroes do Tailwind (p-1 = 4px, p-4 = 16px, etc.).
| Token | Valor | Uso |
|---|---|---|
| xs | 4px | Gap entre icone e texto |
| sm | 8px | Padding de badges |
| md | 16px | Padding de form fields, grid gaps |
| lg | 24px | Padding de cards |
| xl | 32px | Gap entre cards, margens de secao |
| 2xl | 48px | Margem entre secoes principais |
Border Radius
| Classe | Valor | Uso |
|---|---|---|
rounded-sm | 4px | Badges pequenos |
rounded-md | 6px | Botoes, form fields |
rounded-lg | 12px | Containers, preview sections |
rounded-xl | 20px | Cards de conteudo |
rounded-full | 9999px | Avatares, badges circulares |
Sombras
| Classe | Uso |
|---|---|
shadow-sm | Separacao sutil de camadas |
shadow-md | Cards em estado default |
shadow-lg | Cards em hover, modals |
shadow-xl | Elementos flutuantes, dialogs |
Icones
Biblioteca: Lucide React (outline, stroke 1.5-2px).
- Tamanho padrao: 24x24 (navegacao, botoes)
- Tamanho pequeno: 16x16 (inline com texto)
- Tamanho grande: 32x32 (cards, hero)
- Cor: herda do texto (
currentColor)
Componentes UI
Componentes base em apps/web/src/components/ui/:
Button— Variantes: primary (usavar(--cor-primaria)), outline (borda branca), dark (preto). Background dinamico por nucleo.Input— Com label, estado de erro, foco na cor primaria do nucleoDataTable— Tabela reutilizavel com paginacao, busca com debounce, filtros, ordenacao de colunas. Layout responsivo: desktop exibe tabela, mobile exibe cards empilhados.
Sidebar Branding
A sidebar exibe a identidade visual do nucleo dinamicamente:
- Logo: Imagem do nucleo carregada do Supabase Storage. Fallback para logo padrao MBL se nao configurada.
- Nome do nucleo: Exibido abaixo do logo
- Cor primaria: Itens ativos da sidebar usam
var(--cor-primaria)como cor de texto e background sutil - Avatar do usuario: Exibido no footer da sidebar com nome e cargo
PushPermission Component
Banner que solicita permissao de notificacoes push ao usuario.
- Icone:
Bell(Lucide React) - Botoes: Ativar (solicita permissao do browser) e Agora nao (dismisses o banner)
- Exibido apenas quando o browser suporta Push API e a permissao ainda nao foi concedida ou negada.
PWA Install Banner
Banner que sugere a instalacao do app como PWA.
- Utiliza
sessionStoragepara nao re-exibir na mesma sessao apos dismiss. - Escuta o evento
beforeinstallpromptdo browser para acionar a instalacao nativa. - Em iOS (que nao suporta
beforeinstallprompt), exibe fallback com instrucoes manuais: "Compartilhar → Adicionar a Tela de Inicio".
AI Chat Widget
Widget flutuante de chat com inteligencia artificial para coordenadores e administradores.
Botao Flutuante
- Icone:
Sparkles(Lucide React) - Posicao: canto inferior direito da tela (
fixed bottom-6 right-6) - Visibilidade: apenas para usuarios com cargo COORDENADOR ou ADMINISTRADOR
- Clique abre/fecha o painel de chat
Painel de Chat
- Largura: 360px, altura adaptavel
- Header com titulo e botao de fechar
- Area de mensagens com scroll
- Chips de sugestoes de perguntas (ex: "Quantos membros?", "Ranking CC")
- Campo de input com botao de enviar
Tipos de Mensagem
text— Texto com suporte a markdown (tabelas, listas, negrito)email_preview— Preview de email renderizado com assunto e conteudo HTMLaction_confirm— Acao pendente com botoes de confirmar/cancelar (ex: creditar moedas, alterar cargo)
Theming Dinamico por Nucleo
Cada nucleo pode ter cores personalizadas que sao aplicadas dinamicamente via CSS variables:
CSS Variables
var(--cor-primaria)— Cor principal do nucleo, definida emdashboard/layout.tsxvar(--cor-secundaria)— Cor secundaria do nucleo, definida emdashboard/layout.tsx
Onde sao usadas
- Button component: Usa
var(--cor-primaria)como background color nos botoes primarios - Sidebar: Exibe o logo e nome do nucleo dinamicamente, com a cor primaria nos elementos ativos
- Login page: Usa as cores do nucleo para criar um gradiente personalizado na tela de login
- Headers e CTAs: Elementos de destaque utilizam a cor primaria do nucleo
Fallback
Quando o nucleo nao tem cor configurada, o sistema utiliza o verde padrao #5CBCAE como fallback para --cor-primaria.