Foundations

Design Tokens

Tokens são a fonte única de verdade do Design System. Nenhum valor visual deve ser escrito diretamente em um componente.

Color

Tokens semânticos de cor.

Token	Valor
	Blue 400
	Blue 600
	Blue 800
	Neutral Dark 0 / Neutral Blue 900
	Neutral Dark 0 / Blue 900
	Neutral Blue 100
	Neutral Blue 700
	Neutral Blue 500
	Neutral Dark 300
	Neutral Blue 0 / Blue 900
	Blue 400

Typography

Estilos tipográficos completos.

Token	Valor
	48px / 56px · 700 · -0.02em
	36px / 44px · 700 · -0.02em
	28px / 36px · 600 · -0.01em
	22px / 30px · 600 · -0.01em
	18px / 26px · 600 · 0
	16px / 24px · 500 · 0
	17px / 28px · 400 · 0
	15px / 24px · 400 · 0
	13px / 20px · 400 · 0
	13px / 18px · 600 · 0.01em
	12px / 16px · 400 · 0.02em

Spacing

Escala base 4px.

Token	Valor
	4px
	8px
	12px
	16px
	20px
	24px
	32px
	40px
	48px
	64px

Radius

Raios de borda.

Token	Valor
	0px
	4px
	6px
	8px
	12px
	16px
	9999px

Shadow

Elevação.

Token	Valor
	0 1px 2px rgba(3,9,22,.06)
	0 1px 3px rgba(3,9,22,.08)
	0 4px 12px rgba(3,9,22,.08)
	0 12px 32px rgba(3,9,22,.12)

Border

Estilos de borda.

Token	Valor
	1px solid var(--color-border)
	1px solid var(--color-border-strong)
	2px solid var(--color-focus)
	1px solid var(--color-error)

Size

Dimensões de controles e layout.

Token	Valor
	32px
	40px
	48px
	16px
	20px
	24px
	280px
	880px

Z-Index

Camadas de empilhamento.

Token	Valor
	0
	20
	40
	50
	60
	70
	80

Convenção de nomes

Como nomear um novo token.

Padrão	Exemplo	Uso
--color-{papel}	--color-text-secondary
--spacing-{n}	--spacing-4
--radius-{tamanho}	--radius-lg
--size-{grupo}-{tamanho}	--size-control-md
--z-{camada}	--z-modal