Criando uma arquitetura capaz de sustentar expansão contínua.
Criando uma arquitetura capaz de sustentar expansão contínua.
O Bank of Banks é uma conta digital PJ em modelo white label que permite diferentes instituições operarem sob suas próprias marcas usando a mesma base tecnológica.
Cada cliente possui identidade visual, regras de negócio e ofertas comerciais distintas. A estratégia inicial priorizou baixa customização da base, acelerando a validação das funcionalidades.
A combinação entre múltiplas marcas e novas funcionalidades expôs a ausência de padronização clara, refletindo-se em impactos operacionais concretos:
Retrabalho frequente
(design e engenharia)
Aumento do tempo
de implementação
Dificuldade de manutenção
na plataforma
Investir na construção de um Design System em uma startup early-stage envolve trade-offs reais.
Argumentos contra
O produto ainda estava em fase de exploração e validação de funcionalidades.
Mudanças frequentes e iterações constantes poderiam tornar um sistema rígido e prematuro.
O investimento inicial de tempo poderia atrasar entregas em um contexto de prazos apertados.
Argumentos a favor
No setor financeiro, consistência não é apenas estética, é fator de confiança.
O modelo white label exigia flexibilidade para múltiplas marcas, mas também uma base coesa.
A ausência de padrões claros já estava gerando retrabalho e dificultando a evolução do produto.
Estruturamos um workshop multidisciplinar para enquadrar o tema de forma objetiva. Ao apresentar cases consolidados e artigos com evidências de ganho de produtividade, deslocamos a discussão do custo inicial para o impacto estrutural no médio prazo.
Biblioteca vista como custo inicial
Biblioteca vista como infraestrutura
Discussão focada em esforço
Discussão focada em impacto
Dúvida sobre o retorno
Clareza sobre a eficiência futura
Debate sobre iniciar ou não
Debate sobre como executar
Com o consenso estabelecido, organizamos a construção do sistema em etapas claras e complementares.
Auditoria
Inventariamos a interface para mapear componentes, duplicações e inconsistências, identificando onde a padronização teria maior impacto.
Benchmark
Analisamos bancos digitais e fintechs consolidadas para compreender como sistemas escaláveis organizam sua base.
O PRINCIPAL INSIGHT
A camada visual pode variar entre marcas, mas a estrutura precisa permanecer consistente. Esse entendimento orientou a organização do sistema.
A estratégia foi definida para equilibrar flexibilidade de marca, consistência técnica e evolução progressiva do produto.
Duas camadas estruturais
A separação entre core imutável e camada de marca permitiu acomodar diferentes identidades sem comprometer a coesão do produto.
Foco no essencial
A primeira versão focou nos fundamentos (cores, tipografia e grid) estruturando átomos e componentes simples antes de expandir o sistema.
Evolução contínua
Novas funcionalidades passaram a ser compostas a partir da base definida, enquanto telas existentes eram atualizadas gradualmente.
Flexibilidade
Para sustentar o modelo white label e múltiplas marcas
Consistência
Para garantir previsibilidade técnica e escalabilidade
Simplicidade
Evitando complexidade desnecessária na base
O sistema foi estruturado em duas camadas complementares:
O sistema foi estruturado em duas camadas complementares:
As interfaces passaram a ser construídas exclusivamente a partir da base estrutural definida, evidenciando coerência entre marcas e clareza na evolução do produto.
Mantivemos a fonte Montserrat já adotada pelo produto, mas estruturamos sua aplicação. Definimos uma escala tipográfica clara, pesos consistentes e hierarquia previsível para eliminar variações arbitrárias.
As cores de marca eram definidas por cada cliente, mas estruturamos a base comum do sistema. Definimos uma paleta neutra consistente e cores semânticas padronizadas, garantindo estabilidade visual independentemente da identidade aplicada.
Neutral/ 01
#FFFFFF
Neutral/ 02
#F9F9F9
Neutral/ 03
#F0F0F0
Neutral/ 04
D9D9D9
Neutral/ 05
#B1B1B1
Neutral/ 06
#656565
Neutral/ 07
#4E4E4E
Neutral/ 08
#202020
Error/ 10
#FBE8E9
Error/ 30
#F4BBBE
Error/ 80
#E04951
Error/ 100
#DA1E28
Warning/ 10
#FEF9E8
Warning/ 30
#FBEDBB
Warning/ 80
#F9E7A4
Warning/ 100
#F1C21B
Success/ 10
#E9F6ED
Success/ 30
#BDE3C8
Success/ 80
#9CD5AD
Success/ 100
#202020
As cores de marca eram definidas por cada cliente, mas estruturamos a base comum do sistema. Definimos uma paleta neutra consistente e cores semânticas padronizadas, garantindo estabilidade visual independentemente da identidade aplicada.
Neutral/ 01
#FFFFFF
Neutral/ 02
#F9F9F9
Neutral/ 03
#F0F0F0
Neutral/ 04
D9D9D9
Neutral/ 05
#B1B1B1
Neutral/ 06
#656565
Neutral/ 07
#4E4E4E
Neutral/ 08
#202020
Error/ 10
#FBE8E9
Error/ 30
#F4BBBE
Error/ 80
#E04951
Error/ 100
#DA1E28
Warning/ 10
#FEF9E8
Warning/ 30
#FBEDBB
Warning/ 80
#F9E7A4
Warning/ 100
#F1C21B
Success/ 10
#E9F6ED
Success/ 30
#BDE3C8
Success/ 80
#9CD5AD
Success/ 100
#202020
Formalizamos o grid como parte do core estrutural do sistema, ajustando a margem lateral para 20px em vez de 24px. Essa decisão permitiu ganhar área útil sem comprometer a sensação de respiro, equilibrando densidade e clareza na interface.
Estruturamos uma hierarquia clara de ações através de dimensões padronizadas. Botões primários (48px), secundários (32px) e features (104px) foram definidos com proporções específicas para refletir prioridade e contexto de uso.
As telas foram construídas integralmente a partir dos componentes definidos no Design System, evidenciando coerência entre marcas e previsibilidade na evolução do produto.
As interfaces passaram a ser construídas exclusivamente a partir da base estrutural definida, evidenciando coerência entre marcas e clareza na evolução do produto.
Mantivemos a fonte Montserrat já adotada pelo produto, mas estruturamos sua aplicação. Definimos uma escala tipográfica clara, pesos consistentes e hierarquia previsível para eliminar variações arbitrárias.
As cores de marca eram definidas por cada cliente, mas estruturamos a base comum do sistema. Definimos uma paleta neutra consistente e cores semânticas padronizadas, garantindo estabilidade visual independentemente da identidade aplicada.
N/ 01
N/ 02
N/ 03
N/ 04
N/ 05
N/ 06
N/ 07
N/ 08
E/ 10
E/ 30
E/ 80
E/ 100
W/ 10
W/ 30
W/ 80
W/ 100
S/ 10
S/ 30
S/ 80
S/ 100
Formalizamos o grid como parte do core estrutural do sistema, ajustando a margem lateral para 20px em vez de 24px. Essa decisão permitiu ganhar área útil sem comprometer a sensação de respiro, equilibrando densidade e clareza na interface.
Estruturamos uma hierarquia clara de ações através de dimensões padronizadas. Botões primários (48px), secundários (32px) e features (104px) foram definidos com proporções específicas para refletir prioridade e contexto de uso.
As telas foram construídas integralmente a partir dos componentes definidos no Design System, evidenciando coerência entre marcas e previsibilidade na evolução do produto.
Redução do tempo médio de entrega.
Número de instituições atendidas no período de 6 meses.
Aumento da previsibilidade técnica do sistema.
Design System é estratégia de escala, não apenas organização visual.
Padronização bem estruturada aumenta autonomia em vez de restringi-la.
Alinhamento cultural é tão importante quanto arquitetura técnica.
Em modelos white label, disciplina na padronização sustenta crescimento.
