VER 1.0
DATA 26/05/26

Style Guide · Financeiro Carvalho

Referência visual da direção Arcade Neon. Use junto do STYLE_GUIDE.md. Tokens vivem em tokens.css — esta página apenas os exibe. Componentes Vue prontos pra copiar estão em components/.

Colors

Estrutura (escuro)

--fc-bg
#0a0418
Fundo base do app
--fc-bg-raised
#150827
Topo do gradiente do painel
--fc-bg-panel
#1c0d33
Base do gradiente do painel
--fc-panel-edge
#2d1857
Borda padrão de painel + dividers

Texto

--fc-text
#f4eaff
Texto principal. Off-white com tom lilás.
--fc-text-dim
#8b75b8
Texto secundário, labels, sub.

Acentos

--fc-accent
#ff2d95
Magenta · alertas suaves, quest diária, CTA primário accent.
--fc-accent-2
#00f0ff
Ciano · links, navegação ativa, XP, quest semanal.
--fc-accent-3
#a855f7
Roxo · botão padrão, painel em destaque, glow.
--fc-gold
#ffd84d
XP, conquistas, quest mensal.

Estado

--fc-green
#39ff7a
Meta atingida, valores positivos.
--fc-red
#ff3b6b
Meta falhou, recorrência ausente, alerta crítico.

Typography

Press Start 2P
pixel · labels & numbers
:: LABEL HUD ::
:: TÍTULO DE PAINEL
MAIO · 2026
47%
JetBrains Mono
mono · valores
26/05/26 · Itaú · Crédito
Mercado Pão de Açúcar
R$ 7.844,21
Inter
body · descrições
Mantenha gastos com veleiro abaixo de R$ 500 neste mês. Recompensa: +180 XP. Última atualização há 2h.

Panels

Painel é o tijolo do app. Versão glow é reservada pro card de destaque da rota (poupado-do-mês, status do personagem). Cantos em "L" decoram só painéis especiais.

:: PAINEL PADRÃO

Container neutro. Use pra listar transações, categorias, contas, qualquer dado tabular.

:: PAINEL COM GLOW

Borda roxa + halo. Reservado pro card mais importante da rota.

:: PAINEL COM CANTOS EM L

Decoração HUD opcional. Use no hero ou no card-de-status do personagem.

▲ RECORRÊNCIA AUSENTE

Variante danger. Borda vermelha + halo + triângulo pulsante.

Buttons

Texto sempre Press Start 2P em maiúscula. Verbo + (seta opcional). Hover acende o glow da cor da borda.

Chips

Tags pequenas. Sempre Press Start 2P 7px maiúsculo. A cor é semântica.

DIÁRIA SEMANAL MENSAL QUEST OK QUEST FAIL

Bars (XP, progresso)

Sempre 2px de borda. Fill com gradiente diagonal + listras internas — assinatura visual.

XP 3240 / 4900
PROGRESSO QUEST · DIÁRIA 3 / 5
META POUPANÇA · ATINGIDA 47%

Links (text actions)

Verbo curto + seta. Sempre Press Start 2P em ciano. Hover ganha glow.

VER+ ABRIR ▶ REGISTRAR ▶

HUD (top bar)

Persistente em todas as rotas. Os stats RPG (LV/XP/STREAK/META) sempre visíveis — é assim que a direção mantém a metáfora de jogo.

LV 7
XP 3240/4900
STREAK 23d
META 47%/40%

Pixel Sprites

Personagem é 17×24 pixels. Cores parametrizadas por slot (hat / shirt / pants / boots). Cosméticos do banco fazem merge desses slots em runtime.

Escalas canônicas

Variantes por cosmético

Animations

Toda animação tem propósito. Idle bob é o único motion "passivo". Celebrate roda 3s após quest complete. Level-up sobrepõe modal com glow magenta.

IDLE BOB
animation: 2.2s steps(2)
CELEBRATE
animation: 1s ease-in-out
ALERT BLINK
▲
animation: 1.2s steps(1)

Shadows & Glow

PADRÃO
--fc-shadow-panel
GLOW
--fc-shadow-panel-glow
DANGER
--fc-red border + halo

v1.0 · Style guide gerado automaticamente. Para regenerar sprites: rode run.js em sprites/. Para perguntas, abra STYLE_GUIDE.md primeiro.