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
Secciones de la página01/11nav
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.
- 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
- 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
Tono
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.
- 01
Sol em faixas: círculo em degradê mostarda → terracota cortado por faixas que engrossam para baixo (
<Sol fundo=...>;fundoprecisa ser a cor de trás). - 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. - 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.
- 04
Tábua de marés como elemento gráfico: curva desenhada a partir dos horários do
content.ts. - 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. - 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.
Identidade
- Fundo creme de areia
#f5e7cccom textura de papel (ruído SVG em.mare-papel). Blocos alternados emsurface-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-*eLISTRASnoLanding.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-lgnos 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 comdata-sobe. - Ícones lucide com traço grosso (
strokeWidth2+) dentro de círculo com contorno.
Adaptar à marca do cliente
- Troque
--d-primarypela cor da marca se ela for quente (laranja, vermelho queimado, amarelo). Marca azul ou verde: troque--d-accente 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.
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.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 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.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 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é.
