Design Vaultby Ravox
Landingclarodiretoinformativográfico
RRótulo

Rótulo.

A página inteira é uma embalagem: tabela nutricional de verdade com borda preta e réguas grossas, selos em lupa com humor, código de barras e marmitas vistas de cima em SVG. Branco, preto puro, verde-folha e laranja-cenoura.

Tipo
Landing page
Tema
Claro
Títulos
Oswald
Texto
Source Sans 3

ParaAdultos 22-50 com rotina corrida que querem comer melhor sem cozinhar; compra recorrente por plano ou pacote

Obter acesso · a partir de R$ 49ou todos os designs por R$ 297 ao ano
Abrir em tela cheia
/preview/rotulo

Seções da página01/09Topo e navegação

Todo o texto fica em content.ts e as cores em tokens.css.
Conceito

A landing é a embalagem do produto: tabela nutricional, selos em lupa, código de barras e lista de ingredientes. Direto, informativo e com humor. Não é clínica nem academia.

ParaAdultos 22-50 com rotina corrida que querem comer melhor sem cozinhar; compra recorrente por plano ou pacote

Paleta

As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.

Tipografia

Oswald nos títulos, Source Sans 3 no texto.

TítulosOswald

Aag!

Rótulo em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoSource Sans 3

A fonte de leitura carrega parágrafos longos sem cansar.

Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.

0123456789 · R$ 1.234,56 · 25/09 às 19h30

Para quem serve

O que a skill /escolher-design compara com o cliente.

Combina com
  • marca com verde, laranja ou preto e branco
  • produto com informação nutricional
  • venda por pacote/plano
  • tom leve e com piada
Evitar para
  • clínica médica séria
  • marca de luxo ou gourmet sofisticado
  • academia agressiva
  • público que espera acolhimento suave
Nichos
nutricionistamarmita fitcongelados saudáveisloja de suplementospersonal trainer com plano alimentarrestaurante saudávelconfeitaria fitbox de refeiçõesdelivery de comida

Tom

diretoinformativográficobem-humoradoconfiável

O que faz ser Rótulo

As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.

  1. 01

    Tabela nutricional (.rotulo-tabela + .rotulo-grossa / .rotulo-media / .rotulo-fina): título, "Porção", régua grossa, cabeçalho "Quantidade por porção | %VD*", linhas finas, nota "*%VD". No hero ela descreve o serviço com piada; no cardápio, os macros reais de cada prato.

  2. 02

    Selo em lupa (Selo): colorido, torto, com contorno e sombra. Só mensagens positivas ("Alto em sabor", "Baixo em tédio"). Nunca preto com texto branco nem "alto em açúcar/sódio/gordura": não pode parecer o selo oficial da Anvisa.

  3. 03

    Código de barras SVG (Barras) no hero e na chamada final.

  4. 04

    Marmitas vistas de cima (Prato): SVG chapado, cores da comida em content.ts.

  5. 05

    Faixa corrida preta tipo lacre ("Conservar congelado a -18 °C").

  6. 06

    Ingredientes em texto corrido pequeno, "Alérgicos" em caixa-alta negrito, "Modo de preparo" em 4 passos.

Regras do jogo

Direto do DESIGN.md.

Ver DESIGN.md

Identidade

  • Fundo branco embalagem #ffffff; blocos alternados em surface-2 #f1f4ea (verde quase branco).
  • Texto e réguas em preto puro #000. Borda preta de 2-4px em tudo que é bloco.
  • Primária verde-folha #13a538 em botões, destaque do título e chamada final. Texto sobre verde é preto.
  • Destaque laranja-cenoura #f26a1b em selos, etiqueta "mais pedido", último passo e sublinhados.
  • Fontes: Oswald (condensada, bold, caixa-alta) nos títulos e números; Source Sans 3 no texto; mono só em lote, peso e código.
  • Cantos quase retos (4px). Sombra sempre dura e preta (4px 4px 0 #000), nunca desfocada.

Regras

  • Títulos em Oswald caixa-alta, leading apertado. Rótulo de seção em etiqueta preta.
  • Botões .rotulo-botao: borda preta + sombra dura que "afunda" no clique. Máximo 2 por tela.
  • Muita régua preta, pouca cor: verde e laranja são pontuais, o resto é preto no branco.
  • Animação: data-sobe no hero, data-revela abaixo; faixa corrida e selo balançando param com movimento reduzido.

Adaptar à marca do cliente

  • Troque --d-primary pela cor da marca, desde que texto preto continue legível sobre ela (verde, amarelo, laranja, rosa claro funcionam; azul-marinho ou roxo escuro não).
  • Loja de suplementos: a tabela vira a do produto (proteína por dose), selos "Alto em proteína".
  • Confeitaria fit: troque a marmita por um pote/bolo visto de cima no mesmo estilo chapado.
  • Nutricionista sem produto: tabela do hero descreve a consulta ("Porção: 1 consulta de 60 min").
Como usar

Dois arquivos.
Um prompt.

O Rótulo vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.

Prompt para o agente

Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.

  1. 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
  2. 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
  3. 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
  4. 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.

Parecidos

Landings com tom ou nicho em comum com Rótulo.

Ver catálogo
LandingclaroVer design

Lente

LandingclaroVer design

Receita

LandingclaroVer design

Trena

LandingclaroVer design

Carteira