06No produto
A marca dentro do app: pouca e no lugar certo.
O logo aparece uma vez por tela, no header ou na sidebar. O resto da marca está na cor do acento, na tipografia e nos componentes.
Header web
Logo principal com 24 px de símbolo, à esquerda, numa barra de 64 px. Entre o logo e a navegação, no mínimo 2 P de espaço.
- Barra
- 64 px
- Logo
- 24 px de símbolo
- Posição
- esquerda, centrado na barra
- Link
- volta para Início
Na sidebar aberta entra o logo; recolhida, só o símbolo. O item ativo usa o rosa com texto night.
Medidas
A sidebar tem 272 px e o logo fica a 20 px do topo, com 28 px de símbolo. Recolhida, vira trilho de 80 px com o símbolo de 28 px.
- Sidebar
- 272 px
- Logo
- 28 px de símbolo
- Recolhida
- 80 px, símbolo 28 px
- Item ativo
- rosa / night
As telas do app real no sistema da Shake: busca por foto, seleção e perfil do creator. Projetos e busca por voz estão em Dispositivos.
2 selecionadosSalvar
No celular, o logo fica na top bar da tela inicial. Nas telas internas, a top bar mostra o título da tela.
Fundo night, símbolo no alto e um campo por vez. No celular o botão principal é rosa; na web, night.
Logo com 32 px de símbolo no topo, título em Nexa, texto em Montserrat e um botão só.
No e-mail
O logo vai como PNG @2x com alt "Shake", porque nem todo cliente de e-mail mostra SVG. Fonte de reserva da Nexa no e-mail: Arial Black; da Montserrat: Arial.
- Largura
- 600 px
- Logo
- PNG @2x, 32 px de símbolo
- Botão
- night, 48 px
- Rodapé
- símbolo de 24 px
Componentes do Material 3 com os papéis de cor da Shake, lado a lado no claro e no escuro.