Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Install the KitGuide
LandingLightstraightforwardinformativegraphic
RRótulo

Rótulo.

The whole page is a package: a real nutrition facts table with black border and thick rules, magnifying-glass seals with humor, a barcode and top-down meal prep boxes in SVG. White, pure black, leaf green and carrot orange.

Type
Landing page
Theme
Light
Headings
Oswald
Body
Source Sans 3

ForAdults 22-50 with a busy routine who want to eat better without cooking; recurring purchase by plan or bundle

Get access · from R$49or every design for R$297 a year
Open full screen Use with AI
/preview/rotulo

Page sections01/09Topo e navegação

All the copy lives in content.ts and the colors in tokens.css.
Concept

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.

From DESIGN.md, which is in Portuguese for now.

ForAdults 22-50 with a busy routine who want to eat better without cooking; recurring purchase by plan or bundle

Palette

The four colors that define the design and every variable in tokens.css. Click to copy.

Typography

Oswald for headings, Source Sans 3 for body text.

HeadingsOswald

Aag!

Rótulo in one line

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

BodySource Sans 3

The reading font carries long paragraphs without tiring the eye.

Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.

0123456789 · $1,234.56 · Sep 25, 7:30 PM

Who it's for

What the AI compares with your client to pick the design.

Great for
  • brand with green, orange or black and white
  • product with nutritional information
  • sales by bundle/plan
  • light tone with jokes
Avoid for
  • serious medical clinic
  • luxury or sophisticated gourmet brand
  • aggressive gym
  • audience expecting soft, gentle warmth
Niches
nutritionistfit meal prephealthy frozen foodsupplement storepersonal trainer with meal planhealthy restaurantfit bakerymeal boxfood delivery

Tone

straightforwardinformativegraphicwittytrustworthy

What makes it Rótulo

The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.

  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.

House rules

Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.

View 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").
How to use

Two files.
One prompt.

Rótulo becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.

Prompt for the agent Use with AI

Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.

  1. 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
  2. 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
  3. 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
  4. 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.

Similar

Landings that share a tone or niche with Rótulo.

Browse catalog
LandingLightView design

Lente

LandingLightView design

Receita

LandingLightView design

Trena

LandingLightView design

Carteira