DS Orbit Financeiro · Design System v1

Sua CFO em IA. Em tempo real.

Vocabulário visual, componentes e padrões de movimento do produto Financeiro da Orbit — onde Olívia responde DRE, fluxo de caixa e runway em linguagem natural.

Visão Geral

Painel Financeiro · Maio 2026

Saldo Total

R$ 4.245.380,00

12,5% vs mês anterior

Burn Mensal

R$ 285.420,00

+2,1% vs mês anterior

Runway

14,8 meses

Days cash · 444 Saudável

Receita × Despesa

Últimos 6 meses · regime competência

+18% vs mês anterior
R$ 320K
R$ 410K
R$ 380K
R$ 612K
R$ 502K
R$ 575K
DezJanFevMarAbrMai

Top Despesas

Últimos 30 dias

R$ 285.420 8%
Folha de pagamento R$ 182K
Aluguel + Infra R$ 42K
Marketing R$ 31K
Tecnologia / SaaS R$ 19K

Pergunte à Olívia IA

DRE, fluxo de caixa, runway em linguagem natural

01 Tipografia

Escala & hierarquia tipográfica

Toda tipografia usada no Orbit Financeiro — de display a microlabels — em Plus Jakarta Sans, sem normalizações. Hierarquia visual a serviço da leitura de números.

Heading 1

jakarta · 800

Sua CFO em IA. Em tempo real.

72px / 76px

Heading 2

jakarta · 700-800

DRE em minutos não em semanas

48px / 50px

Heading 3

jakarta · 700

Runway transparente

36px / 40px

Heading 4

jakarta · 600

Conciliação automática

24px / 32px

Bold L

jakarta · 700

Receita × Despesa

20px / 28px

Bold M

jakarta · 600

Folha de pagamento
14px / 20px

Bold S

jakarta · 600

Sincronizado
12px / 16px

Paragraph

jakarta · 400

Olívia responde DRE, fluxo de caixa e runway em linguagem natural — direto no painel. Sem precisar abrir BI, sem esperar o contador.

20px / 32px

Regular L

jakarta · 400

Aprovações em workflow, conciliação bancária e DRE conectado ao operacional.

18px / 28px

Regular M

jakarta · 400

DRE, fluxo de caixa, runway em linguagem natural
14px / 20px

Regular S

jakarta · 400

© 2026 Orbit Gestão. Todos os direitos reservados.
12px / 16px

Display Number

jakarta · 800

R$ 4,2M +12,5%
128px / 1

Mono Badge

jetbrains-mono · 500

01
11px / 16px
02 Cores & Superfícies

Paleta escura & o dourado da Orbit

Backgrounds, acentos, bordas, gradientes e padrões de superfície. O dourado #ffba1a aparece em CTA e em destaques de número — nunca em texto longo.

Backgrounds

#000000

Page Body (puro)

#050505

Mockup Content

#0A0A0C

Cards / Sidebar

#0D1117

--black

#161B22

--black-soft

#1C2333

--black-card

#101018

Chart Panel

#111111

Input BG

Marca · Dourado

#ffba1a

Primary · CTA

#ffca4a

Primary Light

#ffd64a

Hover Glow

#e6a200

Primary Dark

rgba 20%

Badge BG

Glow rgba(.3)

--primary-glow

Estados (sucesso / erro)

#3FB950

--success

success/10

Badge positivo

#F85149

--error

error/10

Badge negativo

Texto (tema escuro)

White

Headings, números

#E6EDF3

--gray-800/900

#C9D1D9

--gray-600/700 · corpo

#8B949E

--gray-400/500 · secundário

#484F58

--gray-300 · muted

Bordas & Divisores

border-white/5

Divisores sutis, sidebar

border-white/10

Card default

border-white/20

Hover state

border-primary/30

Destaque dourado

Superfícies

Glass Nav Surface

bg-black/90 · backdrop-blur-md

Card Surface

