Memorial Financeiro IBMM — Design System v5.0
Quiet Luxury × Neo-Brutalism — Um design system dark-first para gestão financeira eclesiástica. Combina a sobriedade de dashboards financeiros premium (deep navy, precisão numérica, hierarquia tipográfica) com toques brutalistas (bordas afiadas, contraste alto, tipografia mono-espaçada). Projetado para sessões longas de auditoria, leitura de relatórios e operação por gestores não-técnicos em mobile e desktop. Fusão curada de: Midnight Banking Dashboard (paleta dark navy + gradientes), Prismatic Pay (typografia premium + componentes) e identidade original IBMM (teal accent, bordas afiadas, estética institucional).
Color Palette
Page & Surfaces
Accent / Primary
Foreground / Text
Status / Signed Amounts
Gradient Cards (uso restrito — apenas hero e destaques)
Border
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxQuiet Luxury × Neo-Brutalism — Um design system dark-first para gestão financeira eclesiástica. Combina a sobriedade de dashboards financeiros premium (deep navy, precisão numérica, hierarquia tipográfica) com toques brutalistas (bordas afiadas, contraste alto, tipografia mono-espaçada). Projetado para sessões longas de auditoria, leitura de relatórios e operação por gestores não-técnicos em mobile e desktop. Fusão curada de: Midnight Banking Dashboard (paleta dark navy + gradientes), Prismatic Pay (typografia premium + componentes) e identidade original IBMM (teal accent, bordas afiadas, estética institucional).
Components
Buttons
Chips
Elevation & Depth
Do's & Don'ts
Do
Don't
Animations
### Micro-interactions
• Hover transition: all 150ms ease — background, border, color
• Button press: transform scale(0.98) 100ms
• Card entrance: opacity 0→1, translateY 8px→0, 200ms ease-out, stagger 50ms
• Number counter: CountUp 800ms ease-out (valores monetários no dashboard)
• Pulse: opacity 1→0.5→1, 2s infinite — indicadores de "processando"
### Page Transitions
• Tab switch: opacity 0→1, 150ms ease-in
• Modal open: opacity 0→1 + translateY 16px→0, 200ms ease-out
• Drawer open: translateX 100%→0, 250ms ease-out
### Skeleton Loading
• Background: linear-gradient(90deg, #1C1C22, #27272A, #1C1C22)
• Animation: shimmer 1.5s infinite
---
Layout
### Breakpoints
• Mobile: < 768px — sidebar drawer, cards empilhados, KPIs 2 colunas
• Tablet: 768px–1024px — sidebar colapsada, KPIs 3 colunas
• Desktop: > 1024px — sidebar expandida, KPIs 4 colunas, tabelas full-width
### Grid
• Dashboard: sidebar 220px + main content fluid
• KPI Grid: grid-cols-2 lg:grid-cols-4, gap 12px
• Card Grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-3, gap 12px
• Table: full-width, sticky header, virtual scroll para > 100 rows
### Container
• Max-width: 1200px (desktop)
• Page Padding: 20px (desktop), 12px (mobile)
---
Referências
• [Midnight Banking Dashboard](https://designmd.ai/nswamy14/midnight-banking-dashboard) — paleta navy, gradientes, componentes bancários
• [Prismatic Pay](https://designmd.ai/chef/prismatic-pay) — tipografia premium, componentes fintech, espaçamento
• [Violet Issue](https://designmd.ai/chef/violet-issue) — densidade informacional, dark mode, developer UX
Use with MCP
Don't have the MCP? Install it here