Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Instalar el KitGuía
LandingClarodirectoinformativográfico
RRótulo

Rótulo.

La página entera es un envase: tabla nutricional de verdad con borde negro y reglas gruesas, sellos con lupa y humor, código de barras y viandas vistas desde arriba en SVG. Blanco, negro puro, verde hoja y naranja zanahoria.

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

ParaAdultos de 22 a 50 años con rutina apurada que quieren comer mejor sin cocinar; compra recurrente por plan o paquete

Obtener acceso · desde 49 BRLo todos los diseños por 297 BRL al año
Abrir en pantalla completa Usar con IA
/preview/rotulo

Secciones de la página01/09Topo e navegação

Todo el texto está en content.ts y los colores en tokens.css.
Concepto

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.

Del DESIGN.md, que por ahora está en portugués.

ParaAdultos de 22 a 50 años con rutina apurada que quieren comer mejor sin cocinar; compra recurrente por plan o paquete

Paleta

Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.

Tipografía

Oswald en los títulos, Source Sans 3 en el texto.

TítulosOswald

Aag!

Rótulo en una línea

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoSource Sans 3

La fuente de lectura sostiene párrafos largos sin cansar.

Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.

0123456789 · $1.234,56 · 25/09 a las 19:30

Para quién es

Lo que la IA compara con el cliente para elegir el diseño.

Ideal para
  • marca con verde, naranja o blanco y negro
  • producto con información nutricional
  • venta por paquete o plan
  • tono ligero y con chistes
Evitar para
  • clínica médica seria
  • marca de lujo o gourmet sofisticado
  • gimnasio agresivo
  • público que espera una acogida suave
Nichos
nutricionistaviandas fitcongelados saludablestienda de suplementospersonal trainer con plan alimentariorestaurante saludablepastelería fitbox de comidasdelivery de comida

Tono

directoinformativográficocon humorconfiable

Lo que lo hace Rótulo

Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.

  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.

Reglas del juego

Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.

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").
Cómo usarlo

Dos archivos.
Un prompt.

Rótulo se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.

Prompt para el agente Usar con IA

Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.

  1. 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
  2. 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
  3. 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
  4. 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.

Similares

Landings con tono o nicho en común con Rótulo.

Ver catálogo
LandingClaroVer diseño

Lente

LandingClaroVer diseño

Receita

LandingClaroVer diseño

Trena

LandingClaroVer diseño

Carteira