Etapa 02 · Direção visual

O JEITO
QUE A PROPOSTA
VAI FALAR.

Esta página define a linguagem visual que vai sustentar todas as próximas etapas — paleta, hierarquia, mapas mentais, fluxogramas, cards, badges e estados. Tudo com a cara da hamburgueria.

Ver o sistema 12 blocos · 1 linguagem
Cor principal
#E02020
Vermelho Principal
Energia
#FFC400
Respiro
#FFF4D7
Aa
Bebas
Aa
Archivo
Aa
Inter
01Paleta visual

Cores que vendem a ideia antes do texto.

Onze tons divididos em principais, sustentação e ambiente. Vermelho decide, amarelo conecta, grafite emoldura.

Principais
#E02020
Vermelho Principal
CTAs, alertas, módulos-chave
#B31318
Vermelho Profundo
Hover, sombras quentes, profundidade
#FFC400
Amarelo Principal
Energia, badges, linhas de conexão
#F5A400
Amarelo Queimado
Variações, degradês, sinalização
Sustentação
#151515
Grafite Urbano
Fundos premium, contraste forte
#2B2B2B
Cinza Industrial
Cards escuros, bordas, superfícies
#FFF4D7
Creme Quente
Áreas de leitura, respiro visual
#FFFFFF
Branco Limpo
Texto sobre escuro, cards claros
Ambiente
#B8793A
Madeira Clara
Detalhes, divisórias, microelementos
#A14D2D
Tijolo Quente
Texturas, apoio decorativo
#FF7A00
Neon Quente
Glow sutil, energia pontual
02Como aplicar

Regras que mantêm o ar limpo.

Faça
  • Vermelho para força, decisão e destaque.
  • Amarelo para energia, conexões e atenção positiva.
  • Grafite para sensação premium e urbana.
  • Creme para áreas de leitura e respiro.
  • Contraste e clareza sempre em primeiro lugar.
Evite
  • Não misturar todas as cores ao mesmo tempo.
  • Não deixar o amarelo competir com tudo.
  • Não usar vermelho em massa quando atrapalha leitura.
  • Madeira e tijolo apenas como apoio — nunca dominantes.
  • Neon/glow com moderação, só clima urbano.
03Hierarquia visual

Cada texto sabe seu lugar.

H1 · Título principal
QRCODE NA MESA
Archivo Black · 56–96px · tracking apertado
H2 · Título de seção
Da mesa para a cozinha em segundos
Bebas Neue · 36–48px
Subtítulo

Um sistema de pedidos via QR Code que conecta cliente, recepção, cozinha e estoque numa só linha de comando.

Inter 500 · 18–20px
Body

Frases curtas, leitura rápida, sem parágrafos longos. O texto serve a decisão — não o contrário.

Inter 400 · 14–15px · line-height 1.65
04Mapas mentais

Núcleo no centro, tudo conecta em volta.

Padrão dos mapas: núcleo grafite com borda amarela, ramificações em cards coloridos por função, linhas amarelas suaves e respiro generoso.

NúcleoQNMOS
QR CODE
CLIENTE
RECEPÇÃO
COZINHA
ESTOQUE
VALIDADE
05Fluxogramas

Linhas retas, decisões claras.

Blocos sequenciais, números de ordem, cores por etapa, ponto de decisão em destaque. Em desktop, horizontal; em mobile, vertical.

01Escaneia QR
02Vê cardápio
03Monta pedido
04Finaliza
05Recepção
06Cozinha
07Acompanha
08Entrega
Nó de decisão
Tem estoque?
Sim → cozinhaNão → bloqueia
Conector padrão

Linha amarela 1px, seta cheia, sem curvas barrocas.

Bloco padrão
00Ação curta
06Componentes base

Cards, botões e badges — o kit operacional.

Módulo

Card escuro

Fundo grafite, badge amarela no topo, título display e copy curta.

Destaque

Card vermelho

Para módulos críticos, alertas e ações que precisam ser lembradas.

Leitura

Card creme

Para áreas de leitura, explicações longas e respiro entre blocos pesados.

Botões
07Estados visuais

Sete sinais — o painel inteiro fala.

Ativo
Etapa em foco / em execução.
Hover
Resposta ao ponteiro.
Selecionado
Item escolhido pelo usuário.
Sucesso
Pedido confirmado / OK.
Atenção
Estoque baixo, ficar de olho.
Alerta
Crítico — agir agora.
Pendente
Aguardando ação.
08Fundos & superfícies

Camadas com cara de ambiente, não de slide.

qnm-grain
Atmosfera
qnm-brick
Tijolinho
cream
Respiro
09Preview do padrão

Tudo junto, falando a mesma língua.

Demonstração de como um módulo ficará nas próximas etapas — usando exatamente a paleta, a hierarquia e os componentes definidos acima.

Módulo QR Code

Cada módulo herda a paleta da sua função, o título display, a badge superior e o conector amarelo que liga ao próximo passo.

AtivoSucessoAlerta
Item 01
Bloco padrão
Conteúdo curto, leitura rápida, decisão objetiva.
Item 02
Bloco padrão
Conteúdo curto, leitura rápida, decisão objetiva.
Item 03
Bloco padrão
Conteúdo curto, leitura rápida, decisão objetiva.
Item 04
Bloco padrão
Conteúdo curto, leitura rápida, decisão objetiva.