Color Tokens

Prefira sempre tokens semânticos. Recorra a primitivos apenas quando não existir um semântico equivalente.

Tokens Semânticos

Preferência

Background

#F6F7F9

bg/canvas

Fundo externo da página

#FFFFFF

bg/surface

Cards, modais, superfícies

#ECEEF2

bg/subtle

Fundos alternativos, linhas

#90359A

bg/brand

Botões primários, destaques

Text

#333847

text/default

Texto principal

#515C78

text/subtle

Texto secundário, labels

#667491

text/muted

Texto auxiliar

#8591AB

text/disabled

Texto desabilitado

#FFFFFF

text/on-brand

Texto sobre fundo brand

Border

#D5D9E2

border/default

Bordas padrão

#B0B8C9

border/strong

Bordas com mais destaque

#90359A

border/focus

Anel de foco em inputs

Feedback

#DAFEEC

feedback/success/bg

Fundo de mensagem de sucesso

#0E8750

feedback/success/text

Texto de sucesso

#0E8750

feedback/success/border

Borda de sucesso

#FFFAC2

feedback/warning/bg

Fundo de aviso

#733F10

feedback/warning/text

Texto de aviso

#CD8C01

feedback/warning/border

Borda de aviso

#FFF1F1

feedback/error/bg

Fundo de erro

#881416

feedback/error/text

Texto de erro

#C80D11

feedback/error/border

Borda de erro

Icon

#333847

icon/default

Ícones padrão

#515C78

icon/subtle

Ícones secundários

#8591AB

icon/disabled

Ícones desabilitados

#FFFFFF

icon/on-brand

Ícones sobre fundo brand

Escalas Primitivas

Base

Passe o mouse sobre os steps para ver o nome do token. Use tokens semânticos como camada intermediária.

violet-primary

50
100
200
300
400
500
600
700
800
900
950

gray

50
100
200
300
400
500
600
700
800
900
950

green

50
100
200
300
400
500
600
700
800
900
950

red

50
100
200
300
400
500
600
700
800
900
950

yellow

50
100
200
300
400
500
600
700
800
900
950

purple-deep

50
100
200
300
400
500
600
700
800
900
950

purple-soft

50
100
200
300
400
500
600
700
800
900
950

pink-accent

50
100
200
300
400
500
600
700
800
900
950

cream-highlight

50
100
200
300
400
500
600
700
800
900
950

white / black

white
black