Design
System
Os fundamentos da marca
role para ver os fundamentos
Pizzaria e delivery em Blumenau/SC. Sabores salgados e doces, da Baby à Gigante, com identidade leve e apetitosa — a pizza que vira lembrança boa.
Suprema Pizza
Pizzaria / Delivery
Blumenau, SC
Rua General Osório, 3012 - Velha
@asupremapizza
pedir.delivery/app/asupremapizza
a confirmar
a confirmar no questionário
A identidade é clara: bege quente de massa, vermelho de marca e a foto do produto sempre em primeiro plano. O tom é leve e brincalhão — apela pro desejo, nunca pro preço.
| Atributo | Expressão |
|---|---|
| Atitude | Leve, brincalhona, sem pressão de venda |
| Calor | Acolhedora, familiar, do bairro |
| Estética | Apetitosa — foto de produto, bege + vermelho |
| Sensação | Queijo escorrendo, massa fresca, vontade de repetir |
| Tom | Conversacional, provoca o apetite |
Pizza por tamanho — da Baby à Gigante — com sabores salgados, doces e premium. O sabor institucional é "A Suprema", que dá nome à casa.
| Tamanho | Detalhe | A partir de |
|---|---|---|
| Baby | 20cm · 4 fatias · 1 sabor | R$ 38 |
| Média | 30cm · 8 fatias · até 2 sabores | R$ 69 |
| Grande | 35cm · 12 fatias · até 3 sabores | R$ 91 |
| Gigante | 45cm · 16 fatias · até 4 sabores | R$ 109 |
| Salgados | Doces |
|---|---|
| Camarão com Borda de Cheddar | Nutella com Morangos Frescos |
| Alho com Cebola Caramelizada | — |
| Milho, Bacon e Catupiry | — |
| Geleia de Pimenta com Queijo Brie | — |
| A Suprema (institucional) | — |
Feita do jeito que a gente faz há anos
Queijo que escorre — o sinal da pizza pronta
Camarão & cheddar, brie com geleia de pimenta
Sobremesa que vira tradição
Conversacional e brincalhona, como um amigo que entende de pizza. Apela pro desejo, nunca pro preço. Duas linhas curtas: gancho com "..." e a revelação fechando em ponto.
Base preta, marca vermelha, texto branco. Bege e cinzas são apoio. Clique em qualquer cor para copiar o HEX.
Regra do halo. A caixinha bege atrás do texto é um halo dilatado (ImageMagick -morphology Dilate Disk:26, cor #FFEBDC), nunca retângulo sólido.
As combinações que entregam a personalidade da Suprema. Tudo fora daqui quebra a marca.
A Suprema usa Poppins (Google Fonts) em tudo. A hierarquia vem do peso, não de famílias diferentes. Sem mistura de fontes.
Linha 1 (gancho) em Poppins Regular 56pt terminando em "...". Linha 2 (revelação) em Poppins Bold 60pt fechando em ponto. Texto preto sobre halo bege.
Poppins ExtraBold em caps, vermelho #D62828 sobre bege ou branco sobre foto.
Peso resolve tudo: 800 título · 700 destaque · 400 corpo. Nunca trazer outra família de fonte.
Misturar fontes · itálico decorativo · texto longo em caps · vermelho sobre branco com pouco contraste.
Escala 8pt em todo o sistema. Cantos arredondados, nunca pílula (exceto status). Duas auras de luz: dourado e brasa.
Passe o mouse para ver os estados. CTAs dourados aquecem no hover; brasa só para urgência.
Glifos minimalistas, traço médio, tingidos no vermelho da marca. Sem gradientes, sem multicor.
Marca tipográfica com rolinhos de massa cruzados no topo, "SUPREMA" em caps, linhas decorativas e "PIZZA" abaixo. Arquivo oficial 1920×1080, vermelho sobre fundo transparente.
Margem livre = altura da letra "S" em todos os lados
40 px de altura
320×192, centralizado, 100px do rodapé
Distorcer · inclinar · recolorir fora de vermelho/branco
Foto de produto em primeiro plano: a pizza inteira ou a fatia, com o queijo escorrendo e a massa visível. Luz quente e natural — o sabor é o herói.
Pizza inteira na tábua ou fatia na mão — close apetitoso
Queijo escorrendo — o detalhe que dá fome
Iluminação natural, tons quentes, sem fundo escuro forte
Borda e massa fresca aparecendo — prova de verdade
Caixinha orgânica #FFEBDC atrás do texto (nunca retângulo)
Sobre a foto, centralizada na base
Filetes do logo como separador
Acento gráfico da massa
Tamanhos canônicos para cada superfície da marca. Use exatamente estas dimensões — desvios saem do sistema.
A marca tem que ficar impecável no celular (onde está a maioria dos clientes) e no Mac. Estas são as regras de construção pra qualquer página ou peça digital da Suprema.
| Faixa | Largura | Como o layout se comporta |
|---|---|---|
| Desktop / Mac | ≥ 769px | Layout completo — grades de 2–3 colunas, respiro lateral de 8vw, números e títulos grandes. |
| Tablet | 601–768px | Grades reduzidas (3→2 ou 1 coluna), tipografia média, espaçamentos menores. |
| Mobile | ≤ 600px | Tudo em 1 coluna. Padding lateral 18px, hero compacto, imagens cheias na largura. |
| Mobile P | ≤ 380px | Esconde elementos secundários (subtítulos, selos), reduz fontes ao mínimo legível. |
clamp(min, vw, max) — nunca px fixo grande.overflow-x travado: nada ultrapassa 100vw.max-width:100%; vídeo no maior lado 1280px.:hover.Containersection {
padding: 120px 8vw; /* Mac */
}
@media (max-width:600px){
section { padding: 56px 18px; }
}
Tipografia fluidah1 {
font-size: clamp(30px, 5vw, 58px);
}
/* escala sozinha entre
mobile e desktop */
Grade responsiva.grid {
grid-template-columns:
repeat(auto-fit,
minmax(220px,1fr));
}
/* colapsa pra 1 coluna
sozinha no mobile */
Margem livre obrigatória ao redor do emblema. O módulo X equivale à altura da letra "S" de SUPREMA. Nada de texto, foto ou outro elemento dentro dessa zona.
X
X
X
X
= altura da letra "S" do logo
X em todos os 4 lados — sem exceção
Encostar texto, foto ou borda dentro da reserva
Abaixo do mínimo o emblema perde legibilidade — as letras e os rolinhos "fecham". Respeite os limites por suporte.
O emblema é fixo. Não recrie, não recolora, não distorça. Estes oito erros quebram a consistência da marca.
Não esticar na horizontal
Não achatar na vertical
Não inclinar nem girar
Não recolorir fora da paleta
Não aplicar sombra ou efeito
Não usar em baixo contraste
Não usar versão de baixa resolução
Não desbotar nem dessaturar
Estado do Painel da Marca da Suprema — o que já está pronto e o que falta para fechar.