01 / 07 · Estudo de casoSaaS
Um design system compartilhado por três produtos.
Um sistema para três produtos
Construí o design system do Companion, a plataforma da Sciene: os tokens, a biblioteca de componentes, os padrões de acessibilidade e a documentação. O time de engenharia implementou tudo em React e Tailwind. Não escrevi o código de produção, mas revisei a implementação junto com eles até o design e o código baterem.
- 3× mais rápido para lançar uma funcionalidade, comparando o tempo de entrega antes e depois do sistema
- 100% de paridade de tokens entre o Figma e o código
- 50+ componentes compartilhados entre três produtos
- 0 telas redesenhadas para lançar o Director Dashboard da v2
Três produtos, três versões de tudo
O Account Flagging, o Email Hub e o Meeting Hub resolviam por conta própria o mesmo botão, o mesmo status e o mesmo layout. Somado ao código legado, isso gerava entregas mais lentas, telas inconsistentes e bugs aparecendo o tempo todo.
- Dois estilos de botão na mesma barra. Uma ação outline ao lado de uma preenchida, e nenhuma é claramente a principal.
- O item ativo da navegação é uma barra azul sólida, enquanto nas outras linhas o hover só muda a cor do texto.
- Um terceiro azul, em um terceiro formato, para o badge da empresa.
- Cada card de métrica tem a própria borda e o próprio padding, definidos tela a tela em vez de virem de um card compartilhado.
Construído junto com a v1, não antes dela
A engenharia já estava entregando, e o sistema não podia travar o produto. Por isso construí tudo junto com a v1 e fui ajustando os componentes a cada entrega.
- FundaçõesEscala de cores, escala tipográfica, passos de espaçamento, raios. Decididos uma vez, discutidos uma vez.
- Tokens semânticosPapéis em vez de valores.
btn-primary-bg,btn-secondary-bg,bg-secondarye os papéis de severidade por trás de crítico, atenção e saudável. - PrimitivosBotão, input, select, checkbox, badge. Não sabem nada sobre o produto.
- ComponentesA linha de alerta, a barra de filtros, o card de métrica. Primitivos combinados em peças que já sabem um pouco sobre o domínio.
- PadrõesLista de triagem, fluxo de reconhecimento, estados vazio e de carregamento. As regras de como os componentes se encaixam.
- ProdutoAccount Flagging, o AI Email Hub, o Meeting Hub. Montados com as camadas acima. Cada um guarda só o que é realmente seu.
- Valor bruto#f2f4f7
- Papel semântico
btn-secondary-bg - PrimitivoBotão secundário
- ProdutoAdiar, em um alerta na triagem de um CSM
Fundamentos que todo componente herda
Os componentes nunca escolhem um valor solto. Cor, tipografia, raio e elevação são tokens: primeiro os primitivos, depois os nomes semânticos por cima, e mudar um deles atualiza os três produtos.
Marca
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
Neutro
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
Severidade, em tokens semânticos
- Crítico
fg-errorbg-error-primary - Atenção
fg-warningbg-warning-primary - Saudável
fg-successbg-success-primary
A severidade se decide uma vez, nos tokens
Os estados crítico, atenção e saudável aparecem nos três módulos. Descartei a ideia de uma paleta por produto, porque o mesmo vermelho precisa significar a mesma coisa no Email Hub e no Account Flagging. Cada severidade virou um token com cor, ícone e peso fixos. A severidade nunca depende só da cor.
- Token
severity.critical- Cor
error- Ícone
octagon-alert- Peso
500
Crítico. Cor error, ícone octagon-alert, peso 500
Botões secundários são preenchidos, e o hover também
Botões outline sumiam ao lado de tabelas densas e pareciam decoração. Troquei por botões secundários preenchidos. Todo hover também passou a preencher o fundo, porque uma simples mudança de cor passa despercebida quando você está correndo o olho por quarenta contas.
| Conta | Alertas abertos | Último contato | Ação |
|---|---|---|---|
| Coastline Pet | 2 | Hoje | |
| Harbor & Pine Home | 3 | Ontem | |
| Juniper Kitchen | 1 | Há 3 dias | |
| Atlas Trail Gear | 0 | Semana passada |
Documentação escrita para engenheiros e seus assistentes de IA
Com as anotações só no Figma, os engenheiros ficavam adivinhando. Escrevi a documentação como regras de uso, com nomes semânticos de token, para que uma pessoa ou um assistente que peça uma linha de alerta escolha o componente certo. Fazer a IA responder de forma consistente exigiu várias rodadas de ajuste: criei skills com essas regras e fui refinando até o resultado ficar estável.
severity.critical
- Significado
- Uma conta precisa de ação hoje
- Use para
- Alertas que travam receita ou renovação
- Não use para
- Erros de formulário; use o estado de erro do campo
- Combina com
- Ícone de alerta, rótulo em texto
Resultado
CríticoO Director Dashboard saiu de peças que já tínhamos
Na v2, alguém já conseguia montar uma tela que eu nunca tinha desenhado, e ela continuava com cara de Companion. O Director Dashboard foi lançado sem nenhuma tela nova desenhada do zero.
O que eu faria diferente
Componentizei cedo demais. O que parecia padrão depois de dois usos acabou sendo coincidência, e devolvi vários componentes às telas de onde tinham saído. Hoje espero o terceiro uso antes de levar qualquer coisa para o sistema.
