Design System

Um produto datado, sem documentação e design system como base

EC Affiliates é um nome fictício, por confidencialidade. A interface estava datada, e não havia nenhum design system dando consistência a ela.

Cada tela era montada na mão, então o mesmo botão, a mesma linha de tabela e o mesmo campo existiam em versões um pouco diferentes. Os devs precisavam interpretar tela por tela, e cada inconsistência virava uma dúvida, e muitas vezes retrabalho. O objetivo era primeiro criar uma linguagem de design consistente, e construir uma nova interface em cima dela.

Neutro, acessível e fácil de manter

Neutro de propósito

A empresa queria ter a opção de vender o produto como white label no futuro, então o sistema não podia depender da personalidade de uma marca. Ele precisava ser limpo, direto e discreto o suficiente para receber outra marca.

Sem uma marca para me apoiar, a clareza veio da estrutura: espaçamentos consistentes, contraste que funciona em qualquer paleta e componentes que se comportam do mesmo jeito, sejam quais forem as cores.

Acessibilidade desde a base

Fui checando a interface utilizando o padrão WCAG enquanto projetava, em vez de auditar tudo no final.

Cada família de cor é uma escala tonal completa, então o contraste é resolvido uma vez só, na combinação dos tons. Num dashboard em que as pessoas leem números o tempo todo, legibilidade é o que separa um produto que funciona de um que não funciona.

Feito para durar

Organizei o arquivo para ser usado e evoluído, não só admirado.

Os tokens têm nomes em escala (de shadow-md a shadow-3xl, tons de cor numerados), então sobrevivem a um rebrand, e, com as cores em variáveis, aplicar um tema novo é possível com uma única alteração.

Fundações, dois temas, componentes e as telas feitas com eles

Fundações

Criei cores, tipografia, ícones, espaçamentos, sombras, grids e radius, cada um em uma página própria do arquivo.

Tipografia

Outfit em onze tamanhos e quatro pesos, do Display 2xl (72px) ao Text xs (12px), cada um com sua altura de linha.

Espaço, forma e profundidade

Uma base de 4px para todos os espaçamentos, border radius do None ao Full e duas sombras suaves com um anel de foco para dar profundidade.

Cores

Uma cor de marca sobre uma base de neutros frios, e quatro cores de status, cada uma com um tom de fundo correspondente.

Cores de status

A mesma paleta de status aparece nos modais, nas datas e nos badges de tendência das métricas.

1. 01 Tipografia
2. 02 Espaço, forma e profundidade
3. 03 Cores
4. 04 Cores de status

01 / 04

Um conjunto de variáveis, dois temas

Transformei todas as cores em variáveis, então o tema claro e o escuro são dois modos do mesmo conjunto.

A tela é desenhada uma vez, e as variáveis decidem em qual tema ela aparece. Cada variável tem o nome da sua função, e não da cor (Title Color, Border Secondary, Background Modal), e fica agrupada por onde é usada, então uma alteração chega a todos os lugares onde aquela família aparece.

Claro Escuro

Componentes

Desenhei os componentes pensando também nos casos futuros do produto, e não só nas telas que já existiam.

Tudo era 100% responsivo, e especifiquei interações como drag and drop no próprio componente, em vez de deixar para os devs interpretarem.

Estados

Checkboxes e radio buttons nos estados padrão, hover, foco e desabilitado, nos dois tamanhos. O foco faz parte do componente, não fica para depois.

Botões

Preenchidos e com contorno, em três tamanhos, com ou sem ícone, e em todos os estados.

Badges

Um badge para cada família de cor, em três tamanhos. Quem faz o trabalho é a escala de cor, então o badge em si nunca muda.

Alertas

Sucesso, alerta, erro e dica. Além da cor, um ícone e uma palavra indicam o estado, então a mensagem é entendida mesmo por quem não diferencia verde de vermelho.

1. 01 Estados
2. 02 Botões
3. 03 Badges
4. 04 Alertas

01 / 04

O sistema na prática

Montei as telas do produto com a biblioteca, em vez de criá-las independentemente.

Cards de indicadores, toggles, selects, tags, botões de aprovar e recusar: tudo é componente da biblioteca. Os indicadores verdes de variação são o badge de sucesso, então batem com todos os outros badges do produto.

Foi para produção, e influenciou a próxima etapa do produto para o qual foi criado

O sistema foi aprovado, implementado e ficou no ar por vários meses. Quando a empresa pivotou, várias das ideias foram direto para o design system do novo produto. Os devs disseram que a biblioteca foi o que mais ajudou: criar uma tela nova virou montar peças, e não reinventar a roda. O cliente disse que a interface ficou tão limpa que nada disputava atenção com os dados, e que a diferença foi da água para o vinho.