bg-[#0A0A0C] · border-white/10 · rounded-xl

Radial + Dot Pattern

Feature card background

Gradientes

primary → primary-600
primary-400 → primary
success
error

Glow Effects

Gold Glow Border

shadow-gold-glow

Gold Strong (hover)

shadow-gold-strong

Elevated Shadow

shadow-2xl · border-white/10

03 Componentes UI

Os blocos & da interface

Botões, badges, cards, inputs e elementos interativos com estados side-by-side (default / hover / focus).

Botões

Badges & Status

NOVO Olívia v2 disponível
Sincronizado
12,5% +2,1% 4,8% IA Ativo 04

Inputs

Default · valor monetário

R$

Focused (dourado)

R$

Error

Pergunte à Olívia

Cards

Saldo Total

R$ 4.245.380

12,5% vs mês anterior

Olívia · IA financeira

Pergunte em português. Receba DRE, projeção de caixa e análise de margem em segundos.

Runway

14,8 meses

Days cash · 444 Saudável

Toggle (regime / período)

Sidebar Navigation (Orbit Financeiro)

Pergunte à Olívia IA Painel Financeiro item ativo Fluxo de Caixa default Aprovações 3

Progress · Top Categorias

Folha
R$ 182K
Aluguel + Infra
R$ 42K
Marketing
R$ 31K
SaaS / Tech
R$ 19K
Inadimplência
R$ 12K

Avatar Stack & Iniciais

RS
JL
MS
+12
OL

Olívia

CFO em IA · online

04 Layout & Espaçamento

Containers & grids na prática

Padrões de container, grids e breakpoints extraídos do painel Orbit Financeiro. Usar exatamente esses 4 padrões nas LPs.

Section Container

max-w-7xl · bg-[#0A0A0C] · border-white/10 · rounded-3xl · pt-8 pr-8 pb-16 pl-8

## Section Label

Título da seção subtítulo

Parágrafo de descrição da seção usando o estilo Paragraph padrão.

Grid 3 colunas · stats

grid grid-cols-1 md:grid-cols-3 gap-4

Receita

R$ 612K

Despesa

R$ 285K

Resultado

R$ 327K

Split 2 colunas · conteúdo + visual

flex flex-col lg:flex-row lg:gap-24 items-center justify-between

02 Coluna conteúdo

Construído para velocidade. Auditável para sempre.

Layout que divide texto e mockup em duas colunas em telas grandes, com empilhamento natural no mobile.

Visual / Mockup

Bento · feature grid

grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 · lg:auto-rows-[120px]

1fr · padrão
1fr · tall (destaque dourado)
1fr · padrão
1fr · padrão
1fr · padrão

Raios (identidade Orbit)

rounded · 8px
--radius · 16px
--radius-lg · 24px
--radius-xl · 32px
05 Motion & Interação

Biblioteca de animações & transições

Cada entrada, hover e loop usado no produto Financeiro — demonstrado ao vivo. Clique nas células de fadeInUp/blurIn para replay.

Motion gallery

fadeInUp

scroll-fade-up · 0.8s ease

Blur

blurIn

scroll-blur-in · blur(15px) → 0

beam-spin (gold)

3s linear infinite

lines-slide

1.5s linear infinite

3.045+ empresas ISO 9001 BR · LGPD Olívia · IA 3.045+ empresas ISO 9001 BR · LGPD Olívia · IA

marquee

25s linear infinite

spin-slow / reverse

20s / 15s linear infinite

animate-pulse

Status indicators

duration-300 · ease-out

Button hover

scale + glow

Hover card

borda muda pra dourado

Card hover

border-white/10 → primary/40

Easings padrão

Entrance (DS)

cubic-bezier(0.25, 0.46, 0.45, 0.94)

Snap

cubic-bezier(0.16, 1, 0.3, 1)

Default

duration-300 · ease

06 Ícones

Lucide · stroke-width 2

Stack de ícones: Lucide (SVG inline) como padrão. Para componentes Orbit-branded (Olívia/agentes) usar Font Awesome 6 como já existe no site.

Vocabulário Financeiro

wallet
credit-card
trending-up
trending-down
bar-chart-2
pie-chart
dollar-sign
send
message-square
check-circle
clock · runway
alert-triangle
file-text · DRE
building · empresa
shield-check
bot · Olívia

Tamanhos & herança de cor

48px · primary
32px · white
20px · gray-400
16px · gray-500
12px · gray-600

Containers de ícone