04Cor
Sete cores fazem a marca.
Dois campos, o escuro e o claro, com o rosa de destaque. O laranja aparece menos, nas peças de energia. Azul, amarelo e verde completam as cores da Shake. As outras cores entram só em par, no ornamento.
As sete cores da Shake. Clique numa cor para copiar o hex.
Fora da paleta
O verde #04FF93 voltou como cor principal por decisão do Caio (18/10/2026). Fica fora: Azul profundo #070B16 (vetado (landing antiga, Shake Forward)).
Referência para uma tela ou uma sequência de peças: o escuro e o claro dominam, o acento pontua.
- Night38%
- Off-white32%
- Rosa14%
- Laranja6%
- Azul4%
- Amarelo3%
- Verde3%
Uso
Rosa é o acento padrão: CTA no escuro, chip selecionado, indicador ativo e a alça do logo. Laranja aparece em peças de energia e nunca disputa com o rosa na mesma tela.
Azul, amarelo e verde entram como cor da marca em ilustração, ornamento, capas e dados. As cores de apoio aparecem só em par, no ornamento.
- Night
- 38%
- Off-white
- 32%
- Rosa
- 14%
- Laranja, azul, amarelo e verde
- 16%
Razão WCAG medida. Texto pede 4,5:1; elemento gráfico pede 3:1.
#121212 sobre #FBFAF7
#FBFAF7 sobre #121212
#121212 sobre #FF91F8
#121212 sobre #FF7007
#FF91F8 sobre #121212
#121212 sobre #FED308
#121212 sobre #04FF93
#04FF93 sobre #121212
#121212 sobre #0185FF
#FBFAF7 sobre #0185FF
#FBFAF7 sobre #FF91F8
#FBFAF7 sobre #FF7007
Regra
Sobre rosa e sobre laranja, texto, logo e ícones ficam em night, em qualquer tamanho. Off-white sobre os acentos não passa.
- Night × off-white
- 17,95:1
- Night × rosa
- 9,51:1
- Night × laranja
- 6,76:1
- Night × amarelo
- 12,97:1
- Night × verde
- 14,03:1
- Night × azul
- 5,17:1
- Off-white × rosa
- 1,89:1 · não
Quatro tons para o escuro e quatro para o claro de cada uma das sete cores. A borda marca a cor da marca.
Uso
As rampas servem a estados e fundos do produto. Na peça, a cor entra cheia.
Magenta digital, creme, azul-claro, ameixa, vinho e oliva não aparecem soltas: entram como fundo e forma do ornamento, cada uma com o seu par.
Regras
A forma ocupa 58% do lado e fica centrada, sempre na mesma posição, sem girar. Use só os pares desta grade.
O ornamento preenche espaço sem conteúdo: avatar vazio, empty state, capa de categoria e ícone de recurso. Nunca fica atrás do logo nem atrás de texto.
- Forma
- cookie de 7 lados e formas do banco (M3)
- Ocupação
- 58% do lado
- Contraste das pontas
- mínimo 3:1
- Tamanhos no padrão
- 392 · 192 · 125 · 92 px
Os papéis do Material 3 com o acento rosa: primary-container é o rosa e o texto sobre ele é night.
Estados
Hover e pressionado usam camadas de estado de 8% e 12% sobre a cor do botão. O foco é um anel de 3 px na cor do texto. O desabilitado usa 12% de fundo e 38% de texto.
- Botão principal
- night / off-white
- Destaque
- rosa / night
- Indicador da aba
- night no claro, rosa no escuro
- Ação da snackbar
- rosa no claro