bFlow · Design System 3.0

Um símbolo, cinco temas, um só jeito de construir

Tokens, tipografia e componentes do bFlow com a marca Pista. Tudo que está aqui roda nos cinco temas do produto; troque no topo e veja cada peça mudar.

O que é

O sistema de design 3.0 do bFlow, o SaaS de gestão empresarial para PMEs. Substitui o BitByBit da BitGrow para tudo que é bFlow: produto, site, propostas e redes.

Como usar

Leia os tokens antes de qualquer CSS: toda cor, tamanho e raio tem nome. Troque o tema no topo para ver cada componente nos 5 temas do produto.

Status

Proposta aguardando aprovação do Carlos. Nada vai para produção antes do OK escrito. Depois: staging → QA (5 temas × telas-chave) → produção.

Links da marca:Central da Marca Brand book 3.0 Manual da marca Papelaria e uso do logo Design System editável ↗

Fundamentos

Marca e logo

Assinatura, símbolo e ícone nas cores do tema. As cores vêm de tokens, então o mesmo markup serve a todos os temas.

bFlow

← micro: abaixo de 64 px

Onde aparece

Topo da barra lateral (símbolo 20–24 px + nome), login, splash do PWA, favicon/ícone de app, avatar de notificação. Em mais lugar nenhum da interface.

Construção

Malha 120, traço 14, faixas em y 104/82/60, centro comum (46,52), raios 52/30/8, subida a 45°. Micro: 2 faixas, traço 17. Tile: raio 22,5%, símbolo a 78%.

Proteção e mínimos

Área de proteção = altura de uma faixa em todos os lados. Símbolo 16 px (micro), assinatura 24 px de altura. Abaixo de 64 px, sempre a versão micro.

Faça

Usar os SVGs de logo/; no produto, o inline com --ink/--acc.
Sobre claro: azul + lima tinta. Sobre escuro e sobre azul bFlow: branco + lima. Alto Contraste: P&B.
Escrever sempre bFlow.

Não faça

Recolorir, inclinar, espelhar, sombra, degradê, contorno.
Símbolo sobre foto sem tile; símbolo repetido como padrão.
"BFlow", "Bflow", "B-Flow"; nome recomposto em outra fonte.

Fundamentos

Cores

Tokens semânticos para componentes; escalas de sete tons para defini-los e para gráficos. Os valores abaixo mudam com o tema escolhido no topo.

Tokens semânticos (mudam com o tema — troque acima)

