Design Tokens

visão geral

Design tokens são variáveis agnósticas à tecnologia que nos ajudam a escalar o design.

O que são design tokens

Um dos desafios do Design System Olist é dar suporte ao crescimento do ecossistema Olist, contemplando a expansão de produtos, equipes e serviços. Por isso, precisamos construir ferramentas que sejam escaláveis e suportem várias tecnologias, como tokens de design.

Design tokens representam decisões de design. Eles são atributos nomeados, que podem ser usados no lugar de valores codificados para garantir a flexibilidade e consistência do sistema. Com os design tokens, começamos a tomar decisões de interface com base na semântica desses atributos, em vez de apenas a aparência. Na prática, isso significa que o design de cada componente será definido por sua semântica, permitindo que caso haja a alteração na marca ou nas decisões de design, a mudança de tokens irá refletir em cada componente que compartilha desse significado.

Exemplos de design tokens são valores de espaçamento, tamanhos de texto, cores, sombras, entre muitos outros.

Estrutura e hierarquia

Os design tokens Olist foram projetados para atender a um sistema de negócios complexo, contemplando mudanças, flexibilidade e segurança. Para isso, criamos uma estrutura hierárquica na qual temos mais de um nível de design tokens. Esta divisão de tokens permite trabalhar camadas de temas, internacionalização e componentes locais, sem sacrificar a robustez do sistema.

Portanto, os tokens são divididos em 3 níveis: base tokens, theme tokens e component tokens.

Quanto mais próximo do componente, mais relacionado à sua função na tela será o nome do token e, quanto mais distante, mais literal sobre o atributo que ele representa.

Exemplo do mesmo valor de cor representado em diferentes níveis de tokens.
Base token: cor azul 600. Theme token: cor base primária. Component token:
cor do contorno de foco.

estrutura e hierarquia

Base tokens

Base tokens são o primeiro nível de tokens que temos no Design System. Eles formam o leque de opções que serão utilizadas para compor todos os temas, como variações de cores, tamanhos e espaçamentos e até movimentos. Nem todos os tokens básicos serão usados em todos os temas.

Três base tokens de cores diferentes: cor azul 600, cor azul 700, cor azul
800.

base tokens

Theme tokens

Theme tokens possuem uma nomenclatura semântica relacionada ao contexto em que são definidas. O mesmo token de tema pode ter mais de um base tokens associado, dependendo do tema em que se encontra, conforme mostrado na imagem a seguir.

Exemplo de theme tokens, color primary base, usando dois base tokens
diferentes, um em cada tema.

theme tokens

Component tokens

A categoria de tokens cuja semântica está altamente ligada à necessidade dos componentes. Nesta categoria, eles são representados, por exemplo, pelas cores de fundo de um botão ou até mesmo pelo tamanho da fonte de um componente de card.

Os valores de cada um dos component tokens serão os tokens definidos na categoria de theme tokens e nunca diretamente para os base tokens.

Dois exemplos de component tokens usados para diferentes estados do mesmo
componente.

component tokens

Nomenclatura

A nomenclatura dos design tokens é inspirada no B.E.M. (bloco, elemento, modificador) para base tokens e theme tokens. Para os component tokens, a seguinte ordem é usada: bloco, elemento, item, subitem, modificador e estado. Nem todo component tokens precisa ser composto de todos esses elementos, apenas aqueles que fazem sentido para esse contexto.

Número 1: color blue 600; Número 2: color primary base; Número 3: color
background dropdown button primary focus.
  1. Base tokens: bloco, elemento, modificador; 2.** Theme tokens:** bloco, elemento, modificador
  2. Component tokens: bloco, elemento, item, sub-item, modificador, estado.