providência.
SISTEMA FINANCEIRO
Buscar contrato, gestor, despesa… ⌘K
MC
DESIGN SYSTEM · v0.1

fundação visual do sistema financeiro.

Esta página reúne tokens, tipografia, espaçamento e todos os componentes que sustentam o back-office financeiro da providência. Serve de referência única para o time de desenvolvimento (Angular · SCSS) e para conferência com a equipe.

FRONT
Angular · SCSS
TOKENS
_tokens.scss
TEMA
Claro + Escuro
MÁSCARAS
ngx-mask
ATUALIZADO
20/07/2026
01 · FUNDAÇÃO

cores.

Paleta neutra fria (base do sistema) + um acento institucional azul da marca Providência. O vermelho é reservado para perigo — nunca decorativo — porque é dado financeiro. Escala 25–900 para hierarquia de texto, bordas e superfícies.

Neutros · escala base

$color-neutral-*
{{ c.step }}
{{ c.hex }}

acento · verde providência

$color-accent-*  ·  primary = 600
{{ c.mark }}
{{ c.step }}
{{ c.hex }}

Estados semânticos

$color-{success,warning,danger,info}
{{ s.label }}
{{ s.token }}
{{ s.hex }}

Superfícies · tema escuro

[data-theme=dark]
{{ c.name }}
{{ c.hex }}
01 · FUNDAÇÃO

tipografia.

Três famílias, três funções: Gilroy (ExtraBold 800, caixa-baixa) nos títulos e no wordmark, Inter na interface e corpo (figuras tabulares para valores) e JetBrains Mono nos números, rótulos e dados técnicos. Gilroy é licenciada — Montserrat é o fallback aberto.

GILROY · DISPLAY
Aa
Honorários fechados
INTER · UI
Aa
R$ 128.450,00 · 12,5% · 90 contratos
{{ t.token }}
{{ t.sample }}
{{ t.meta }}
01 · FUNDAÇÃO

Espaçamento, raios & sombras

Grade base de 4px. Densidade da interface favorece múltiplos pequenos (8/12/16). Raios contidos — nada arredondado demais em contexto financeiro.

ESPAÇAMENTO · base 4px
{{ sp.token }}
{{ sp.px }}
RAIOS
sm 4
md 8
lg 12
full
SOMBRAS
sm
md
lg
02 · COMPONENTES

biblioteca de componentes.

Componentes reutilizáveis vivem em ui/. Cada um documentado com anatomia, variantes, estados e tokens — nenhuma cor ou medida hardcoded.

Botões

ui/button
VARIANTES
TAMANHOS · sm / md / lg
Estados: default · hover · focus (ring) · active · disabled · loading
radius: $radius-md · padding: $space-3 $space-4

Inputs & máscaras

ui/field · ngx-mask
Anexe o comprovante para lançar.

Tabela de dados

ui/data-table
DESCRIÇÃO ↓ EMPRESA VENC. VALOR STATUS AÇÕES
{{ r.desc }} {{ r.emp }} {{ r.venc }} {{ r.val }} {{ r.st }}
1–5 de 47 lançamentos

Cards

ui/stat-card
Honorários do mês ▲ 8,2%
R$ 486.200
vs. R$ 449.100 em junho
Ed. Aurora · Contrato #0142
Mandato 24 meses · vigência de valor desde 01/2026. Gestor: Rafael (12,5%).
Ativo 3 anexos

Badges de status

ui/badge
Pago A vencer Vencido DDA Pendente Autorizado
CNPJ · Provi Mandato 24m Recorrente

Alertas & notificações

ui/alert · ui/toast
Guia de ISS vence em 2 dias
Provi · R$ 12.480,00 · vencimento 22/07/2026
3 despesas sem comprovante
Não é possível fechar o mês com pendências de nota.
3 pagamentos aguardando autorização da Thais
Total de R$ 41.900,00 na fila.
Notificações4
Guia de ISS a vencer
há 5 min
Nicole lançou 6 despesas
há 22 min
Honorários de junho fechados
ontem

Modais & Drawers

ui/drawer · ui/dialog
Excluir lançamento?
Esta ação remove a despesa e seus anexos. Não pode ser desfeita.

Empty & Loading

ui/empty · ui/skeleton
Nenhuma despesa neste filtro
Ajuste o período ou lance a primeira despesa.
03 · TELAS-ÂNCORA

telas-âncora.

Três telas montadas só com os tokens e componentes acima: Dashboard, Despesas (list + form) e DRE. Chrome real do app — sidebar + topbar.