bgvar(--bg)Fundo de página. Proposta 3.0: névoa no Claro Padrão (hoje #ffffff); branco no Vibrante; meia-noite no Escuro (hoje #0B0D1A). Mapeia `--background`.

bg-elevadovar(--bg-elevado)Cards, modais, inputs, menus. Mapeia `--foreground`.

bg-sutilvar(--bg-sutil)Hover de linhas, chips neutros, trilha de progresso. Mapeia `--shaded`.

bordavar(--borda)Borda de card e divisor. Mapeia `--border`.

borda-fortevar(--borda-forte)Borda de input (componente: ≥3:1 sobre `bg`) e contorno de botão secundário. Mapeia `--input`.

textovar(--texto)Títulos e texto principal. Mapeia `--text`.

texto-corpovar(--texto-corpo)Texto corrido sobre `bg` e `bg-elevado`. Nunca branco puro no escuro.

texto-suavevar(--texto-suave)Legendas e rótulos (≥4,5:1 sobre `bg` e `bg-elevado` nos 5 temas). Mapeia `--label`.

marcavar(--marca)Botão primário, switch ligado, progresso. Azul bFlow; ameixa #43075D no tema Ameixa; âmbar no Alto Contraste. Mapeia `--primary` e `--cta-bg`.

marca-hovervar(--marca-hover)Hover e pressed do botão primário.

sobre-marcavar(--sobre-marca)Texto sobre `marca`: branco, exceto preto sobre o âmbar do Alto Contraste. Mapeia `--on-primary` e `--cta-ink`.

linkvar(--link)Links em texto corrido. Mapeia `--primary-text` (o azul clareado nos temas escuros).

acentovar(--acento)Faixa de dentro do símbolo e traço de resultado. Gráfico, nunca texto. Ameixa usa o seu lima #B2D300 (já `--module-accent` lá); Alto Contraste não tem lima: branco.

acento-textovar(--acento-texto)Texto curto de ganho/IA (≥4,5:1 em todos os temas). Nunca parágrafos.

acento-fundovar(--acento-fundo)Fundo da faixa "IA do bFlow" e chips de meta batida; texto em `acento-texto`. Ameixa: `--module-accent-soft` #EAF4C4.

focovar(--foco)Anel de foco, 2px sólido + 2px de afastamento. Ameixa mantém o ciano #14B5BD já aprovado.

nav-bgvar(--nav-bg)Barra lateral L1/L2 e cabeçalho mobile. Ameixa: `--sb-l1` #241246.

nav-textovar(--nav-texto)Itens de navegação inativos sobre `nav-bg`.

nav-ativo-bgvar(--nav-ativo-bg)Fundo do item ativo. No Claro Padrão é céu; no Vibrante, azul cheio; no Ameixa, lima com tinta ameixa.

nav-ativo-textovar(--nav-ativo-texto)Texto do item ativo sobre `nav-ativo-bg`.

logo-inkvar(--logo-ink)Faixas de fora do símbolo e nome do logotipo sobre `bg`/`bg-elevado` (login, documentos, cards). Azul; ameixa no tema Ameixa; branco nos temas escuros e no Alto Contraste (P&B).

logo-acentovar(--logo-acento)Faixa de dentro do símbolo sobre `bg`/`bg-elevado`. Lima tinta sobre claro, lima puro sobre escuro, branco no Alto Contraste.

logo-ink-navvar(--logo-ink-nav)Faixas de fora e nome na barra lateral (`nav-bg`). Branco sempre que a barra é escura (Escuro Vibrante, Ameixa, Alto Contraste).

logo-acento-navvar(--logo-acento-nav)Faixa de dentro do símbolo na barra lateral. Ameixa usa o seu lima #B2D300.

sucessovar(--sucesso)Recebido, pago, concluído. Sempre com ícone ou palavra junto, nunca só a cor.

atencaovar(--atencao)Vence hoje, pendente de revisão. Texto em atencao só em 14px+ sobre fundo neutro.

errovar(--erro)Vencido, falha, campo inválido. Difere de sucesso em luminosidade, não só em matiz.

overlayvar(--overlay)Véu atrás de modais e drawers (70%).

brancovar(--branco)Branco fixo, igual em todos os temas: logo e texto sobre azul bFlow ou meia-noite em peças de marca (capas, posts, cards de destaque). Não usar para texto de interface.

Escalas de 7 tons

Azul

100
#dce5ff

200
#b8cbff

300
#8aa8fc

400
#5c82fa

500
#315cf6

600
#1e3fbf

700
#14298a

Lima

100
#f1f9d2

200
#e3f39f

300
#d2ec5e

400
#bae314

500
#8db000

600
#5c7400

700
#3c4c00

Neutros (meia-noite → névoa)

100
#f4f6fb

200
#dde2f1

300
#c9cfea

400
#9ba3c7

500
#5a6185

600
#1f2440

700
#0a0f2c

Faça

Componentes usam só tokens semânticos (bg, texto, marca, acento…); as escalas servem para definir os semânticos e para gráficos.
Proporção 60/30/10: fundo, azul em blocos e botões, lima só no acento (≤10%).
Lima sobre fundo claro é sempre a versão tinta: lima-500 para gráfico, lima-600 para texto.
Status com ícone ou palavra junto; sucesso, atencao e erro diferem em luminosidade.

Não faça

Hexadecimal em componente.
Lima puro #BAE314 sobre branco, lima como texto corrido, botão ou navegação.
Variação negativa em vermelho (vermelho é vencido/erro); negativa vai em texto-suave.
Gradiente, 3D, brilho, sombra pesada.

Valores por tema

Token	Claro Padrão	Claro Vibrante	Escuro Vibrante	Ameixa Moderno	Alto Contraste
`bg`	`#f4f6fb`	`#ffffff`	`#0a0f2c`	`#f6f3fa`	`#000000`
`bg-elevado`	`#ffffff`	`#ffffff`	`#141a3c`	`#ffffff`	`#0f0f0f`
`bg-sutil`	`#eef0f8`	`#e8edff`	`#1c2350`	`#efe8f7`	`#1a1a1a`
`borda`	`#dde2f1`	`#dde2f1`	`#262d58`	`#e6ddf2`	`#555555`
`borda-forte`	`#9ba3c7`	`#9ba3c7`	`#5a6185`	`#8a7ba3`	`#e0e0e0`
`texto`	`#0a0f2c`	`#0a0f2c`	`#ffffff`	`#241246`	`#ffffff`
`texto-corpo`	`#1f2440`	`#1f2440`	`#c9cfea`	`#4a3d5e`	`#ffffff`
`texto-suave`	`#5a6185`	`#5a6185`	`#9ba3c7`	`#6b5c80`	`#e0e0e0`
`marca`	`#315cf6`	`#315cf6`	`#315cf6`	`#43075d`	`#fbbf24`
`marca-hover`	`#1e3fbf`	`#1e3fbf`	`#5c82fa`	`#241246`	`#d97706`
`sobre-marca`	`#ffffff`	`#ffffff`	`#ffffff`	`#ffffff`	`#000000`
`link`	`#1e3fbf`	`#1e3fbf`	`#8aa8fc`	`#43075d`	`#fbbf24`
`acento`	`#8db000`	`#8db000`	`#bae314`	`#b2d300`	`#ffffff`
`acento-texto`	`#5c7400`	`#5c7400`	`#bae314`	`#4f5e00`	`#ffffff`
`acento-fundo`	`#f1f9d2`	`#f1f9d2`	`#1f2a12`	`#eaf4c4`	`#1a1a1a`
`foco`	`#315cf6`	`#315cf6`	`#bae314`	`#14b5bd`	`#fbbf24`
`nav-bg`	`#ffffff`	`#ffffff`	`#0f1538`	`#241246`	`#000000`
`nav-texto`	`#1f2440`	`#1f2440`	`#c9cfea`	`#d9cdeb`	`#ffffff`
`nav-ativo-bg`	`#dce5ff`	`#315cf6`	`#1e3fbf`	`#b2d300`	`#fbbf24`
`nav-ativo-texto`	`#14298a`	`#ffffff`	`#ffffff`	`#241246`	`#000000`
`logo-ink`	`#315cf6`	`#315cf6`	`#ffffff`	`#43075d`	`#ffffff`
`logo-acento`	`#8db000`	`#8db000`	`#bae314`	`#8db000`	`#ffffff`
`logo-ink-nav`	`#315cf6`	`#315cf6`	`#ffffff`	`#ffffff`	`#ffffff`
`logo-acento-nav`	`#8db000`	`#8db000`	`#bae314`	`#b2d300`	`#ffffff`
`sucesso`	`#1e8e4e`	`#1e8e4e`	`#3dbb75`	`#4f7a00`	`#4ade80`
`atencao`	`#b8760a`	`#b8760a`	`#f0b13a`	`#7a4a00`	`#fbbf24`
`erro`	`#d7263d`	`#d7263d`	`#f2607a`	`#b42a35`	`#f87171`
`overlay`	`#0a0f2cb3`	`#0a0f2cb3`	`#000000b3`	`#241246b3`	`#000000cc`
`branco`	`#ffffff`	`#ffffff`	`#ffffff`	`#ffffff`	`#ffffff`

Fundamentos

Tipografia

Sora para falar alto, Inter para trabalhar.

Display

Sora

Títulos, números-herói e logotipo. Pesos 600–800, tracking −2% a −5%. Google Fonts, sem custo de licença.

Texto e interface

Inter

Já é a fonte do produto. Pesos 400–600. Números tabulares em colunas financeiras. Reserva em e-mail e Office: Arial.

Display e títulos (Sora)

Decida vendo. Cresça andando..display · 56px / 58px · 800 · -0.04em
Hero do site, capas. Mobile: 40px.

Financeiro.titulo-1 · 40px / 44px · 800 · -0.03em
Título de página. Mobile: 30px.

Contas a receber.titulo-2 · 28px / 34px · 700 · -0.02em
Seções, títulos de card grandes. Mobile: 24px.

Vencidos há mais de 30 dias.titulo-3 · 20px / 26px · 700 · -0.01em
Títulos de bloco, modais, drawers. Mobile: 18px.

R$ 84,3 mil.numero-heroi · 32px / 36px · 800 · -0.03em
Indicadores e dashboards, com `font-variant-numeric: tabular-nums`. Precedido do traço de resultado quando for ganho.

bFlow.logotipo · 24px / 24px · 700 · -0.05em
Só o nome no logotipo. Não usar para texto.

Texto e interface (Inter)

O vencido aparece primeiro, por cliente e por dias de atraso..corpo · 16px / 25px · 400
Texto corrido, descrições. Mobile: 15px.

Legendas, tabelas, descrições de campo..corpo-pequeno · 14px / 21px · 400
Tabelas, listas densas, descrições de campo. Mobile: 13px.

Nome do cliente.corpo-forte · 14px / 21px · 600
Nome em linha de tabela, título de card pequeno.

FINANCEIRO › HOJE.rotulo · 12px / 16px · 600 · 0.12em
Rótulos em caixa alta (aplicar text-transform no CSS), breadcrumbs, eyebrows. Cor `texto-suave` ou `marca`.

Atualizado há 2 min.legenda · 12px / 16px · 400
Timestamps, ajuda de campo, rodapés. Cor `texto-suave`.

Enviar cobrança.botao · 15px / 20px · 600
Texto de botões. Sem caixa alta.

Ver detalhes.botao-pequeno · 13px / 18px · 600
Botões compactos em tabelas e cards.

Dados (mono)

NFS-e 2026/000412.codigo · 13px / 20px · 400
Chaves, IDs, números de documento, webhooks.

Faça

No máximo dois pesos por peça.
Alinhamento à esquerda; centralizado só em capas e selos.
55–75 caracteres por linha no texto corrido.
"R$ 84,3 mil" em comunicação; valor exato em tabela e documento fiscal.

Não faça

Itálico em títulos.
Caixa alta em botões (só em rótulos de 12 px com +12% de tracking).
Montserrat ou outra display: a Sora substitui.
Logotipo recomposto em outra fonte.

Carregue Sora:wght@600;700;800 e Inter:wght@400;500;600 (ou self-hosted em woff2 com font-display: swap).

Fundamentos

Espaçamento, raio e sombra

Grade de 8 px, raios generosos, profundidade por camadas de cor.

Grade de 8px com meio passo. Margens de página: 24px no mobile, 32px no desktop; conteúdo máximo 1280px.

space-1 · 4px
Entre ícone e texto, entre chips.

space-2 · 8px
Entre rótulo e campo; gap de botões agrupados.

space-3 · 12px
Padding vertical de input e botão médio; gap entre linhas de lista.

space-4 · 16px
Padding de card compacto; gap entre cards no mobile.

space-5 · 20px
Padding de card padrão.

space-6 · 24px
Padding de modal e drawer; gap entre cards no desktop; margem de página mobile.

space-8 · 32px
Entre seções de uma página; margem de página desktop.

space-12 · 48px
Entre blocos de landing page.

space-16 · 64px
Respiro de hero e de capas.

Raio

radius-sm · 6px
Chips, badges, checkboxes.

radius-md · 8px
Botões, inputs, itens de menu.

radius-lg · 12px
Cards pequenos, toasts, popovers.

radius-xl · 16px
Cards padrão, modais, drawers.

radius-2xl · 18px
Cards de destaque e blocos de marketing.

radius-icone · 22.5%
Tile do ícone de app (27 em 120). Não usar em UI.

radius-pill · 999px
Avatares, switch, chips de filtro.

Sombra

Profundidade vem de camadas de cor (`bg` → `bg-elevado`), não de blur. Sombra só em elementos flutuantes.

sombra-flutuante
Popover, menu, toast.

sombra-modal
Modal e drawer.

Fundamentos

Temas

Os cinco temas que já existem no produto, com a marca aplicada em cada um.

R$ 84,3 mil

Claro Padrão data-theme="light"
fundo #f4f6fb · primária #315cf6 · acento #8db000

R$ 84,3 mil

Claro Vibrante data-theme="light-vibrant"
fundo #ffffff · primária #315cf6 · acento #8db000

R$ 84,3 mil

Escuro Vibrante data-theme="dark-vibrant"
fundo #0a0f2c · primária #315cf6 · acento #bae314

R$ 84,3 mil

Ameixa Moderno data-theme="ameixa"
fundo #f6f3fa · primária #43075d · acento #b2d300

R$ 84,3 mil

Alto Contraste data-theme="high-contrast"
fundo #000000 · primária #fbbf24 · acento #ffffff

Faça

Trocar o tema trocando data-theme no <html>; os componentes não sabem em que tema estão.
O logo segue logo-ink/logo-acento (superfícies) e logo-ink-nav/logo-acento-nav (barra lateral).
theme-color por tema: #315CF6 nos claros, #0A0F2C no escuro, #241246 no Ameixa, #000000 no Alto Contraste.

Não faça

Criar tema novo sem aprovação do Carlos.
Recolorir o símbolo com a cor do módulo ou do tema.
Lima como cor de navegação (exceção única: aba ativa da barra inferior mobile nos temas escuros).

Fundamentos

Movimento

Curto, com saída suave. Nada pulsa, nada gira.

duracao-rapida · 120ms
Hover, foco, troca de cor.

duracao-media · 200ms
Abrir menu, expandir card, trocar aba.

duracao-lenta · 240ms
Modal, drawer, toast entrando.

easing-saida · cubic-bezier(0.2, 0.8, 0.2, 1)
Padrão para tudo que entra. Nada pulsa, nada gira.

Respeite prefers-reduced-motion. As faixas da marca entram da esquerda para a direita e sobem; nada pulsa, nada gira.

Componentes

Botões

Um primário por tela; secundário para alternativas; fantasma para ações leves; perigo só para destruir; IA só para a IA do bFlow.

Faça

Rótulo em infinitivo, sem caixa alta, sem exclamação.
Loading: substitua o ícone pelo spinner e mantenha a largura.
bf-btn--sm em tabelas e cards.

Não faça

Dois primários lado a lado.
Botão em lima fora da IA.
Botão desabilitado sem explicar por quê (use ajuda ao lado).

Componentes

Formulários

Rótulo em caixa alta acima do campo, ajuda em legenda, erro que diz o problema e a correção.

Nome do clienteComo aparece no boleto e na NFS-e.

Forma de cobrança

CPF/CNPJCPF incompleto — faltam 2 dígitos.

Observações

Enviar lembrete 3 dias antes Cobrar juros após o vencimento Cobrança automática ligada

Faça

Altura 40 px, raio radius-md, borda borda, foco com anel foco.
Máscaras de CPF/CNPJ, moeda e data aplicadas no valor.
Checkbox e switch em marca quando ligados; switch com role="switch".

Não faça

Placeholder como rótulo; rótulo flutuante dentro do campo.
Só a borda vermelha, sem mensagem.
Borda verde de sucesso (confirmação é silenciosa).

Componentes

Navegação

Barra lateral com a assinatura no topo, abas, breadcrumb e cabeçalho mobile.

Financeiro›Contas a receber›Hoje

Barra lateral 232 px com assinatura no topo; no mobile, cabeçalho com o símbolo micro. Item ativo em nav-ativo-bg.

Faça

Item ativo em nav-ativo-bg + nav-ativo-texto, peso 600; ícones Phosphor 18 px.
Mobile: cabeçalho de 52 px com o símbolo micro; barra inferior com até 4 itens + "Mais".
Navegação responde ao primeiro clique; rota antiga ganha redirect.

Não faça

Mais de 7 itens de primeiro nível; grupo com item único.
Logo em outro ponto além do topo da barra.
Rota técnica mostrada ao usuário (sempre caminho de clique).

Componentes

Cards e indicadores

Superfície padrão, indicador com traço de resultado e a faixa da IA do bFlow.

A receber hoje

R$ 12,4 mil14 boletos · 6 clientes

Recebido no mês

R$ 84,3 mil+18% vs. outubro

72% da meta de R$ 117 mil

Fechamento do mês

2 diaspara fechar. Não duas semanas.

IA do bFlow · conciliei 112 lançamentos. 2 precisam de você: revisar.

Faça

Valor em numero-heroi (Sora 800, números tabulares).
Traço de resultado só quando o número é ganho: recebido, lucro, meta, tempo economizado.
Um card escuro de destaque por página, no máximo.

Não faça

Sombra em card; borda lateral colorida.
Traço lima em saldo neutro ou em vencidos.
Card zerado com lista cheia (mesma fonte de dados sempre).

Componentes

Badges e chips

Status com palavra, chips de filtro em pílula.

PagoVence hojeVencido há 12 diasAgendadoRascunho Sugerido pela IA

VencidosVencem hojeBoletoPixSemana 1

Faça

Status sempre com palavra; a cor só reforça.
bf-badge--ai para o que a IA fez ou sugeriu.

Não faça

Badge só com cor.
Fundo sólido de cor de status (fundo é sempre bg-sutil).

Componentes

Tabelas

Listas densas com números tabulares à direita; no mobile viram cards.

Cliente	Documento	Vencimento	Status	Valor
Padaria Santa Rita	BOL 2026/0412	23/10/2026	Vencido há 12 dias	R$ 1.840,00
Clínica Vida	NFS-e 2026/0098	04/11/2026	Vence hoje	R$ 3.200,00
Oficina do Beto	BOL 2026/0415	02/11/2026	Pago	R$ 960,00

Faça

Cabeçalho em rótulo sobre bg-sutil; linhas de 44–48 px; hover bg-sutil.
Valores exatos (R$ 1.840,00) e IDs em mono.
Lista com mais de 3 colunas vira card abaixo de md (DataList).

Não faça

Mais de uma ação visível por linha.
Zebra striping; bordas verticais.

Componentes

Perfis

Avatar de pessoa, de empresa e do próprio bFlow.

Alice Lucas

Redes sociais · BitGrow

Carlos Augusto

Administrador

Padaria Santa Rita

Cliente desde 2024

IA do bFlow

Assistente

Faça

Pessoa: círculo com iniciais em azul-100/azul-700 ou foto; 28, 40 e 64 px.
Empresa: quadrado arredondado em bg-sutil.
bFlow e IA do bFlow: tile azul com o símbolo.

Não faça

Iniciais "BF" para o bFlow.
Foto sem máscara circular.

Componentes

Pop-ups

Diálogo, drawer lateral e toast, nas camadas certas (z-index 500 / 400 / 600).

14 cobranças enviadas. 2 clientes sem WhatsApp receberam só e-mail.Ver

Detalhe do título

BOL 2026/0412 · Padaria Santa Rita

Vencido há 12 diasR$ 1.840,00

IA do bFlow · este cliente paga em média 9 dias após o lembrete. Sugiro cobrar hoje.

Faça

Modal 440 px, sombra-modal, sobre overlay; título como pergunta ou ação; primário por último.
Drawer 360–480 px à direita; fecha com Esc e clique fora.
Toast em noite-700, ponto lima quando é resultado; some em 6 s; uma ação no máximo.

Não faça

Modal sobre modal.
Toast para erro bloqueante (use o modal).
Drawer para formulário longo (use página).

Componentes

Ícones

Phosphor, peso regular, herdando a cor do texto.

Phosphor Icons, peso regular

Família única do produto (@phosphor-icons/react), 1,5 px em 24 px, cor herdada de currentColor; fill só no item L1 ativo. Reservas de significado: SparkleIcon = IA · TagIcon = etiquetas · WrenchIcon = OS · TrayIcon = caixa de entrada · ChartLineUpIcon = relatórios.

Faça

Um detalhe em acento por ícone, no máximo, e só para IA ou ganho.
Ícone + rótulo sempre que o significado não for universal.

Não faça

Ícones coloridos de pacotes genéricos; emoji como ícone; SVG avulso fora da biblioteca.
Logo de terceiros como ícone genérico.

Recursos

Downloads

Logo em SVG, PNG e JPG (INPI), tokens e CSS. O botão salva o arquivo; se o navegador bloquear, ele abre em nova aba.

Logo em SVG

assinatura-horizontal-sobre-azul.svg

SVG vetorial · 586 B

Baixar

assinatura-horizontal-sobre-claro.svg

SVG vetorial · 586 B

Baixar

assinatura-horizontal-sobre-escuro.svg

SVG vetorial · 586 B

Baixar

icone-tile-azul.svg

SVG vetorial · 504 B

Baixar

icone-tile-meia-noite.svg

SVG vetorial · 504 B

Baixar

pb-negativo-assinatura.svg

SVG vetorial · 633 B

Baixar

pb-negativo-simbolo.svg

SVG vetorial · 397 B

Baixar

pb-positivo-assinatura.svg

SVG vetorial · 586 B

Baixar

pb-positivo-simbolo.svg

SVG vetorial · 397 B

Baixar

simbolo-micro-sobre-claro.svg

SVG vetorial · 325 B

Baixar

simbolo-micro-sobre-escuro.svg

SVG vetorial · 325 B

Baixar

simbolo-sobre-claro.svg

SVG vetorial · 397 B

Baixar

simbolo-sobre-escuro.svg

SVG vetorial · 397 B

Baixar

Logo em PNG e JPG (prontos para usar)

apple-touch-icon-180.png

ícone · 5 KB

Baixar

assinatura-sobre-azul-1680x560.png

PNG · 29 KB

Baixar

assinatura-sobre-claro-1680x560.png

PNG · 34 KB

Baixar

assinatura-sobre-escuro-1680x560.png

PNG · 26 KB

Baixar

avatar-redes-1080.png

PNG · 18 KB

Baixar

favicon-micro-tile-16.png

ícone · 480 B

Baixar

favicon-micro-tile-32.png

ícone · 908 B

Baixar

favicon-micro-tile-64.png

ícone · 2 KB

Baixar

icone-app-1024.png

ícone · 29 KB

Baixar

icone-app-escuro-1024.png

ícone · 30 KB

Baixar

icone-pwa-192.png

ícone · 5 KB

Baixar

icone-pwa-512.png

ícone · 13 KB

Baixar

inpi-marca-figurativa-945.jpg

INPI 945×945 · P&B · 29 KB

Baixar

inpi-marca-mista-945.jpg

INPI 945×945 · P&B · 29 KB

Baixar

simbolo-sobre-claro-1024.png

PNG · 25 KB

Baixar

simbolo-sobre-claro-512.png

PNG · 11 KB

Baixar

simbolo-sobre-escuro-1024.png

PNG · 22 KB

Baixar

simbolo-sobre-escuro-512.png

PNG · 10 KB

Baixar

Tokens e CSS

JSON

tokens.json

Tokens (JSON) · 5 temas · 19 KB

Baixar

CSS

tokens.css

CSS variables por data-theme · 7 KB

Baixar

CSS

bundle.css

CSS dos componentes · 13 KB

Baixar

Recursos

Mapa para o globals.css

Como cada token deste sistema cai nas variáveis que o produto já usa.

Token do DS	Variável atual no globals.css	Observação
`bg`	`--background`	Proposta: névoa #F4F6FB no light (hoje #ffffff) e meia-noite #0A0F2C no dark-vibrant (hoje #0B0D1A)
`bg-elevado`	`--foreground`	cards, modais, inputs
`bg-sutil`	`--shaded`	hover, chips neutros
`texto` / `texto-corpo` / `texto-suave`	`--text` / `--text-secondary` / `--label`	no dark, corpo em #C9CFEA (não branco puro)
`marca` / `sobre-marca`	`--primary`, `--cta-bg` / `--on-primary`, `--cta-ink`	Ameixa #43075D; Alto Contraste âmbar com tinta preta
`marca-hover`	`--primary-hover` (Ameixa) / `--primary-faded`
`link`	`--primary-text`	azul clareado nos temas escuros
`borda` / `borda-forte`	`--border` / `--input`	borda de campo é componente: ≥3:1
`sucesso` / `atencao` / `erro`	`--success-text` / `--warning-text` / `--danger-text`	para texto; fills continuam `--success` etc.
`foco`	anel de foco global	Ameixa mantém #14B5BD
`nav-bg` / `nav-texto` / `nav-ativo-*`	`--sb-l1` / `--sb-text` / item ativo	Ameixa: #241246 / #D9CDEB / lima #B2D300
`acento` / `acento-texto` / `acento-fundo`	novos	só resultado e IA do bFlow; no Ameixa coincidem com `--module-accent*`
`logo-ink` / `logo-acento` / `logo-ink-nav` / `logo-acento-nav`	novos	substituem o logo recolorido por tema
`--module-accent`, `--surface-block-`, `--band-*`	mantidos como estão	regra 90/10 e cor por módulo continuam (manual técnico §3–4)

O manual técnico de UX (SPECS/UXUI/design-system-bflow.md, v3.0) continua sendo a fonte de z-index, comportamentos anti-bug, mobile e cor por módulo. Este site define marca, tokens e componentes.

Um símbolo, cinco temas, um só jeito de construir

O que é

Como usar

Status

Marca e logo

Onde aparece

Construção

Proteção e mínimos

Faça

Não faça

Cores

Tokens semânticos (mudam com o tema — troque acima)

Escalas de 7 tons

Azul

Lima

Neutros (meia-noite → névoa)

Faça

Não faça

Valores por tema

Tipografia

Display e títulos (Sora)

Texto e interface (Inter)

Dados (mono)

Faça

Não faça

Espaçamento, raio e sombra

Raio

Sombra

Temas

Faça

Não faça

Movimento

Botões

Faça

Não faça

Formulários

Faça

Não faça

Navegação

Faça

Não faça

Cards e indicadores

Faça

Não faça

Badges e chips

Faça

Não faça

Tabelas

Faça

Não faça

Perfis

Faça

Não faça

Pop-ups

Enviar cobrança para 14 clientes?

BOL 2026/0412 · Padaria Santa Rita

Faça

Não faça

Ícones

Phosphor Icons, peso regular

Faça

Não faça

Downloads

Logo em SVG

Logo em PNG e JPG (prontos para usar)

Tokens e CSS

Mapa para o globals.css