nosso+

O nosso+ nasceu da evolução de um projeto de curso sobre a conexão Figma + Cursor, que começou como uma dashboard financeira genérica — saldo, receitas, despesas, extrato. Um produto correto, mas sem ponto de vista.

Ao revisar o resultado, o ponto de vista apareceu: e se esse dinheiro não fosse de uma pessoa só, mas de um casal construindo algo junto? A partir daí, reformulei o produto em torno de metas compartilhadas — reserva de emergência, cozinha nova, viagem, carro novo — em vez de tratar o casal como um detalhe de "membros da família" dentro de uma dashboard pessoal.

A primeira mudança foi de tom: menos "sistema de gestão", mais "vocês dois, no mesmo objetivo". Isso significou reescrever toda a copy pra soar mais próxima e menos corporativa, remover os elementos de UI escura que passavam uma atmosfera fria, e — o mais importante — inverter a hierarquia visual do dashboard. Os cards de total, receita e despesa deixaram de ser o centro da tela; as caixinhas de metas assumiram esse lugar.

A segunda camada de refinamento veio de duas referências que sigo de perto em design: Stripe e Airbnb. Usei os dois como parâmetro pra revisar colunas, containers e espaçamento do dashboard inteiro — largura de leitura consistente entre telas, respiro vertical generoso, nada esticado de ponta a ponta em telas largas. A mesma contenção elegante que gosto nesses produtos, aplicada aqui num contexto bem mais informal.

O componente que mais gosto de ter desenhado neste projeto é o card de ritmo de cada meta. Ele cruza o progresso atual com o prazo definido e calcula, de verdade, se o casal está adiantado, no ritmo certo ou precisa de atenção — nada de status decorativo. O card mostra um painel de progresso, um painel de status com a leitura em linguagem simples, um gráfico do histórico de aportes mês a mês, e uma sugestão concreta de quanto cada pessoa precisaria contribuir pra chegar no prazo.

Pra metas de viagem, existe uma camada a mais: um alerta de bom momento pra comprar a passagem, cruzando o saldo já guardado com uma simulação de variação de preço. É a feature que diferencia o produto de uma dashboard financeira genérica — ele não só mostra o dinheiro, sugere a próxima ação certa.

Discutindo Atomic Design com o mesmo rigor crítico que aplico a qualquer decisão de produto, optei por não seguir a taxonomia literal de átomos/moléculas/organismos. Na prática, ela cria mais fricção do que clareza num time pequeno. Em vez disso, organizei os componentes por domínio (dashboard, modais, layout) e apliquei uma regra simples pra decidir o que vira componente compartilhado: tudo que se repete em três ou mais lugares vai pra uma camada única de primitivos.

Foi assim que Avatar, Badge e EmptyState nasceram — extraídos de seis, dois e sete pontos de duplicação reais no código, respectivamente. E como o objetivo é que design e código nunca percam sincronia, montei os três também no Figma, com as mesmas variantes e os mesmos tokens de cor usados no código (as mesmas variáveis que já alimentavam o componente de botão do design system).