Camada de tokens

Paleta

Marca

• --cor-brand-deep
• --cor-brand-action
• --cor-brand-progress
• --cor-brand-soft
• --cor-brand-wash
• --cor-rail
• --cor-rail-active

Neutros

• --cor-ink-primary
• --cor-ink-secondary
• --cor-ink-muted
• --cor-ground
• --cor-surface
• --cor-surface-subtle
• --cor-surface-muted
• --cor-line
• --cor-line-strong

Semânticos

• --cor-success
• --cor-success-bg
• --cor-warning
• --cor-warning-bg
• --cor-error
• --cor-error-bg
• --cor-info
• --cor-info-bg
• --cor-focus

Escala tipográfica

• Display — evidência inspecionávelmanifesto do login
• Headline — evidência inspecionáveltítulo de página e KPI
• Title — evidência inspecionávelseção e cabeçalho de painel
• Body — evidência inspecionávelconteúdo operacional
• Label — evidência inspecionávelcontroles e rótulos
• 1.284.937 · 33.000.167/0001-01 · 87,4%numerais tabulares

Foco e controles

Um anel só em todo o produto: azul de 2 px com offset de 2 px. Percorra com Tab.

Estados do Job

• ▸ Em andamento

  45%
• ✓ Concluído

  100%
• × Falhou

  62%
• ⦸ Cancelado

  38%