Design system · site VAMO Steak Bar
Este sistema não descreve um site. Descreve uma porta: o teto aceso em vermelho, a brasa, a mesa posta, a música começando. Cada regra abaixo existe para o visitante sentir isso antes de ler qualquer coisa.
Um restaurante feito de carne e poesia, com a pose de bar e a cabeça de casa de carnes. Quem entra tem de sentir antes de entender.
A primeira tela é uma sala, não um parágrafo. Foto vertical da casa, marca acesa, e só então o texto. Nada de carrossel de slogan.
No VAMO o vermelho é teto, cadeira, barril e container. No site ele cobre superfícies inteiras e raras, nunca vira detalhe espalhado por cima de tudo.
Fundo brasa. Só o que tem luz (vermelho, âmbar, giz) pede atenção. Se tudo brilha, a sala vira vitrine.
O processo é conteúdo: a câmara de maturação, a brasa, o corte na mesa, o ponto. Toda foto de carne mostra de onde vem o calor.
Como na parede da Lagoa e da Tijuca: uma frase grande, com humor carioca e de bairro. Uma por tela, no máximo.
A estrutura é a mesma, o objeto-assinatura muda. O visitante da Tijuca não pode sentir que está no site da Lagoa.
Leitura da Wink a partir do estudo interno de público (classe C como frequência predominante, ticket médio entre R$ 85,00 e R$ 100,00 nas casas medidas) e do que o site atual já organiza em abas. Validar com GA4 e Rest360 antes de virar prioridade de tela.
O famoso. Chega depois do trabalho, quer mesa rápida, chope gelado e a linguiça de entrada. Precisa de horário, cardápio da hora e botão de reserva sem fricção.
Tem pouco tempo e quer saber o preço antes de sair do escritório. Precisa de cardápio do dia, endereço e a certeza de que a casa não é cerimônia.
Aniversário, formatura, confraternização. Escolhe a casa pelo espaço: o rooftop, o salão grande, o deck. Precisa ver o ambiente cheio e pedir orçamento.
Escolhe o corte, o ponto e o vinho. Compartilha foto de prato. Precisa de maturação explicada, parrilla à vista e carta de vinhos.
Vem pelo som e fica pela mesa. Precisa da programação da semana, da casa onde toca e de uma playlist para chegar no clima.
Quer espaço, varanda, criança acomodada (a Lagoa tem Espaço Kids). Precisa de foto do ambiente aberto e de mesa para muita gente.
A home percorre a casa na ordem em que o corpo percorre: fachada, salão, brasa, câmara, bar, rooftop e, por fim, a mesa. Cada sala vira uma seção, com a foto e a regra visual daquele lugar.
Seção do site: hero
Marca acesa e boi alado. É a porta, o primeiro segundo. Fundo brasa, uma foto vertical, uma frase.
Hero em duas colunas no desktop, foto de pé ocupando a altura toda. No celular a foto vira o fundo, com o texto colado embaixo. Botão Reservar já visível.
Seção do site: o ponto certo do seu dia
Teto vermelho, cadeira vermelha e preta, mesa posta. Aqui entra a história do VAMO e o texto de apresentação.
Seção inteira em vermelho Boi com a matéria latão, ou em brasa com o teto em foto. É o único trecho da home em que o vermelho vira fundo.
Seção do site: a carne
Ver a carne sendo preparada, escolher o corte, escolher o ponto. É o coração do site e o lugar da régua do ponto.
Foto em largura total, fumaça e fogo visíveis. Em cima, a régua do ponto. Etiquetas de corte em mono, como as do açougue.
Seção do site: maturação e vinhos
Dry aged à vista, vitrine de vidro, harmonização. É onde o VAMO prova que entende de carne.
Matéria vidro: linhas finas de grade, fundo couro, luz âmbar nas garrafas. Texto técnico curto, sempre com a etiqueta mono.
Seção do site: happy hour e música ao vivo
O chope, a linguiça de entrada, a banda no fim da tarde. A parte mais barulhenta da casa.
Lista de programação com o dia da semana gigante. Luz âmbar como única cor de apoio. Playlist da casa em um botão.
Seção do site: comemorações e eventos
Sofá, deck, o Cristo ao fundo. É o espaço que vende aniversário e evento sozinho.
Foto em luz de fim de tarde, ouro Rooftop como detalhe exclusivo. Formulário de orçamento ao lado, sem sair da foto.
Seção do site: reservar
A visita termina onde a refeição começa. Escolha a casa, a data, quantas pessoas, a ocasião.
Formulário com linha única embaixo do campo e a luz âmbar no foco. O botão é latão vermelho. Faixa de ladrilho fecha a página.
A paleta nasceu do que as cores fazem dentro da casa. O vermelho foi medido no logo e nas fotos. Os outros vêm dos objetos: o couro, a parede branca, a luz da madeira.
A cor do logo, do teto, do boi e do barril. Superfície grande ou botão. Em texto pequeno sobre brasa não passa no contraste; use só a partir de 24 px em negrito.
A sombra da dobra do logo. Estado de hover do botão e fundo de ladrilho tom sobre tom.
O salão em penumbra. Fundo padrão do site. Preto quente, nunca azulado.
O banco capitonê. Segunda camada de fundo, para cards e seções alternadas.
A parede branca e o ladrilho claro. Texto sobre escuro e fundo das seções de leitura (cardápio, regras, FAQ). Nunca branco puro.
A luz do balcão. Foco, item ativo, preço, filete. É a única cor que diz "aqui, agora". Uma por tela.
Medido no logo do Rooftop. Exclusivo da página e dos módulos do Rooftop Lagoa. Em nenhum outro lugar.
O balcão e as mesas. Só dentro da matéria balcão; não é cor de interface.
Calculado ao vivo a partir dos tokens, pela fórmula da WCAG 2.2. A regra do site: texto corrido só em AA ou melhor; "só grande" vale para título a partir de 24 px em negrito.
| Par | Razão | Uso |
|---|
Fala forte,
sussurra (em itálico)
Uma família variável cobre tudo. O título usa a largura mais estreita (62%) em peso 900, maiúscula, como o stencil do barril e as chamadas da parede. O texto usa a largura normal. Livre, no Google Fonts.
Só para as frases entre parênteses, citações e nome de artista. Nunca em texto de interface.
A etiqueta do açougue e da câmara de maturação: rótulo, origem, peso, horário. Sempre em caixa alta com espaçamento largo.
O VAMO nasceu para unir o melhor da casa de carnes brasileira com a atmosfera descontraída de um bar moderno. Texto corrido em Archivo normal, 17 a 20 px, entrelinha 1,6, no máximo 62 caracteres por linha. Aqui o texto respira como um cardápio bem impresso, não como um contrato.
Gotham Narrow é a fonte histórica das peças do VAMO (está em Fontes, no Drive). Para a web usamos Archivo condensada, que é livre e chega na mesma proporção. Appleberry e White Angelica ficam em peças impressas de celebração e não entram no site. Se a Wink licenciar Gotham Narrow para web, a troca é feita em um único token.
A voz tipográfica: parênteses, como na parede
Frase na parede da casa da Tijuca. Os parênteses são desenhados em traço, nunca digitados, e abraçam no máximo duas linhas. É o recurso editorial do site: aparece uma vez por seção grande, nunca em todas.
A forma é uma só: o triângulo do ladrilho, o mesmo que o logo dobra nas hastes do V, do A e do M. A matéria muda conforme o objeto: latão, couro, vidro e a luz do balcão. Nada tem canto arredondado, porque nada na casa tem.
Quadrados cortados nas diagonais em quatro triângulos, vermelho tijolo (#8E2B27) e creme (#DCD0BF) alternados, medidos no piso da entrada da Lagoa. É mais escuro que o vermelho Boi de propósito, para não brigar com ele. Aparece em faixas de 56 px (cabeçalho e rodapé de página) e como fundo tom sobre tom em seções de vermelho Dobra. Nunca atrás de texto corrido.
O ladrilho em escala mínima: marcador de lista, seta de link e indicador de seção. Substitui bolinha, ícone e pílula.
Barril vermelho: nervuras horizontais e brilho lateral. Botão primário e seção do salão.
Banco capitonê: costuras verticais. Cards, painéis de formulário, seções alternadas.
Vitrine da câmara: grade fina de 40 px. Módulo de maturação, adega e filtros do cardápio.
Madeira com luz embaixo. Filete âmbar de 2 a 3 px: foco, item ativo, hover de linha.
Versão tom sobre tom (couro e brasa), para rodapés e fundos de seção escura
Padrão de ambiente: teto vermelho, couro, parede com voz, ladrilho no chão. Tudo em uma foto.
Achado do levantamento: as fotos editadas da Lagoa estão todas em 4:5 e só as da Lagoa têm tratamento de estúdio. Para um hero 16:9 faltam fotos horizontais; as outras quatro casas precisam de uma sessão nova no mesmo padrão. Está na lista de próximos passos.
Tudo abaixo funciona de verdade: passe o mouse, use o teclado, clique. Os dados são de exemplo e ficam marcados como "a confirmar" onde dependem do cliente.
Primário em latão vermelho, uma vez por tela. Secundário em contorno. Terciário com filete âmbar. O texto fala como a casa: "Vamo reservar".
Barra escura com item ativo marcado pelo filete âmbar. No celular, o menu vira botão e a barra inferior fixa traz Reservar e WhatsApp, as duas ações que mais importam.
VAMO Lagoa
Hero mobile
A foto vertical da casa vira o fundo inteiro. O título entra em Display L, colado embaixo, e a barra de ação fica fixa a 56 px de altura. Nada de carrossel.
O slogan é o ponto da carne. A régua deixa o visitante escolher e ver o corte mudar por dentro. Serve de filtro no cardápio e de enfeite vivo na seção Brasa.
Lista tipográfica enorme, uma casa por linha. Ao passar o mouse a foto da casa troca e a linha acende em vermelho. No celular, a foto some e a linha continua clicável.
A etiqueta da câmara de maturação, em mono. Foto em cima, ficha embaixo, preço em âmbar. Os valores abaixo são marcadores a confirmar com a cozinha.
Dia da semana gigante, artista em itálico, casa e horário em mono. O filete âmbar acende no hover. Dados de exemplo, a Wink recebe a agenda real do cliente.
Formulário de uma coluna visual: linha embaixo do campo e a luz âmbar no foco. A ocasião vira chip retangular (as quatro abas do site atual). Valida de verdade ao enviar.
Bloco de poesia: fundo giz, parênteses desenhados, frase em itálico. Uma por seção grande. Reproduz a parede branca da casa.
Fecha a visita com a faixa de ladrilho. As cinco casas, os canais de reserva e o Instagram. Sem mapa em iframe: um link por casa.
Cada unidade tem um objeto que o visitante lembra: é ele que abre a página da casa e que define a primeira foto, a primeira frase e a cor de apoio. Toque ou clique para abrir.
Foto de abertura, frase entre parênteses, objeto-assinatura, endereço, horário, cardápio local, programação e, só no Rooftop Lagoa, o ouro.
O que nunca muda: paleta, tipografia, ladrilho, componentes, botão de reserva e a ordem das salas. É isso que faz as cinco casas parecerem um só VAMO.
As informações de cada casa vêm do levantamento de fotos e do Instagram oficial (Abelardo Bueno, Downtown, Bossa Nova Mall, Lagoa Shopping, Tijuca). Endereços, horários e cardápios locais ficam para o conteúdo real do cliente.
Toda seção entra por brilho: de 35% a 100% de luz e de 0 a 100% de opacidade em 0,9 s, quando passa de 25% da tela. Como alguém ligando o salão. Nenhuma peça desliza, quica ou sobe 20 px.
No hero, o boi alado pode flutuar alguns pixels em ciclo lento de 8 s. É o único elemento que se mexe sozinho em todo o site. O resto só se mexe quando a pessoa age.
Ao escolher o ponto, as camadas do corte reposicionam em 0,5 s. É o tipo de movimento que o site mais deve ter: responde a uma escolha, mostra uma consequência.
Com prefers-reduced-motion, tudo aparece aceso e parado. O painel das casas e a régua do ponto trocam de estado sem transição.
Nunca toca sozinho. Existe um botão "Ouvir a playlist da casa" que abre o Spotify, e a programação mostra quem toca. A música ao vivo é conteúdo, não trilha de fundo do site.
Foco visível em âmbar com 3 px de respiro, alvo de toque mínimo de 48 px, contraste AA em todo texto corrido, texto alternativo descrevendo o objeto da foto (não "imagem de restaurante").
Brasileiro, informal, com humor de mesa de bar e a poesia de quem ama carne. "Vamo" é verbo: convida em vez de mandar.
As sete salas em desktop e celular, com a régua do ponto, o seletor de casas e a reserva. Sai direto deste sistema.
Os logos do Drive são PNG de 446 px. Para o site e para o neon, pegar o Logo.ai e exportar em SVG, com as duas dobras de vermelho.
Horizontal da Lagoa, as quatro outras casas no mesmo padrão de estúdio, a banda ao vivo e o gesto de escolher o corte na mesa.
Horários, endereços, programação, cardápio, história e preço de cada casa. Hoje tudo isso está marcado como "a confirmar".
Subir em homolog-vamo.winkdash.app antes de tocar no site atual, que continua no WordPress com tema Flatsome na hospedagem da Wink.
Todas as fotos e logos separados do Drive para este projeto, com a origem de cada uma. Clique para ampliar. Os arquivos estão em img/, já redimensionados para a web.
Vermelho · fundo claro
Preto · fundo claroBranco · fundo escuro
Selo vermelho
Rooftop · fundo claro
Rooftop · fundo escuro