Supernova Design System | Demello Design Co.

Em 2021, a Lendico virou Provu. O rebranding exigiu um Design System novo do zero, com prazo fixo de lançamento em novembro. Defini a arquitetura de tokens em três camadas, reconstruí 30+ componentes com documentação completa de anatomia e casos de uso, e conduzi o handoff diretamente com o time de front-end. Em menos de 6 meses, o Supernova unificou 2 produtos e foi adotado por 6 squads sem treinamento especial.

In 2021, Lendico became Provu. The rebrand meant building a Design System from scratch, with a fixed launch date in November. I defined the token architecture across three layers, rebuilt 30+ components with full anatomy documentation and usage guidelines, and ran the handoff directly with the front-end team. In under 6 months, Supernova unified 2 products and was adopted by 6 squads with no special training required.

Papel: liderei arquitetura de tokens, design dos componentes e handoff; alinhamento com stakeholders e branding em par com o time de marketing. Role: I led token architecture, component design, and handoff; stakeholder alignment and branding in collaboration with the marketing team.

Contexto

Context

Em 2021, a Lendico, fintech de crédito pessoal, passou por uma mudança radical: rebranding completo e novo nome, Provu. O desafio para o time de design foi imenso: refazer toda a linguagem visual, os design tokens e os componentes do produto em menos de 6 meses, com o lançamento da marca já agendado para novembro. Eram dois produtos distintos, com times separados, atendidos pelo mesmo DS.

In 2021, Lendico, a Brazilian personal credit fintech, went through a complete rebrand and came out the other side as Provu. The design team had less than 6 months to redo the entire visual language, design tokens, and product components, with a launch date already locked in for November. Two separate products, two separate teams, one Design System to cover both.

O DS legado estava acoplado à identidade visual da Lendico em cada token. Qualquer tentativa de reaproveitamento seria mais custosa do que reconstruir. O caminho foi construir do zero algo robusto o suficiente para escalar, consistente para unificar dois produtos com times separados e entregável num prazo desafiador.

The legacy DS was tightly coupled to Lendico's visual identity at the token level. Reusing it would have cost more than rebuilding from scratch. The path forward had to be robust enough to scale, consistent enough to unify two products with separate teams, and deliverable within a challenging deadline.

"Uma Supernova é responsável por espalhar pelo Universo elementos que evoluem e se tornam outros corpos celestes. Assim também é a nossa missão: evoluir os produtos do universo Provu."

"A Supernova scatters elements across the universe that evolve and become other celestial bodies. That's our mission too: evolving the products in the Provu universe."

Conceito por trás do nome The concept behind the name

Desafios

Challenges

🎨

Atualização total de tokens e componentes. Todos os design tokens (cores, tipografia, espaçamentos, sombras) precisavam refletir a nova identidade visual, assim como todos os componentes construídos anteriormente.

Full token and component overhaul. Every design token (colors, typography, spacing, shadows) had to reflect the new visual identity, along with every component that had been built before.

✍️

Nova linguagem e comunicação. A voz e o tom da nova marca eram diferentes. Refazer a linguagem dos componentes e da documentação para estar alinhado com o branding da Provu.

New voice and communication. The new brand had a different tone. The language used in components and documentation needed to match Provu's branding.

⏱️

Curto prazo crítico. O lançamento da nova marca estava fixo no calendário. Não havia espaço para metodologias longas. O processo precisava ser ágil, colaborativo e com entregas incrementais.

A hard deadline. The brand launch date was fixed. No room for drawn-out methodologies. The process had to be agile, collaborative, and built around incremental delivery.

Processo

Process

Do entendimento ao handoff.

From understanding to handoff.

01

Onboarding e entrevistas com o time de branding

Onboarding and interviews with the branding team

Conduzi entrevistas com o time de branding para entender o moodboard da nova marca: paleta de cores, formas escolhidas, tom de linguagem e os valores que a Provu queria projetar. Queria garantir que o DS não fosse só um espelho da marca, mas uma forma de expressá-la com consistência.

I ran interviews with the branding team to understand the new brand's moodboard: color palette, shapes, tone of voice, and the values Provu wanted to project. I wanted the DS to be more than a mirror of the brand, a way to express it consistently across products.

02

Brainstorm e kick-off multidisciplinar

Multidisciplinary brainstorm and kickoff

Rodei sessões com desenvolvedores, front-end, QAs e Product Designers dos dois produtos da Provu. Fiz apresentações para stakeholders com um argumento direto: o DS deveria ser tratado como produto da empresa, com backlog e priorização próprios. O maior risco do projeto era político, mesmo que o debate sempre puxasse para o técnico. A tentação de tratar o rebranding como um sprint era forte, e convencer as lideranças do contrário foi onde mais gastei energia.

I held sessions with developers, front-end engineers, QAs, and Product Designers from both Provu products. I also presented to stakeholders with a direct argument: the DS should be treated as a company product, with its own backlog and prioritization. The biggest risk was political, even if the discussion kept pulling toward the technical. The temptation to treat the rebrand as a single sprint was strong, and getting leadership aligned was where I spent the most energy.

03

Auditoria e mapeamento de componentes

