Logo · Cor · Forma · Tipografia · Componentes · Iconografia · Como usar
role para ver
01
A logo
Anatomia da marca.
O wordmark "SUPREMA" pesado com "PIZZA" fino e espaçado, coroado pelos rolinhos de massa cruzados entre duas linhas. Vermelha sobre claro; branca sobre escuro ou foto.
1
Rolinhos cruzados (✕)Selo no topo — dois rolinhos de massa em X, a assinatura da marca.
2
Linhas decorativasFiletes horizontais acima e abaixo do nome, emoldurando o conjunto.
3
"SUPREMA"Wordmark pesado em Saira Condensed 800, caixa-alta.
4
"PIZZA"Peso fino (300) com letter-spacing alto — o contraste é a assinatura.
Versão vermelha · sobre fundo claro
Versão branca · sobre escuro ou foto
Usos incorretos
Não trocar a cor da marca
Não distorcer proporções
Não usar branca sobre bege (sem contraste)
02
Paleta
Preto, vermelho e branco.
Base preta, marca vermelha, texto branco. Bege e cinzas são apoio. Clique em qualquer cor para copiar o HEX.
Primárias
Preto Supremacopiar
#0F0F0F
Fundo principal
Vermelho Supremacopiar
#D62828
Marca · CTA · destaque
Brancocopiar
#FFFFFF
Texto sobre preto
Apoio
Bege Massacopiar
#FFEBDC
Halo de legenda (peças)
Vermelho Escurocopiar
#B71C1C
Hover · profundidade
Cinzacopiar
#9A9A9A
Texto secundário
Grafitecopiar
#161616
Cards · superfície alt
Pares aprovados
Branco sobre VermelhoLogo · selo · CTA
Vermelho sobre PretoTítulos · destaque
Preto sobre BegeLegenda · halo
Branco sobre GrafiteCorpo de texto
Regra do halo. A caixinha bege atrás do texto é um halo dilatado (ImageMagick -morphology Dilate Disk:26, cor #FFEBDC) — nunca um retângulo sólido.
03
As 3 versões
Três logos, um sistema.
A marca tem três versões oficiais. Escolha pela cor do fundo e pelo espaço disponível.
1 · VermelhaFundo claro · principal
2 · BrancaFundo escuro / foto
3 · SímboloEspaço reduzido · avatar
Sobre fundos
✓
✓
✓
✓
04
Tamanhos por contexto
Cada tamanho, uma versão.
Quanto menor o espaço, mais simples a versão. Abaixo dos mínimos, troque a assinatura completa pelo símbolo.
Favicon
16–32px
Símbolo
App / Avatar
≥ 88px
Símbolo
Header mobile
28–34px alt.
Assinatura
Header desktop
40–56px alt.
Assinatura
Impressão
≥ 30mm larg.
Assinatura
05
A marca nos dispositivos
Mobile, tablet e desktop.
A assinatura branca no header com a linha vermelha embaixo; o símbolo no ícone de app, favicon e avatar.
Mobile · iOS · logo 18–22px
Tablet · logo 24–32px
Desktop · logo 40–56px
Ícone, favicon & avatar
Ícone de app
Favicon
Avatar social
06
Grid & layout
Breakpoints responsivos.
Três breakpoints e margens proporcionais. O conteúdo respira nas laterais; a área segura nunca encosta na borda.
Mobile
≤ 640px · 4 col · margem 16px
1 coluna de conteúdo. Logo 18–22px. CTAs em largura cheia.
Tablet
641–1024px · 8 col · margem 32px
2 colunas. Logo 24–32px. Grids de cards 2×.
Desktop
≥ 1025px · 12 col · margem 6vw
3–4 colunas. Logo 40–56px. Seções a 6vw.
07
Forma & profundidade
Espaço, cantos e sombra.
Espaçamento · 4px
s1 · 4
s2 · 8
s4 · 16
s5 · 24
s6 · 32
s7 · 48
Cantos
Pequeno6px · chips, inputs
Médio10px · botões
Grande16px · cards
Pill999px · badges, CTA
Sombra & glow
Sutil0 1px 2px /.5
Card0 8px 24px /.5
Modal0 18px 48px /.6
Glowfoco vermelho
08
Linha tipográfica
Saira Condensed + Poppins.
Dois papéis: Saira Condensed para o nome e os títulos pesados (como na logo); Poppins para legendas, corpo e interface.
Display / títulosSaira Condensed
Pizza no ponto
Reservada para impacto — títulos, chamadas e o wordmark. Caixa-alta, pesos 800/900. Conecta direto com o logotipo.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj 1 2 3 4 5 6 7 8 9 0 ! @ # % & ?
Light 300Medium 500SemiBold 700Bold 800Black 900
Corpo / interfacePoppins
Massa fresca, queijo no ponto
A base funcional — textos corridos, legendas e UI. Conforto de leitura em qualquer tamanho. Nas peças: linha 1 Regular, linha 2 Bold.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj 1 2 3 4 5 6 7 8 9 0 ! @ # % & ?
