Voltar

Talqui

Como criar uma plataforma que cresça facilmente, seja bem organizada e tenha um visual simples para a Talqui?

  • Product Design
  • Design System
Capa do projeto Talqui Plataforma

Desafio

Criar regras para manter o crescimento da plataforma.

A versão anterior da Talqui não tinha padrões de design ou documentação compartilhada. Isso dificultava manter a consistência. Também tornava mais difícil melhorar a interface e crescer o produto. Meu trabalho foi criar essa base comum, do design system até as telas da plataforma.

Antes

A interface antes do design system.

As telas antigas de atendimento e configurações mostram o ponto de partida. Elas incluem navegação, listas de conversas, formulários e painéis do cliente que precisavam de padrões comuns. Também faltavam orientações de uso documentadas.

1 / 3. Fila de conversas e atendimento. Imagem editada para esconder dados pessoais e mensagens.

Como resolvemos

Tokens, componentes e documentação feitos para crescer.

O design system foi criado desde o começo pensando em crescer. Variáveis, design tokens, componentes e padrões foram organizados como base do produto.

Criei os design tokens com uma nomenclatura personalizada. Aproximei a semântica da marca, a lógica de interface e a implementação. Isso ajuda o time a evoluir o sistema com menos ambiguidade.

Os desenvolvedores criaram um repositório próprio para o design system. Eles mantêm esse material sempre atualizado e sincronizam a documentação com o Storybook. Isso torna o projeto mais fácil de ampliar e pronto para receber novas atualizações.

Design System

Das cores e da tipografia aos componentes.

Cores primitivas como ponto de partida.

A coleção Primitive organiza as cores por paleta. O quadro mostra a escala de neutros com níveis numéricos e valores hexadecimais. A imagem foi tirada da gravação do projeto.

Tokens semânticos ligados à paleta.

A gravação passa pelos grupos de fundo da coleção Theme. Depois, abre Primitive. Níveis semânticos como weakest e strongest fazem referência a variáveis da paleta, como talqui/color/blue/400. O vídeo não tem áudio. Dura 9 segundos.

Estilos tipográficos com propriedades definidas.

Os estilos display, heading, label e body organizam a escala tipográfica. A gravação mostra estilos de display para apresentar variáveis de família e peso, tamanho e entrelinha. O exemplo display large usa 44/52 e semibold. O vídeo não tem áudio. Ele dura 11 segundos.

Montando uma tela com o design system

Demonstração no Figma da criação de uma tela com a biblioteca Talqui. Mostra navegação lateral, cards e gráficos. Usa variantes dos componentes e variáveis de espaçamento. O vídeo não tem áudio. Ele está acelerado quatro vezes e dura cerca de 26 segundos.
Coleções de variáveis no Figma com os grupos Theme, Style, Typography e Extensions organizam os tokens semânticos da plataforma Talqui.
Componente Base Badge está documentado no Figma com uma tabela de propriedades, variantes e exemplos de uso da plataforma Talqui.
Storybook do Talqui DS está em design-system.talqui.dev com variantes do componente Badge. Essas variantes incluem cores, contorno e ícones.
Tela de cadastro da plataforma Talqui. O componente t-base-button está em uso.

Fundações

Identidade de plataforma

A interface deixou de parecer uma adaptação técnica. Agora tem uma linguagem de produto própria para a Talqui.

Design tokens

Variáveis têm nomes que seguem uma lógica própria para facilitar o uso, a manutenção e a ligação com o código.

Componentes escaláveis

Componentes feitos para vários contextos, estados e atualizações, sem precisar criar novos padrões em cada tela.

Repositório de DS

Os desenvolvedores criaram uma base própria para o design system. Eles a mantêm atualizada junto com a plataforma.

Storybook

A documentação técnica está em sincronia com o Storybook. Isso cria uma referência atualizada para o time.

Novas telas

A equipe refez a plataforma com novas telas e fluxos, usando essa base visual e técnica.

Processo

  1. 01

    Refiz a plataforma usando uma versão antiga que era um fork de uma interface criada pelo time de desenvolvimento.

  2. 02

    Criação de uma identidade de plataforma que segue a marca Talqui. Isso conecta o produto, a experiência e a linguagem visual.

  3. 03

    Criação do design system com variáveis, design tokens e componentes feitos para crescer e serem mantidos sempre.

  4. 04

    Definir um nome personalizado para tokens, aproximando o significado do design e da implementação.

Solução

Nova plataforma com linguagem própria. Ela combina mais com a marca e está pronta para mudanças no futuro.

Sistema de design com versão, repositório próprio, manutenção feita pelo time de desenvolvimento e documentação sempre atualizada.

Tokens e componentes organizados para evitar decisões aleatórias. Isso ajuda a criar novas telas mais rápido sem perder a consistência.

Base mais fácil de expandir para updates, novos fluxos, novas funções e evolução do produto de atendimento com IA.

Ver Storybook no ar

Próximo Case

Petrobras DS v2

Biblioteca de componentes, design tokens e documentação

Copyright Eduardo Amaral © 2026