Design Tokens

Tokens são uma forma de armazenar valores de estilo, para que os mesmo valores sejam utilizados de forma consistente em arquivos e plataformas diferentes.

Overview

O que é um Design Token?

Os Design Tokens representam as pequenas e repetidas decisões de design que compõem o estilo visual do Design System. Os tokens substituem valores estáticos, como hexadecimais para cores, por nomes auto explicativos.

Um token consiste em 2 partes:

  1. Um nome semelhante a um código, como kosmos-ref-color-academyPrimary500

  2. Um valor associado, como #8422E5

O valor associado ao token pode ser muitas coisas: uma cor, especificações de uma tipografia, uma medida ou até mesmo outro token.

Not found
Not found

Exemplo de um token de referência e seu valor de cor associado

  • O uso de design tokens em vez de valores codificados pode simplificar o trabalho de criação, manutenção e dimensionamento de produtos com um Design System.

  • O sistema de tokens é um formato agnóstico, que independe de plataforma, mas pode ser utilizado em cenários específicos de cada linguagem;

  • Os tokens ajudam a manter o alinhamento e a consistência em um Design System.

Os Design Tokens conectam as escolhas de estilo, entre times, que antes não teriam uma relação clara. Por exemplo, se o designer e o desenvolvedor usarem o mesmo token, como o kosmos-ref-color-neutral500, a mesma cor será usada em ambos os locais, mantendo a consistência. E caso esse estilo seja atualizado, as atualizações de estilo serão propagadas de forma consistente por todo um produto ou conjunto de produtos.

Not found

Porque usamos tokens?

Os tokens são úteis e eficientes nas seguintes situações:

  • se planejarmos atualizar o design do produto ou criar um novo produto;

  • se o Design System é aplicado em mais de um produto ou plataforma;

  • se é desejado manter ou atualizar estilos facilmente no futuro.

Como ler tokens

Criando nomes de tokens

As partes de um nome de token são separadas por categorias e avançam das informações mais gerais (nome do Design System) para as mais específicas (Categoria + Escala da Foundation).

Obs.: O caractere que separa as informações de categoria dentro do token são definidas por cada time de desenvolvimento, mas sempre mantendo a estrutura original.

Not found
Informação
Explicação
Exemplo

1. Design System

Todos os nomes de Design Token começam com o nome do Design System

kosmos

2. Tipo do Token

Uma abreviação para o tipo de token: ref é para Reference Tokens*

ref

3. Tipo da Foundation

Comunica o atributo de design e a finalidade do token.

color, fonts, shadow, border, radius, spacing, asset, icon, illustration, spot, grid, motion

4. Categoria da Foundation

Comunica a categoria do atributo de design.

letrasPrimary, academyPrimary…

5. Escala da Fundation

Comunica a escala do atributo de design.

100, 200, 300…

2dp, 4dp, 6dp…

Small, Medium, Large…

  • Atualmente, o Kósmos usa Reference Tokens; Haverão outros tipos no futuro;

Exemplos

  • Frontend exemple

    color{
"kosmos-ref-color-academyPrimary600" : "#6624B2"
"kosmos-ref-color-academyPrimary500highlight" : "#8422E5"
"kosmos-ref-color-academyPrimary500" : "#8422E5"
}

typography{
"kosmos-ref-typeface-bodyRegular1" : ""
"kosmos-ref-typeface-bodyRegular2" : ""
"kosmos-ref-typeface-bodyRegular3" : ""
}

shadow{
"kosmos-ref-shadow-neutralDefault1dp" : ""
"kosmos-ref-shadow-neutralDefault2dp" : ""
"kosmos-ref-shadow-neutralDefault3dp" : ""
}

  • Android exemple

    color{
"kosmos.ref.color.academyPrimary600" : "#6624B2"
"kosmos.ref.color.academyPrimary500highlight" : "#8422E5"
"kosmos.ref.color.academyPrimary500" : "#8422E5"
}

typography{
"kosmos.ref.typeface.bodyRegular1" : ""
"kosmos.ref.typeface.bodyRegular2" : ""
"kosmos.ref.typeface.bodyRegular3" : ""
}

shadow{
"kosmos.ref.shadow.neutralDefault1dp" : ""
"kosmos.ref.shadow.neutralDefault2dp" : ""
"kosmos.ref.shadow.neutralDefault3dp" : ""
}

  • iOS exemple

    color{
"kosmos_ref_color_academyPrimary600" : "#6624B2"
"kosmos_ref_color_academyPrimary500highlight" : "#8422E5"
"kosmos_ref_color_academyPrimary500" : "#8422E5"
}

typography{
"kosmos_ref_typeface_bodyRegular1" : ""
"kosmos_ref_typeface_bodyRegular2" : ""
"kosmos_ref_typeface_bodyRegular3" : ""
}

shadow{
"kosmos_ref_shadow_neutralDefault1dp" : ""
"kosmos_ref_shadow_neutralDefault2dp" : ""
"kosmos_ref_shadow_neutralDefault3dp" : ""
}

Types of tokens

Reference Tokens

Todos os Reference Tokens começam com kosmos-ref-

Esses tokens abrangem todas as opções de estilo disponíveis no Kósmos.

Eles geralmente apontam para um valor estático, como um código hexadecimal para cor ou fonte e peso para tipo. Os usos comuns incluem:

  • Valores hexadecimais de Cores

  • Especificações completas de Tipografias e Shadows

  • Numero em px de Border Radius

Not found

Contextos: Diferentes valores padrão

Os tokens podem apontar para valores diferentes, dependendo de um conjunto de condições. Essas condições são chamadas de ”contextos” e os valores de substituição são chamados de ”valores contextuais”.

Você pode pensar em um contexto como uma espécie de tema. Se o contexto for marcado com dark mode, o token de cor terá o valor substituído pelo contexto de dark mode.

Not found

Tabelas de Tokens

Styles

Nas diretrizes do Kósmos, você encontrará tabelas que listam reference tokens para cada elemento de Foundation.

As tabelas de reference tokens podem ser usadas para pesquisar os valores padrões para cor, tipografia, shadows, radius e muito mais.

Exemplo de uma tabela de tokens em um artigo de estilo

Especificações do componente

Você também encontrará Design Tokens na seção Especificações das diretrizes de componentes.

Estas tabelas são separadas pelo estado do componente e mostram um diagrama com dados de acompanhamento para:

  • Elemento: Parte de um componente ao qual um determinado token ou valor se aplica, como o contêiner ou o texto do rótulo de um botão.

  • Atributo de design: Aspecto de estilo ao qual o token ou valor se aplica, como cor ou fonte.

  • Token ou Valor: Informações que definem um atributo de design, armazenado em um token ou codificado.

Not found

Usando tabelas de token

Exemplo: Para pesquisar o atributo de cor de um “Text label” localizado dentro de um componente, primeiro navegue até a guia de especificações da página de diretrizes do componente.

Em seguida, localize a tabela que mostra os atributos de design do componente e procure o Text label listado em elementos.

O token para o atributo de cor do “Text label” na coluna do token é aquele que você está procurando.

Diagrama e tabela de tokens para a cor do botão preenchido

Histórico de Atualizações

Figma
Gitbook
Android
iOS
Web

N/A

23/02/2024

N/A

N/A

N/A

Percebeu um erro, ficou com dúvida ou tem uma sugestão?

Contribua com o Kósmos preenchendo nosso formulário de contribuição — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo para todo o time.

AnteriorVisão geral das fundaçõesPróximoGrid

Atualizado