Component audit and mapping

Fiz uma auditoria do DS legado com os Product Designers. O inventário mostrou componentes com inconsistências visuais entre os dois produtos, tokens sem nomenclatura padronizada e vários fluxos sem cobertura. A partir daí ficou claro o que podia ser evoluído, o que precisava ser refeito do zero e o que estava faltando.

I ran an audit of the legacy DS with the Product Designers. The inventory showed visual inconsistencies between the two products, tokens without standardized naming, and several flows with no coverage at all. From there it became clear what could be evolved, what needed to be rebuilt from scratch, and what was simply missing.

04

Redesign dos componentes e tokens

Component and token redesign

Fui responsável pela definição da arquitetura de tokens em três camadas (primitivos, semânticos e específicos de componente) e pela reconstrução dos componentes: Alert, Badge, Botões, Cards, Formulários, Header, Loader, Modal, Tabs e mais. Cada componente entregue com documentação de anatomia, variações e casos de uso, e validado com o time de front-end antes de entrar no backlog de implementação. Testei primeiro uma versão só com tokens primitivos e semânticos, sem camada de componente, mas essa estrutura não escalava para outras marcas. Engenharia concordou que faltava esse nível, e desenhamos juntos a terceira camada.

I defined the token architecture across three layers (primitive, semantic, and component-specific) and rebuilt the components: Alert, Badge, Buttons, Cards, Forms, Header, Loader, Modal, Tabs, and more. Every component shipped with anatomy documentation, variations, and usage guidelines, and was validated with the front-end team before entering the implementation backlog. I first tried a version with only primitive and semantic tokens, without a component layer, but that structure didn't scale to other brands. Engineering agreed that level was missing, and we designed the third layer together.

05

Handoff e implementação no Storybook

Handoff and Storybook implementation

Conduzi o handoff diretamente com o time de front-end, revisando componente a componente antes da implementação. Por ter envolvido desenvolvimento desde o início do processo, não houve surpresas: cada token e cada estado de componente já tinham sido discutidos. O Supernova entrou no Storybook como fonte única de verdade para design e engenharia.

I ran the handoff directly with the front-end team, reviewing each component before implementation. Because development had been involved from the start, there were no surprises: every token and every component state had already been discussed. Supernova went into Storybook as the single source of truth for both design and engineering.

Dinâmica com Design Team e Engenharia

Design Team and Engineering working session

Solução

Solution

O Supernova nasceu como produto, não como entregável. Tokens em três camadas (primitivos, semânticos e específicos de componente), componentes com documentação completa de anatomia e casos de uso, e cobertura visual consistente entre os dois produtos da Provu. O que mais importou: os seis squads que adotaram o sistema não precisaram de treinamento especial, a documentação fez esse trabalho.

Supernova was built as a product, not a deliverable. Tokens across three layers (primitive, semantic, and component-specific), components with full anatomy documentation and usage guidelines, and consistent visual coverage across both Provu products. Six squads adopted the system with no special training. The documentation did that work.

Documentamos os componentes no Figma e no Storybook, e consolidei as duas fontes no Zeroheight como referência única.

We documented components in both Figma and Storybook, and I consolidated both sources in Zeroheight as the single reference.

Ver documentação completaView full documentation

Screenshot da biblioteca de componentes no Figma

Screenshot do Storybook com componentes implementados

Resultados

Results

Escala, consistência e velocidade.

Scale, consistency, and speed.

<6 meses <6 months

Do kick-off ao lançamento da nova marca

From kickoff to brand launch

30+

Componentes criados e documentados

Components built and documented

6

Squads e tribos utilizando o Design System

Squads and tribes using the Design System

4 semanas 4 weeks

Para virar os dois produtos para o novo Design System

To roll out both products on the new Design System

Consistência garantida

Consistency across the board

Tokens centralizados eliminaram inconsistências visuais entre produtos e plataformas.

Centralized tokens eliminated visual inconsistencies between products and platforms.

Adoção sem treinamento

Adoption without training

6 squads adotaram o sistema sem precisar de treinamento formal. A documentação de anatomia e casos de uso foi suficiente para cada time começar por conta própria.

6 squads adopted the system without any formal training. The anatomy and usage documentation was enough for each team to get started on their own.

Governança estabelecida

Governance in place

O DS foi posicionado como produto da empresa, com processo claro de contribuição e evolução.

The DS was positioned as a company product, with a clear process for contribution and evolution.

Alinhamento total

Single source of truth

Design e desenvolvimento trabalhando da mesma fonte de verdade via Storybook.

Design and development working from the same reference via Storybook.

Aprendizados

Learnings

O que esse projeto me ensinou.

What this project taught me.

A documentação provou ser parte do produto em si. Um componente sem anatomia e casos de uso documentados é um componente que será implementado de forma errada ou simplesmente ignorado. Nesse projeto, a decisão de não lançar nenhum componente sem anatomia e casos de uso documentados foi o que garantiu a adoção real pelos times.

Documentation proved to be part of the product itself. A component without anatomy and usage guidelines documented will be implemented wrong or simply ignored. On this project, the decision not to ship any component without that documentation was what made real adoption happen.