Maré.
Affiche de surf rétro des années 70 : soleil couchant en bandes, vagues en courbes épaisses, rayures orange, moutarde, terre cuite et vert d'eau qui se replient aux coins, table des marées et texture de sérigraphie sur crème sable.
- Type
- Landing page
- Thème
- Clair
- Titres
- Righteous
- Texte
- Rethink Sans
PourTouristes et habitants d'une ville côtière, 18-50 ans, qui cherchent des cours, une location ou une expérience à la plage
Sections de la page01/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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourTouristes et habitants d'une ville côtière, 18-50 ans, qui cherchent des cours, une location ou une expérience à la plage
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Righteous pour les titres, Rethink Sans pour le texte.
TitresRighteous
Aag!
Maré en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteRethink Sans
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- activité de plage, de mer ou d'été
- marque avec orange, jaune brûlé ou vert d'eau
- horaires qui dépendent de la marée ou de la météo
- ambiance de vacances et de fin d'après-midi
- service corporate ou juridique
- santé et cliniques
- tech/SaaS
- marque froide, minimaliste ou de luxe sobre
- public de crèche
Ton
Ce qui fait Maré
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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).
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Maré devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Maré.