Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Install the KitGuide
LandingLightsunnyrelaxedanalog
MMaré

Maré.

Retro 1970s surf poster: a setting sun in bands, thick curved waves, orange, mustard, terracotta and sea-green stripes folding around the corners, a tide table and screen-print texture on sand cream.

Type
Landing page
Theme
Light
Headings
Righteous
Body
Rethink Sans

ForTourists and locals of a coastal town, 18-50, looking for lessons, rentals or a beach experience

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

Page sections01/11nav

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

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.

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

ForTourists and locals of a coastal town, 18-50, looking for lessons, rentals or a beach experience

Palette

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

Typography

Righteous for headings, Rethink Sans for body text.

HeadingsRighteous

Aag!

Maré in one line

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

BodyRethink Sans

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
  • beach, sea or summer business
  • brand with orange, burnt yellow or sea-green
  • schedule that depends on tide or weather
  • vacation, late-afternoon mood
Avoid for
  • corporate or legal services
  • healthcare and clinics
  • tech/SaaS
  • cold, minimalist or sober luxury brand
  • nursery-age children's audience
Niches
surf schoolstand up paddleboard rentalsurf shopbeachfront innboat tourssailing schoolkitesurfbeachwearbeach kiosk

Tone

sunnyrelaxedanalogretrobeachy

What makes it Maré

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

  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).

House rules

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

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

Two files.
One prompt.

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

Browse catalog
LandingLightView design

Fome

LandingLightView design

Fermento

LandingLightView design

Assento

LandingLightView design

Lavra