Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Instalar el KitGuía
LandingClarosoleadorelajadoanalógico
MMaré

Maré.

Póster de surf retro de los años 70: sol poniéndose en franjas, olas en curvas gruesas, rayas naranja, mostaza, terracota y verde agua que doblan las esquinas, tabla de mareas y textura de serigrafía sobre crema arena.

Tipo
Landing page
Tema
Claro
Títulos
Righteous
Texto
Rethink Sans

ParaTuristas y vecinos de una ciudad costera, 18-50 años, que buscan clases, alquiler o una experiencia en la playa

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

Secciones de la página01/11nav

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

Pôster de surf retrô dos anos 70 impresso em serigrafia: sol se pondo em faixas, ondas gordas e listras laranja, mostarda, terracota e verde-água que dobram os cantos. Solar e sem pressa.

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

ParaTuristas y vecinos de una ciudad costera, 18-50 años, que buscan clases, alquiler o una experiencia en la playa

Paleta

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

Tipografía

Righteous en los títulos, Rethink Sans en el texto.

TítulosRighteous

Aag!

Maré en una línea

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoRethink Sans

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
  • negocio de playa, mar o verano
  • marca con naranja, amarillo quemado o verde agua
  • horarios que dependen de la marea o el clima
  • ambiente de vacaciones y atardecer
Evitar para
  • servicio corporativo o jurídico
  • salud y clínicas
  • tech/SaaS
  • marca fría, minimalista o de lujo sobrio
  • público infantil de guardería
Nichos
escuela de surfstand up paddlealquiler de tablastienda de surfposada frente al marpaseos en barcoescuela de velakitesurfropa de playakiosco de playa

Tono

soleadorelajadoanalógicoretroplayero

Lo que lo hace Maré

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

  1. 01

    Sol em faixas: círculo em degradê mostarda → terracota cortado por faixas que engrossam para baixo (<Sol fundo=...>; fundo precisa ser a cor de trás).

  2. 02

    Listras que dobram o canto (<Curva>): vêm na horizontal e descem com raio concêntrico. Atrás do pôster do hero, no canto da tabela de aluguel e nos dois cantos da chamada final.

  3. 03

    Pôster do hero: céu mostarda claro, texto em arco sobre o sol, três camadas de onda com crista creme correndo devagar, prancha própria em SVG e tarja marrom embaixo.

  4. 04

    Tábua de marés como elemento gráfico: curva desenhada a partir dos horários do content.ts.

  5. 05

    Contorno de 3px marrom em tudo que é cartão/botão e sombra carimbada sólida (.mare-carimbo, deslocada, sem blur) que afunda no clique.

  6. 06

    Palavra final do título com sombra mostarda deslocada (text-shadow: 5px 5px 0).

Reglas del juego

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

Ver DESIGN.md

Identidade

  • Fundo creme de areia #f5e7cc com textura de papel (ruído SVG em .mare-papel). Blocos alternados em surface-2 (#ecd7b0). Nunca branco.
  • Texto marrom #3a2314; secundário #74523b. Nada de preto nem cinza.
  • Primária laranja pôr do sol #c4501c: botões e a palavra final do título.
  • Destaque verde-água #23807a: janelas de maré, seção de segurança, ondas.
  • Listras sempre as quatro, nesta ordem: #e8742c, #e2a72e, #b4462a, #3ea79d (--mare-* e LISTRAS no Landing.tsx).
  • Fontes: Righteous só em títulos, nomes e números grandes; Rethink Sans no resto.

Regras

  • Cantos sempre redondos (pílula nos botões, rounded-d-lg nos cartões). Nada de canto vivo.
  • As listras aparecem no máximo em 3 lugares por página; é assinatura, não papel de parede.
  • Animação lenta e contínua só em ondas, sol e prancha; tudo para com movimento reduzido.
  • Títulos com data-revela; hero com data-sobe.
  • Ícones lucide com traço grosso (strokeWidth 2+) dentro de círculo com contorno.

Adaptar à marca do cliente

  • Troque --d-primary pela cor da marca se ela for quente (laranja, vermelho queimado, amarelo). Marca azul ou verde: troque --d-accent e mantenha o laranja do sol.
  • Pousada/quiosque: troque a tábua de marés por cardápio ou quartos no mesmo cartão de contorno grosso, e a tabela de aluguel vira cardápio com a linha pontilhada.
  • Passeio de barco/vela: troque a prancha por um barco simples no mesmo traço (creme + contorno marrom + faixas).
  • Marca fria, minimalista ou corporativa: esse design não é o certo.
Cómo usarlo

Dos archivos.
Un prompt.

Maré 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 Maré.

Ver catálogo
LandingClaroVer diseño

Fome

LandingClaroVer diseño

Fermento

LandingClaroVer diseño

Assento

LandingClaroVer diseño

Lavra