marivc

Pump · 2026

Atelier: quando um Design System deixa de ser biblioteca e vira infraestrutura

Quando IA começou a construir interfaces, percebemos que o Design System precisava deixar de ser uma biblioteca e passar a ser infraestrutura.

Meu papel
Staff Product Designer
Design Engineer
Empresa
Pump
Ano
2026
Design SystemWhite-labelAI-native

Resumo

Conforme a plataforma crescia, cada nova funcionalidade aumentava a distância entre design e implementação. Componentes duplicados, inconsistências e documentação desatualizada eram sintomas de um problema maior: o sistema não acompanhava a velocidade do produto.

O Atelier nasceu para resolver isso. Em vez de manter apenas uma biblioteca de componentes, criamos uma infraestrutura onde design, documentação e código evoluem juntos.

Desafio

O desafio nunca foi criar mais componentes. Era construir um sistema capaz de escalar em três frentes ao mesmo tempo:

  • velocidade de desenvolvimento;
  • autonomia dos times;
  • consistência das experiências.

Com a chegada da IA surgiu um novo consumidor da plataforma: agentes também precisavam compreender e construir interfaces de forma previsível.

Em vez de resolver cada problema separadamente, optamos por criar uma arquitetura capaz de sustentá-los juntos.

DS tradicional vs Atelier

Mudando o papel do Design System

Objetivo
DS tradicional

Organizar componentes

Atelier

Tornar a evolução do produto previsível

Onde vive
DS tradicional

Biblioteca separada do produto

Atelier

Dentro do próprio produto

Fonte da verdade
DS tradicional

Design e código precisam se reconciliar

Atelier

Código e documentação nascem juntos

Consistência
DS tradicional

Depende de revisão humana

Atelier

É garantida automaticamente pelo sistema

Escalabilidade
DS tradicional

Designers e devs constroem telas

Atelier

Times, clientes e agentes constroem sobre o mesmo sistema

Customização
DS tradicional

Cada marca exige adaptações

Atelier

White-label configurado por tokens

Resultado
DS tradicional

Biblioteca reutilizável

Atelier

Plataforma capaz de evoluir

Abordagem

  1. 01

    Produção desde o primeiro dia

    Construímos cada componente para funcionar em produção desde o primeiro dia. O objetivo deixou de ser representar interfaces e passou a ser gerar interfaces confiáveis.

  2. 02

    Regras antes da interface

    Componentes nasceram de tokens, contratos e regras compartilhadas. A interface passou a ser consequência dessas decisões, não sua origem.

  3. 03

    Cada entrega fortalece o sistema

    Cada novo caso de uso reforça o sistema em vez de criar exceções. Assim, a consistência cresce junto com o produto.

  4. 04

    White-label como configuração

    Marcas, temas e comportamentos passaram a ser configurados por tokens, permitindo evolução global sem alterar componentes.

Decisões arquiteturais

01

Tokens em camadas

Organizamos tokens em camadas para separar decisões globais das específicas de cada marca. Isso tornou a customização previsível sem aumentar a complexidade.

02

O sistema audita a si mesmo

O próprio sistema identifica inconsistências antes que elas cheguem ao produto. Revisões deixam de depender apenas de inspeção manual.

03

Atelier + Workbench

Componentes, documentação, exemplos e testes vivem no mesmo ambiente, mantendo design e implementação sincronizados.

04

Extensível pelos clientes

Clientes podem criar componentes e padrões próprios utilizando a mesma infraestrutura, sem perder compatibilidade com o sistema principal.

05

Agentes como consumidores de primeira classe

A IA deixou de ser apenas uma ferramenta de criação e passou a consumir o próprio sistema. Componentes, contratos e documentação foram estruturados para que agentes compreendam e gerem interfaces com a mesma previsibilidade esperada por pessoas.

O Atelier, ao vivo

Parte do Atelier pode ser experimentada aqui. A fundação de cor mostra como duas decisões de marca geram toda a paleta do produto. A página de Button demonstra como essas regras chegam a um componente, da anatomia aos estados e à acessibilidade.

Fundação

atelier / foundations / color

Componente

atelier / action / button

Resultados

109 componentes

Base compartilhada para toda a plataforma

1.165 elos de consumo

Conexões reais entre o Atelier e o produto

65,8% de reúso

Specs utilizados por dois ou mais consumidores

21% das stories

Entregas que também fortaleceram o sistema

O maior resultado do Atelier não foi chegar a 109 componentes, mas criar uma infraestrutura capaz de revelar onde o sistema gera mais alavancagem, onde decisões ainda são repetidas e quais investimentos devem vir em seguida.

O Atelier passou a evoluir junto com o produto: seus componentes são consumidos pelas funcionalidades, novas stories fortalecem o sistema e dados reais de uso orientam sua evolução.

Ele não apenas organiza o que já foi construído. Também ajuda a decidir o que deve ser construído depois.

Criei uma infraestrutura, medi seu uso e usei dados reais para guiar seu crescimento.

Próximo projeto

Construindo uma plataforma de car sharing