Chamamos isso de tokenização de design. Veja o que é, por que fizemos e o que significa para as equipes que desenvolvem no Pendo.
O problema com o estilo "bom o suficiente"
Os sistemas de design acumulam dívidas da mesma forma que as bases de código — silenciosamente, gradualmente e, de repente, tudo de uma vez.
Com o tempo, decisões de estilo são tomadas de forma isolada. Um valor hexadecimal fixo aqui. Um border radius pontual ali. Tipografia que diverge levemente entre superfícies. Nada disso parece catastrófico no momento. Mas, somado em um produto com centenas de componentes e milhares de decisões, o resultado é algo concreto: inconsistência cara de corrigir e uma base de código em que qualquer mudança futura de design exige um verdadeiro trabalho de arqueologia.
Vimos isso em nosso próprio produto. Quando queríamos atualizar uma cor, precisávamos modificar dezenas de arquivos. Quando um designer entregava uma especificação, os engenheiros precisavam interpretá-la em vez de implementá-la diretamente. E à medida que aceleramos nosso desenvolvimento de produto com foco em IA, sabíamos que essa lacuna só aumentaria.
Então corrigimos a base.
O que construímos: uma camada semântica entre design e código
O núcleo desse trabalho é um sistema centralizado de tokens. Cada decisão visual do produto — cores, tipografia, border radius, espaçamento — agora é definida como um token com nome semântico, originado diretamente do Figma e processado pela nossa biblioteca de sistema de design.
"Nome semântico" é a expressão-chave. Em vez de #1A1A1A espalhado por dezenas de arquivos de componentes, agora temos tokens como color.action.primary. Em vez de valores de pixel fixos, temos uma escala de espaçamento. Em vez de casos pontuais ambíguos, temos um vocabulário compartilhado que design e engenharia compreendem igualmente.
Parece simples. A implementação não foi. A equipe percorreu toda a base de código do Pendo — componente por componente, superfície por superfície — substituindo valores fixos por tokens. Jake Minor e Darshana Saravanan lideraram esse esforço, e toda a equipe Flux realizou o trabalho tedioso e pouco glamoroso que faz com que as fundações realmente se sustentem.
Courtney Kyle, que lidera a equipe de plataforma front-end, explica como um novo sistema de tokens semânticos codifica a intenção de design diretamente na infraestrutura do produto.
O que mudou no produto
Para os usuários, as mudanças mais visíveis são:
Uma paleta neutra refinada. Neutros claros e quentes em toda a interface — cinzas mais claros para bordas e linhas, fundos de página brancos. O objetivo foi melhorar o contraste e a legibilidade em todas as superfícies.
Cores primárias e interativas atualizadas. As ações primárias agora utilizam quase-preto em vez de um tom de marca dominante. Isso mantém a cor disponível para usos significativos — dados, estados, superfícies de IA — em vez de uma presença constante em toda a interface.
Uma nova paleta de visualização de dados. Transição de tons escuros e opacos para cores suaves e vibrantes. Rosas e laranjas alinhados à marca, com acentos de contraste onde os dados exigem. Muito mais limpo, muito mais claro.
Nenhuma dessas mudanças afeta a funcionalidade. Seus fluxos de trabalho permanecem os mesmos. Mas a experiência de usar o Pendo agora reflete a sofisticação do produto por trás dela.
Por que isso importa além da estética
Esta é a parte à qual quero que as equipes de produto prestem atenção — porque é diretamente relevante para como você constrói, não apenas no que você está construindo.
Mudanças de design que antes levavam semanas agora levam horas. Quando toda a camada visual é tokenizada, atualizar um sistema de cores é uma única alteração em um único lugar. Podemos lançar iterações visuais mais rapidamente, responder a feedbacks mais rapidamente e manter o produto visualmente consistente à medida que adicionamos novas superfícies (e estamos adicionando muitas novas superfícies).
O desenvolvimento assistido por IA melhora drasticamente. Isso é real. Ferramentas como Cursor, Lovable e Claude geram interfaces melhores quando há um sistema de tokens claro a seguir. Em vez de produzir estilos avulsos que parecem ligeiramente fora do padrão, elas geram componentes que permanecem alinhados à marca por padrão. Se você usa ferramentas de codificação com IA no desenvolvimento do seu próprio produto, um sistema de design bem estruturado é um dos investimentos de maior alavancagem que você pode fazer.
As entregas entre design e engenharia realmente funcionam. A nomenclatura semântica cria contexto compartilhado. Quando um designer diz color.feedback.error e um engenheiro implementa color.feedback.error, ambos estão trabalhando a partir da mesma fonte de verdade. Sem necessidade de interpretação, sem surpresas na revisão.
O trabalho silencioso que torna tudo o mais possível
O trabalho com sistemas de design é invisível quando feito corretamente. Você não percebe um bom sistema de tokens. Você percebe um produto que parece refinado, responde rapidamente e não te surpreende com inconsistências visuais.
Esse é o objetivo. E é um objetivo que escala — não apenas para o Pendo, mas para qualquer equipe de produto que pensa seriamente em como construir mais rápido sem sacrificar a qualidade.
A base está estabelecida agora. Tudo o que construirmos sobre ela será melhor por isso.
