Cor com função e movimento.
Cada cor traz o papel que cumpre e a razão de contraste medida contra os fundos reais do produto. Abra uma linha para ver a evidência e levar o valor.
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. Use o par legível da cor.
- Só preenchimento e superfície não carregam texto — quem precisa passar é o que se põe em cima delas.
Cores principais
As cinco que carregam reconhecimento, interação e energia.
Viva Cyan#00CFE0Sinal de interação e de posiçãoSó preenchimento
Usada como campo de cor, não como texto. Quem precisa passar em contraste é o que se põe em cima.
Tecnologia, interação, destaques e movimento.
Viva Violet#7657F6Anel de foco e categoriasSó 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.
Viva Coral#FF5436Momentos de marca: heros, manifestos e destaquesTexto no tema escuro: AA
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. Em texto pequeno sobre fundo claro use a variante legível #CC432B: a coral pura fica em 3.19:1 sobre White e em 3.03:1 sobre Cloud — abaixo de AA nos dois.
Em texto pequeno onde ela reprova, use #CC432B.
Viva Orange#F58232Estados de interface e sinalização de produtoTexto no tema escuro: AA
Sobre os fundos do tema escuro
--bg6.76:1AA--surface6.19:1AA--surface-raised5.72:1AA
Laranja funcional: estados de interface e sinalização de produto. Também é a escolha quando o fundo escuro pede mais contraste que o coral.
Pares legíveis
Os tons que substituem coral e violeta quando eles precisam carregar texto pequeno.
Coral Legível#CC432BSubstitui a coral em texto pequeno sobre fundo claroTexto no tema claro: AA
Sobre os fundos do tema claro
--bg4.77:1AA--surface4.52:1AA
A coral fechada até passar em AA sobre Cloud. No tema escuro o token devolve a coral pura, porque ali a relação se inverte.
Violeta Legível#6847E8Substitui o violeta quando ele carrega textoTexto no tema claro: AA
Sobre os fundos do tema claro
--bg5.75:1AA--surface5.45:1AA
O violeta fechado para carregar texto sobre fundo claro sem cair abaixo de AA.
Paleta estendida
Apoio para gráficos, categorias e infográficos.
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#7657F6#7657F670 / 20 / 10
Uma regra de equilíbrio, não uma fórmula rígida.
- 70% Neutro
- 20% Navy
- 10% Destaque