Pular para o conte√ļdo principal

Design Tokens

Intro#

O que é um Design Token?#

De forma resumida, os design tokens são todas as opção de estilização que podemos usar em nossos componentes. Estão sempre espelhados entre design e tecnologia.

Medidas relativas

As ferramentas de design voltadas para interface utilizam pixel como unidade. Mas no desenvolvimento é importante considerar as medidas relativas (rem), pois valores fixos podem prejudicar a acessibilidade.

Global token e brand token#


Spacing#

Espaçamentos usados para estruturar os componentes, assim como criar ritmo vertical e ritmo horizontal nas interfaces.

TokenValor (rem)Valor (pixel)
spacing-xs0.5 rem8px
spacing-sm1 rem16px
spacing-md1.5 rem24px
spacing-lg2 rem32px
spacing-xl2.5 rem40px
spacing-2xl3 rem48px
spacing-3xl3.5 rem56px
spacing-4xl4 rem64px

Border#

Border radius#

Border widht#


Tipography#

Legenda
  • global = token b√°sico, comum √† todos
  • brand = espec√≠fico de cada marca, dispon√≠vel de acordo com a necessidade

Font family#

TokenCamada DSUso
font-family-headingbrandTítulos e chamadas
font-family-textbrandTextos em geral, labels, placeholders, legendas, etc
font-family-codebrandTrechos de código em documentação técnica

Font size#

TokenValor (rem)Valor (pixel)Camada DSDescrição
font-size-xs0.7512pxglobal
font-size-sm0.87514pxglobal
font-size-default116pxglobalBase da escala
font-size-md1.2520pxglobal
font-size-lg1.524pxglobal
font-size-xl232pxglobal
font-size-2xl2.540pxglobal
font-size-3xl348pxglobal
font-size-4xl3.7560pxbrand
font-size-5xl4.7576pxbrand
font-size-6xl696pxbrand

Font-weight#

TokenValorCamada DS
font-weight-thin100brand
font-weight-extra-light200brand
font-weight-light300brand
font-weight-normal400global
font-weight-medium500brand
font-weight-semibold600global
font-weight-bold700global
font-weight-extrabold800brand
font-weight-heavy900brand

Line-height#

TokenValor (%)Referência (em)
line-height-autoauto
line-height-none100%1.0
line-height-3xs 110%1.1
line-height-2xs 120%1.2
line-height-xs 130%1.3
line-height-sm140%1.4
line-height-md150%1.5
line-height-lg160%1.6
line-height-xlg170%1.7
line-height-2xl180%1.8
line-height-3xl190%1.9
line-height-4xl200%2.0

Letterspacing#

TokenValor (em)Camada DS
letter-spacing-autoautoglobal
letter-spacing-10.015global
letter-spacing-20.025global
letter-spacing-30.05global
letter-spacing-40.075global
letter-spacing-50.1global
letter-spacing-neg-1-0.015global
letter-spacing-neg-2-0.025global
letter-spacing-neg-3-0.05global
letter-spacing-neg-4-0.075global
letter-spacing-neg-5-0.1global