Design Vaultby Ravox
Landingclarosolarrelaxadoanalógico
MMaré

Maré.

Pôster de surf retrô anos 70: sol se pondo em faixas, ondas em curvas grossas, listras laranja, mostarda, terracota e verde-água dobrando os cantos, tábua de marés e textura de serigrafia sobre creme de areia.

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

ParaTuristas e moradores de cidade litorânea, 18-50, que buscam aula, aluguel ou experiência na praia

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

Seções da página01/11nav

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

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.

ParaTuristas e moradores de cidade litorânea, 18-50, que buscam aula, aluguel ou experiência na praia

Paleta

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

Tipografia

Righteous nos títulos, Rethink Sans no texto.

TítulosRighteous

Aag!

Maré em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoRethink Sans

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
  • negócio de praia, mar ou verão
  • marca com laranja, amarelo queimado ou verde-água
  • horário que depende de maré ou clima
  • clima de férias e fim de tarde
Evitar para
  • serviço corporativo ou jurídico
  • saúde e clínica
  • tech/SaaS
  • marca fria, minimalista ou de luxo sóbrio
  • público infantil de berçário
Nichos
escola de surfstand up paddlealuguel de pranchasloja de surfpousada pé na areiapasseio de barcoescola de velakitesurfroupa de praiaquiosque de praia

Tom

solarrelaxadoanalógicoretrôpraiano

O que faz ser Maré

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

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

Regras do jogo

Direto do DESIGN.md.

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.
Como usar

Dois arquivos.
Um prompt.

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

Ver catálogo
LandingclaroVer design

Fome

LandingclaroVer design

Clipping

LandingclaroVer design

Concreto

LandingclaroVer design

Nanquim