Sciene / Design System · 2025-2026
Um sistema, três produtos.
A base compartilhada por três produtos B2B da Sciene. Construí os tokens, a biblioteca de componentes, os padrões de acessibilidade e a documentação, e depois trabalhei com engenharia para colocar tudo em produção, de forma que novos fluxos pudessem ser montados com peças que já existíam.
Tokens, componentes, acessibilidade e documentação · Em parceria com engenharia
Três produtos repetindo as mesmas decisões.
O Companion é a suíte da Sciene para times de Customer Success: Account Flagging, um AI Email Hub e um Meeting Hub. Desenhei os três.
O problema ficou claro na minha primeira semana, e não era a interface parecer datada. Três produtos estavam sendo construídos sem nenhuma base compartilhada, então a mesma decisão era tomada várias vezes, um pouco diferente a cada vez.
Ninguém tinha feito nada errado. Simplesmente não havia nada contra o que construir.
Então a primeira coisa que defendi não foi um redesign. Argumentei para produto e engenharia que um sistema se pagaria no momento em que começássemos o segundo módulo, e então o construí junto com a v1, em vez de parar a entrega para fazer isso.
A auditoria
Passei pelas telas existentes e marquei todo lugar em que a mesma ideia tinha sido resolvida duas vezes. Uma tela do Meeting Hub, com o que encontrei nela.
Dados de cliente e receita borrados. Os padrões são o ponto.
Mudar uma regra. Atualizar o sistema.
Cada camada só conhece a camada acima dela, então mudar um valor se propaga pelo produto inteiro sem ninguém editar uma tela.
- FundaçõesRampa 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-secondary, e os papéis de severidade por trás de crítico, atenção e saudável. - PrimitivosBotão, input, select, checkbox, badge. Sem nenhum conhecimento de produto dentro deles.
- ComponentesA linha de alerta, a barra de filtros, o card de métrica. Primitivos compostos em coisas que sabem um pouco sobre o domínio.
- PadrõesLista de triagem, fluxo de reconhecimento, comportamento vazio e de carregamento. As regras de como os componentes se encaixam.
- ProdutoAccount Flagging, o AI Email Hub, o Meeting Hub. Montados a partir das camadas acima, guardando só o que é realmente específico deles.
- Valor bruto#f2f4f7
- Papel semântico
btn-secondary-bg - PrimitivoBotão secundário
- ProdutoAdiar, em um alerta que um CSM está triando
Compartilhar padrões, sem absorver todo o produto.
O jeito mais rápido de matar um sistema é colocar tudo dentro dele. Algo era promovido quando atendia a maioria destes critérios, e ficava local quando não atendia.
Regras que tornam a interface previsível.
Severidade se decide uma vez, nos tokens
Crítico, atenção, saudável. Esses três estados aparecem nos três módulos, então viraram tokens com cor, ícone e peso fixos. Ninguém escolhe um vermelho. Quando um CSM vê no Email Hub o mesmo vermelho que viu no Flagging, significa a mesma coisa.
Nada de botões outline, e hover sempre preenche
Botões outline sumiam ao lado de tabelas densas. Eles liam como decoração, então os botões secundários ganharam superfície preenchida. Mesmo raciocínio para o hover: uma mudança só de cor é fácil de perder quando você está varrendo quarenta contas, então toda linha e opção preenche.
Documentação escrita para dois leitores
A documentação é para engenheiros e para os assistentes de IA que todo mundo tem aberto hoje. Nomes semânticos de token, notas de componente escritas como regras de uso, estados listados em ordem previsível.
Um componente, diferentes contextos.
A linha de alerta é a peça em que o produto inteiro se apoia, então é a que vale desmontar. Troque os estados e o conteúdo para ver o que ela precisa absorver.
O sistema e o produto
Essa única linha leva o padrão de triagem para os três módulos. O Flagging lista por severidade, o Email Hub dobra em um resumo, e o Director Dashboard agrega para um time inteiro.
O trânsito vai nos dois sentidos. Construir o Director Dashboard revelou algo que a linha nunca tinha precisado fazer: o mesmo flag precisa ser lido de formas diferentes dependendo de quem olha. Quando um CSM marca uma conta como precisando de ajuda, isso é um pedido aberto na visão dele e algo esperando por ação na visão do diretor. Um componente, dois públicos, e o requisito veio do produto, não do sistema.
Da biblioteca ao produto em produção.
Os engenheiros já estavam andando rápido, então o sistema tinha que acompanhar. As variáveis do Figma mapeavam um para um com os tokens no código, o que significava que mudar um valor era mudar uma vez só. Sentei com eles enquanto construíam os primeiros componentes, e depois disso quase não precisaram de mim. A documentação de handoff foi escrita ao lado do design, enquanto o raciocínio ainda estava fresco.
As mudanças passavam por uma revisão leve com quem era dono do código afetado, e as regras que saíam dessas conversas iam para um documento curto de processo, para a próxima pessoa não ter que rediscutir tudo.
O teste com que eu realmente me importava: alguém conseguiria montar uma tela que eu nunca desenhei e ela ainda parecer o Companion? Na v2 isso era verdade, e é a razão de o Director Dashboard ter levado dias em vez de semanas.
As regras, funcionando no navegador.
Os primitivos por trás de tudo isso, rodando. Navegue com Tab para ver o comportamento de foco, digite no campo para disparar a validação e abra o select pelo teclado.
Acessibilidade, no nível do componente
Resolver isso uma vez nos primitivos foi boa parte do argumento para ter um sistema. Severidade nunca depende só de cor, então todo status carrega um rótulo de texto e uma forma. O foco é um anel visível em vez de uma troca de cor, todo controle é alcançável e operável pelo teclado, e o select da demo abaixo aceita setas, Enter e Escape. As metas de contraste foram definidas nas fundações, então os componentes herdam pares que passam em vez de cada tela checar o seu.
Desenhado seguindo os padrões WCAG e verificado com ferramentas de contraste. Não validei com leitores de tela, então não afirmaria isso.
Reconstruído no código deste site a partir das regras originais. A biblioteca de produção vive na base de código da Sciene.
Documentação para pessoas e assistentes de IA
Nomes semânticos de token e regras de uso passam a importar mais quando tem um assistente no meio. Um modelo a quem se pede uma linha de alerta escolhe o primitivo certo quando a documentação diz o que um token significa, e escolhe um plausível errado quando ela só diz qual cor ele é. Escrever para esse leitor acabou deixando a documentação melhor para engenheiros novos também, porque os dois precisam da mesma coisa: a regra, não o valor hexadecimal.
Ela também assume a metade repetitiva do trabalho. Protótipos em código me deixam testar como um componente se comporta no navegador antes de me comprometer com ele, e uma primeira versão da documentação é rascunhada em vez de digitada. As decisões continuam minhas, e eu confiro o resultado.
O sistema se provou no próximo módulo.
O Director Dashboard que saiu na v2 foi montado com peças que já existiam. Nenhuma tela nova para desenhar do zero, que era exatamente o que eu tinha argumentado que o sistema nos daria.
O que eu faria diferente
Componentizei demais no começo. Coisas que pareciam padrão depois de aparecer duas vezes eram coincidência, e tive que dissolver alguns componentes de volta nas telas de onde vieram. Esperar o terceiro uso antes de promover qualquer coisa teria me poupado esse trabalho, e os critérios acima são o que sobrou disso.