Design System v7 — Proposta
MdFlow
Design System
Identidade visual preservada. Componentes lapidados. Consistência em todas as 15 páginas.
Manrope 900 — Display
#34d399 — Verde Mint (brand)
Warm Charcoal — Background
01 — Identidade Visual
Brand Guide → DS v7
Mantemos 100% da identidade do manual. Alinhamos o DS ao brand guide.
O que mantemos
✓
Verde Mint — cor primária da marca, símbolo de tech e inovação
✓
Manrope — fonte display (headings, números, logo)
✓
Warm Charcoal — background escuro com tom quente
✓
Minimalismo funcional — cada elemento tem um propósito
✓
Bordas arredondadas — elemento da família md
O que lapidamos
↑
Verde primário: #20c997 → #34d399 (alinhado ao brand guide)
novo
7 níveis de background (escala consistente vs 4 atuais)
novo
Radius aumentado: 8px → 10px (mais suave, brand-aligned)
novo
Motion system — spring physics, easing curves
novo
Component tokens — cada componente com vars próprias
02 — Paleta de Cores
Cores alinhadas ao Brand Guide
A única mudança na cor primária é o ajuste para #34d399 — exatamente o valor do manual de identidade.
Cor primária — comparação
ATUAL#20c997 — hsl(162, 72%, 45%) — verde mais escuro/saturado
v7 (BRAND GUIDE)#34d399 — hsl(158, 64%, 52%) — verde mint exato do manual
→
O v7 é mais luminoso — melhora contraste e brilho na tela
Paleta completa v7
Backgrounds — 7 níveis (escala warm)
Charts — 6 cores (nunca monocromático)
03 — Tipografia
Escala tipográfica definida
A v7 define uma escala completa com tamanhos, pesos e usos específicos — sem improvisação.
H1 — Display
Manrope 900 · 48px / 56px · letter-spacing: -0.02em · Uso: títulos de página, números grandes
H2 — Section
Manrope 800 · 32px · Uso: seções principais, cabeçalhos de modal
H3 — Card Title
Manrope 700 · 20px · Uso: títulos de card, drawer headers
Body Large — Conteúdo principal com informação de destaque
Inter 500 · 15px / 24px · Uso: parágrafos principais, descrições
Body — Texto padrão de interface, labels, botões
Inter 400 · 14px / 22px · Uso: corpo geral
Caption — Metadados, timestamps, labels de tabela
Inter 400 · 12px / 18px · Uso: informações secundárias
OVERLINE — CATEGORIA / RÓTULO
Inter 700 · 11px · uppercase · letter-spacing: 0.1em · Uso: categorias, seções
0001234-56.2026.8.21.0001 — CNJ / CPF / código
JetBrains Mono 400 · 13px · Uso: CNJ, CPF, OAB, valores monetários em tabela, código
04 — Componentes
Biblioteca de componentes lapidada
Cada componente tem tokens próprios, estados definidos e comportamento documentado.
Botões — hierarquia completa
KPI Cards — Animação de entrada com stagger
⚖️
Acordos no mês
R$ 48.200
↑ +12% vs mês anterior
📋
Intimações hoje
23
↑ 4 urgentes
⚡
Petições geradas
187
↑ OlivIA: 143 (76%)
🏛
Processos ativos
5.816
↓ 12 com prazo hoje
Badges — status e categorias
Ativo
Aguardando
Urgente
Em análise
Arquivado
✓ Aprovado
TJRS
REL.CR
Tabela — padrão para listagens
| Processo |
Cliente |
Status |
Valor |
Prazo |
| 0001234-56.2026.8.21.0001 |
Maria Silva Santos |
Aguardando |
R$ 12.500 |
Hoje |
| 0009876-12.2025.8.21.0068 |
João Pedro Oliveira |
Ativo |
R$ 8.200 |
15/03 |
| 0005432-78.2025.8.21.0134 |
Banco do Brasil S.A. |
Urgente |
R$ 32.800 |
Amanhã |
05 — Motion System
Animações com propósito
O v7 define curvas de easing e durações padronizadas. Animações consistentes em todo o produto.
Skeleton Loading
Shimmer 1.5s · Warm gradient
Progress / Loading
Cubic-bezier(.4,0,.2,1) · 600ms
Glow Pulse (CTAs)
● OlivIA online
Glow pulse 2s · ease-in-out · infinite
Curvas de easing padronizadas
ease-out
cubic-bezier(0,.2,.2,1)
Entradas de elementos
ease-in
cubic-bezier(.4,0,1,1)
Saídas de elementos
spring
cubic-bezier(.34,1.56,.64,1)
Modals, drawers, popovers
standard
cubic-bezier(.4,0,.2,1)
Hover, cores, sombras
06 — 21st.dev
Componentes curados para MdFlow
Componentes prontos que encaixam no DS v7. Instalação via npx shadcn add "https://21st.dev/r/[nome]"
Animated Number
Contador animado para KPIs financeiros e métricas
📍 /dashboard · /financeiro · /jurimetria · /acordos
Progress Steps
Estado visual de fluxos multi-etapa
📍 /distribuicao · /execucoes · /olivia
Movimentação
Sentença procedente
07/03/2026 · TJRS
Timeline
Histórico de movimentações processuais
📍 /processos · /controller · /execucoes
⌘
⚖️ 0001234-56.2026.8.21.0001
👤 Maria Silva Santos
Command Menu ⌘K
Busca global + ações rápidas por teclado
📍 Shell global (todas as páginas)
R$ 48.200
Acordos este mês
Bento Grid
Dashboard com cards de tamanhos variados
📍 /lolito · /dashboard
⚖️
Novo acordo...
+A
⚡
Gerar petição OlivIA
+P
📋
Ver intimações
+I
Action List
Ações rápidas com atalhos de teclado
📍 Dentro do ⌘K · Drawers · FABs
07 — Plano de Execução
Como implementar o DS v7
Atualizar o DS primeiro, depois lapidar as páginas — que já nascem com DS v7.
Etapa 1 — Atualizar index.css
ATUAL--primary: 162 72% 45%
v7--primary: 158 64% 52%
ATUAL--radius: 0.5rem (8px)
v7--radius: 0.625rem (10px)
ATUAL--background: 25 16% 6%
v7--background: 25 14% 5.5%
Impacto: todas as páginas atualizam automaticamente via CSS vars
Etapa 2 — Atualizar DS docs
→
DS_TOKENS.md — novos valores alinhados ao brand guide
→
DS_ANIMATIONS.md — motion system com curvas padronizadas
→
DS_COMPONENTS.md — componentes revisados com radius v7
→
DS_21ST.md — lista expandida com mais componentes
Tempo estimado
index.css: 30min · DS docs: 2h · Total: ~3h
🟢 Baixo custo (~R$10)
Zero breaking changes
MdFlow Design System v7
Proposta JARBAS · Brand guide alinhado · 2026-03-08
✅ Aprovar →
ok, pode implementar o DS v7
✏️ Ajustar → me diz o que quer mudar