A · DASHBOARD (HOME)
Dashboard
Bom dia, Michelle · visão de julho/2026
{{ k.label }}{{ k.delta }}
{{ k.val }}
{{ k.sub }}
Honorários · últimos 6 mesesR$ mil
{{ b.v }}
{{ b.m }}
Fila de autorização · Thais3
{{ a.forn }}
{{ a.emp }} · cc {{ a.cc }} · venc {{ a.venc }}
{{ a.val }}
4 guias de imposto a vencer
ISS Provi vence em 2 dias
3 despesas sem comprovante
Bloqueia o fechamento do mês
Composição do mês
Split de gestores30,6%
Impostos15,0%
Pessoal + operacional31,4%
Resultado23,0%
B · DESPESAS / CONTAS A PAGAR (LIST + FORM)
Despesas · contas a pagar
47 lançamentos em julho/2026
Buscar descrição, fornecedor…
▾
▾
▾
A pagar
R$ 214.780
Vencido
R$ 1.890
Pago no mês
R$ 271.310
DESCRIÇÃO ↓ EMPRESA VENC. VALOR STATUS AÇÕES
{{ r.desc }} {{ r.emp }} {{ r.venc }} {{ r.val }} {{ r.st }}
1–5 de 47
Clique em + Nova despesa para abrir o drawer de lançamento →
C · DRE GERENCIAL
DRE gerencial
Provi · Julho 2026 vs. Junho 2026
▾
Receita líquida
R$ 264.570
▲ 10,0% vs. junho
Resultado do mês
R$ 111.960
▲ 33,4% vs. junho
Margem
23,0%
▲ 4,3 p.p. vs. junho
CONTA JULHO JUNHO Δ%
{{ d.label }} {{ d.cur }} {{ d.prev }} {{ d.pct }}
Split de gestores considera o contrato inteiro na DRE, mesmo quando o gestor emite nota direto ao condomínio.
04 · ENTREGA

_tokens.scss

Fonte única de verdade. Nenhuma cor, espaçamento ou tipografia hardcoded em componente — tudo referencia estas variáveis. Tema escuro sobrescreve apenas as superfícies e textos.

src/styles/_tokens.scss 
// ---- Cores · neutros (escala base) ----
$color-neutral-25:  #FCFBF6;  $color-neutral-300: #C6D0D9;
$color-neutral-50:  #F6F3EB;  $color-neutral-400: #9FADBA;
$color-neutral-100: #F1EEE6;  $color-neutral-500: #75859C;
$color-neutral-200: #DCE2E8;  $color-neutral-600: #566575;
$color-neutral-700: #3D3D63;  $color-neutral-900: #070749;

// ---- Cores · acento (verde providência) ----
$color-accent-500: #09C81C;  $color-accent-600: #09C81C; // primary
$color-accent-700: #06A315;  $color-accent-50:  #E5FBE7;

// ---- Cores · estados semânticos ----
$color-success: #1E7F52;   $color-success-bg: #E4F3EB;
$color-warning: #B7791F;   $color-warning-bg: #FBF0DA;
$color-danger:  #C0392B;   $color-danger-bg:  #FBE7E4;
$color-info:    #09C81C;   $color-info-bg:    #E5FBE7;

// ---- Tipografia ----
$font-display: 'Gilroy','Montserrat', sans-serif;
$font-sans:    'Inter', sans-serif;
$font-mono:    'JetBrains Mono', monospace;
$fs-display: 44px;  $fs-h1: 32px;  $fs-body: 14px;

// ---- Espaçamento (base 4px), raios, sombras ----
$space-1: 4px; $space-2: 8px; $space-3: 12px; $space-4: 16px;
$radius-sm: 4px; $radius-md: 8px; $radius-lg: 12px;
$shadow-sm: 0 1px 2px rgba(20,33,44,.08);
$shadow-md: 0 4px 12px rgba(20,33,44,.10);

// ---- Semânticos (light) ----
:root {
  --bg: $color-neutral-100;   --surface: #FFFFFF;
  --border: #E1E6EB;         --text: $color-neutral-900;
  --text-muted: $color-neutral-500;
}
// ---- Tema escuro (sobrescreve superfícies) ----
[data-theme='dark'] {
  --bg: #04042C;   --surface: #0B0B52;
  --border: #24246C; --text: #E7EDF3;
  --text-muted: #7E8E9D; --accent: #33D74F;
}
05 · GUIA DE USO

densidade, do's & don'ts, acessibilidade.

✓Do's
Figuras tabulares em toda coluna de valor — alinhamento à direita, mono para dígitos.
Vermelho só para perigo (vencido, excluir, erro). Nunca decorativo.
Densidade compacta em telas de listagem; confortável em fichas e formulários.
Ação primária única por tela — as demais em secundário/ghost.
✕Don'ts
Não hardcode cores/medidas no componente — sempre via token.
Não use verde/vermelho como único indicador de status — sempre com rótulo + ícone.
Não empilhe múltiplos botões primários competindo pela atenção.
Não exiba valores sem contexto de empresa/período (Provi × MSERT).

Densidade

Duas alturas de linha por tabela, alternáveis pelo usuário. Compacto maximiza lançamentos visíveis; confortável reduz erro em revisão. Padrão por contexto abaixo.

CONFORTÁVEL · 14px pad
Fichas, formulários, DRE.
COMPACTO · 8px pad
Listas longas de despesas e contratos.
HEADER FIXO
Cabeçalho e totais sempre visíveis ao rolar.

Acessibilidade · WCAG AA

4.5
Contraste mínimo de texto 4.5:1 — ink #070749 sobre superfícies claras passa com folga.
44
Alvos de toque/click de 44px; foco visível com ring de 3px azul.
＋
Status nunca só por cor — sempre ícone + rótulo textual. Navegável por teclado.
P
providência. · sistema financeiro · design system v0.1
Angular · SCSS · atualizado 20/07/2026
Despesa lançada
Taxa condominial · R$ 12.480,00 registrada.
NOVA DESPESA
Lançar conta a pagar
MensalParceladaÚnica
Arraste o comprovante ou clique
Obrigatório para fechar o mês · PDF, JPG