Cor com função e movimento.
Escolha a cor pelo uso. Abra uma linha para copiar o valor e conferir em quais fundos ela funciona.
Como ler os vereditos
- AA / AAA passa em texto de corpo. AA é 4.5:1; AAA é 7:1.
- Só texto grande passa a partir de 3:1, o que exige 24px, ou 18.66px em peso 700.
- Reprova fica abaixo de 3:1. Escolha outra cor para o texto.
- Só preenchimento e superfície não carregam texto — quem precisa passar é o que se põe em cima delas.
Cores principais
Navy para estrutura; coral para ação, foco e energia.
Viva Coral#FF5436Momentos de marca: heros, manifestos e destaquesTexto nos dois temas: só texto grande
Sobre os fundos do tema claro
--bg3.19:1só texto grande--surface3.03:1só texto grande
Sobre os fundos do tema escuro
--bg5.47:1AA--surface5.01:1AA--surface-raised4.63:1AA
Energia, movimento e descoberta. Carrega os momentos de marca: heros, manifestos e destaques editoriais. Sobre White e Cloud, passa apenas para texto grande: 3.19:1 e 3.03:1, respectivamente.
Paleta estendida
Apoio para gráficos, categorias e infográficos.
Viva Cyan#00CFE0Apoio editorial para tecnologia e movimentoSó preenchimento
Usada como campo de cor, não como texto. Quem precisa passar em contraste é o que se põe em cima.
Composições editoriais ligadas a tecnologia e movimento. Não funciona como segundo acento da interface.
Viva Violet#7657F6Categorias e composições editoriaisSó preenchimento
Usada como campo de cor, não como texto. Quem precisa passar em contraste é o que se põe em cima.
Digital, comunidade e categorias. Em texto pequeno sobre Cloud use a variante legível #6847E8: o violeta puro fica em 4.46:1 ali, logo abaixo de AA.
Em texto pequeno onde ela reprova, use #6847E8.
Deep Purple#210840Gráficos e infográficos sobre fundo claroTexto no tema claro: AAA
Sobre os fundos do tema claro
--bg17.90:1AAA--surface16.97:1AAA
Gráficos, backgrounds e infográficos.
Cornflower Blue#6E95F7Categorias e apoio sobre fundo escuroTexto no tema escuro: AA
Sobre os fundos do tema escuro
--bg6.08:1AA--surface5.57:1AA--surface-raised5.14:1AA
Categorias e elementos complementares.
Paleta neutra
Superfícies, divisores e os textos que mantêm a marca legível.
Slate 700#344054Texto secundário no tema claroTexto no tema claro: AAA
Sobre os fundos do tema claro
--bg10.46:1AAA--surface9.92:1AAA
Texto secundário de alto contraste.
Slate 500#667085Metadados e texto de apoio no tema claroTexto no tema claro: AA
Sobre os fundos do tema claro
--bg4.97:1AA--surface4.72:1AA
Metadados e elementos auxiliares.
Slate 300#D0D5DDBordas e divisoresSó preenchimento
Usada como campo de cor, não como texto. Quem precisa passar em contraste é o que se põe em cima.
Bordas e divisores.
Slate 100#F2F4F7Superfícies secundáriasSuperfície
É um fundo do produto. A pergunta de contraste vale para o que se põe em cima dela, não para ela.
Superfícies secundárias.
Cloud#F7F9FCSuperfície padrão do tema claroSuperfície
É um fundo do produto. A pergunta de contraste vale para o que se põe em cima dela, não para ela.
Background principal alternativo.
White#FFFFFFFundo da página no tema claroSuperfície
É um fundo do produto. A pergunta de contraste vale para o que se põe em cima dela, não para ela.
Base e respiro visual.
Camada semântica
Os nomes que os componentes consomem. Um componente lê o token do papel, nunca a cor da marca — é o que permite o tema escuro existir sem duplicar uma folha de estilo.
--bgFundo da página#FFFFFF#071A31--surfaceSuperfície de card e sidebar#F7F9FC#0C223D--surface-raisedSuperfície que subiu do plano#FFFFFF#102943--sidebarFundo da navegação lateral#F7F9FC#04152B--inkTexto principal#00152F#F8FBFF--ink-softTexto secundário#344054#D8E2EF--mutedMetadados e texto de apoio#667085#AAB9C9--borderDivisor padrão#DCE2EA#29415C--border-softDivisor de baixa ênfase#E9EDF3#203953--focusAnel de foco#FF5436#FF5436