O Octoplanner usa o polvo como símbolo central — um animal de inteligência singular,
capaz de gerenciar múltiplas tarefas simultaneamente. Cada tentáculo representa uma
dimensão financeira: extrato, planejamento, metas, patrimônio, investimentos...
Principal — fundo escuro
Principal — fundo claro
Ícone — gradiente assinatura
PLANEJE. EXECUTE. EVOLUA.
Versão completa — com tagline
Regras de uso do logo
✓
Use em fundos escuros (#0B0F1A ou similares)
✓
Mantenha espaço de respiro mínimo de 1× a altura do logo
✗
Não distorça proporções ou rotacione o logo
✗
Não adicione sombras, contornos ou efeitos externos
Sistema de Cores
Paleta
Paleta construída para o contexto financeiro: o gradiente cyan→violet é a assinatura
visual do Octoplanner. Cada cor semântica tem um significado consistente em todo o produto.
Gradiente Assinatura
Cyan → Violet#06B6D4 → #8B5CF6
Fundos — Dark Theme
bg-0 — Base
Fundo mais profundo, overlays
bg-1 — Primary
Fundo principal da aplicação
bg-2 — Secondary
Cards, sidebar, header
bg-3 — Elevated
Cards elevados, inputs
bg-4 — Surface
Hover states, botões secundários
Acentos
Cyan — Primário
CTAs, links, foco, destaque principal
Violet — Secundário
Gradientes, assessores, premium
Emerald — Positivo
Crescimento, saldo positivo, sucesso
Amber — Atenção
Alertas, orçamento próximo do limite
Rose — Negativo
Gastos, saldo negativo, erros, perigo
Texto
txt-1 — Primário
Títulos, valores, conteúdo principal
txt-2 — Secundário
Labels, descrições, meta-informação
txt-3 — Muted
Placeholders, datas, texto de suporte
Tipografia
Escala tipográfica
Primária: Plus Jakarta Sans (Google Fonts) — moderna, legível e premium.
Fallback: SF Pro Text / system-ui para máxima performance em macOS/iOS.
Monospace para valores monetários e dados tabulares.
Hero64–80px / 900 / -0.04em
R$ 47.832
H1 — Página40px / 800 / -0.03em
Extrato Financeiro
H2 — Seção28px / 700 / -0.02em
Resumo do mês
H3 — Card20px / 600
Categorias de gasto
Body15px / 400 / 1.7lh
O planejamento financeiro começa com clareza sobre onde o seu dinheiro vai. Cada categoria revela um padrão de comportamento que pode ser otimizado ao longo do tempo.
Small13px / 500
Última atualização: 24/03/2026 às 19:30
Label / Tag11px / 700 / uppercase / 0.08em
Categoria · Investimento · Premium
Monospace14px / monospace / cyan
R$ 12.450,00 · +3,2% · CDI 100%
Design System
Componentes
Biblioteca de componentes construída com CSS Variables puras — sem framework.
Cada componente tem variantes dark e light automáticas via tokens.
Botões
Badges & Status
PremiumAssessor Em dia Atenção Atrasado
KPI Card
Saldo do mês
R$ 3.240,00
+18% vs mês anterior
Gastos do mês
R$ 8.760,00
+12% acima do planejado
Glass Card
Patrimônio Líquido
R$ 284.500,00
↑ +R$ 12.300 este mês
Inputs
Toggle & Progress
Sincronização automática
Atualizar diariamente
Meta: Viagem Europa73%
Orçamento Alimentação92%
Chat — OctoAssistente
Como estão meus gastos com restaurantes este mês?
Você gastou R$ 1.420,00 em Alimentação este mês, sendo R$ 890,00 em restaurantes.
Isso representa 118% do valor planejado (R$ 750,00). Considere reduzir 2-3 refeições fora para voltar ao orçamento.
Qual é minha meta mais urgente?
Avatares & Usuário
JR
João RodriguesAssessor · 12 clientes
MS
Maria SilvaCliente · Premium
AP
Ana PaulaCliente · Aprovação pendente
Interface do Produto
Preview do sistema
Representação fiel das principais telas e padrões de layout usados no Octoplanner.
Desktop com sidebar colapsável, bottom nav para mobile.
Octoplanner
⌘K Buscar
Principal
Home
Extrato
Planejamento
Objetivos
Patrimônio
Patrimônio
Investimentos
IA
OctoAssistente
Extrato
Março 2026 · 47 transações
Receita
R$ 12.000
+2% vs fev
Gastos
R$ 8.760
73% da receita
Saldo
R$ 3.240
27% guardado
Transações
47
este mês
Gastos por categoria
Março 2026
Comunicação
Voz & Tom
O Octoplanner fala como um assessor financeiro de confiança — direto, claro e respeitoso.
Não é paternalista, não causa ansiedade, não usa jargão excessivo.
🎯
Direto
Vai ao ponto sem rodeios
✓ Use"Você gastou 15% acima do planejado em restaurantes."
✗ Evite"De acordo com nossa análise aprofundada dos seus dados financeiros, identificamos que..."
💪
Encorajador
Não alarma, não julga
✓ Use"Sua meta avançou 12% este mês. Continue assim!"
✗ Evite"ATENÇÃO: Você está em risco de não atingir sua meta!"
🤝
Humano
Tom pessoal, não robótico
✓ Use"Sua reserva de emergência está sólida. Agora pode pensar em investir o excedente."
✗ Evite"O saldo do fundo de emergência atingiu 6× o gasto mensal médio calculado pelo sistema."
⚡
Prático
Sempre sugere uma ação
✓ Use"Você tem R$ 800 não alocados. Considere direcionar para a meta de viagem."
✗ Evite"Há recursos financeiros disponíveis que aguardam destinação orçamentária."
