Abrigo.
Documentaire et chaleureux : lumière d'aube en pêche et ambre sur crème, vert olive et corail, photos dans des cadres de travers avec des mots manuscrits. Pensé pour ceux qui demandent de la confiance, pas du marketing.
- Type
- Landing page
- Thème
- Clair
- Titres
- Lora
- Texte
- Figtree
PourDonateurs, bénévoles et la communauté accompagnée elle-même ; tous âges
Sections de la page01/10Um canto do bairro onde ninguém fica sozinho.
Documental e acolhedor: luz de amanhecer, fotos de gente de verdade em moldura torta e bilhetes escritos à mão. Parece álbum da comunidade, não campanha publicitária.
Extrait du DESIGN.md, en portugais pour l'instant.
PourDonateurs, bénévoles et la communauté accompagnée elle-même ; tous âges
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Lora pour les titres, Figtree pour le texte.
TitresLora
Aag!
Abrigo en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteFigtree
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.
- structure avec de vraies photos du quotidien
- comptes rendus d'activité publiés
- marque aux tons terreux, verts ou chauds
- communication proche, de voisin
- entreprise à but lucratif qui vend un produit
- tech/SaaS
- marque froide, corporate ou néon
- structure sans aucune photo ni document à montrer
Ton
Ce qui fait Abrigo
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 01
Hero com foto grande em moldura de papel levemente torta (
rotate-[2.2deg]), fita adesiva no topo, frase manuscrita por cima da foto e legenda à mão embaixo. Uma segunda foto menor sobreposta no canto. - 02
Palavra de ênfase do título em itálico oliva com círculo ou sublinhado desenhado à mão em coral (
<Circulado>e<Sublinhado>), que se desenha na entrada ou ao rolar. - 03
O que fazemos em 3 frentes, cada uma com foto, número manuscrito e horário em pílula.
- 04
Linha do tempo tracejada em coral, anos em Lora itálica, com foto em polaroid fixa ao lado.
- 05
Como ajudar em 3 cartões (doar em destaque oliva, voluntariar, divulgar).
- 06
Bloco de doação: lado quente com frequência e valores sugeridos (só CSS,
has-[:checked]), lado claro com chave Pix e código copia-e-cola (um toque seleciona tudo), mais a lista de doações em itens. - 07
Transparência: documentos empilhados como papéis, cada um com link.
- 08
Agenda com bloquinho de calendário escrito à mão, e mapa ilustrado com pino coral e endereço de referência.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
Identidade
- Fundo creme quente
#fbf3e6. O topo da página ganha a luz de amanhecer (.abrigo-amanhecer: gradientes pêssego#fcd3abe âmbar#f2a65a). Blocos alternados emsurface-2(#f7e4cb). - Texto e primária verde-oliva escuro (
#2c3319texto,#4b5a24botões e ênfase). Nada de preto. - Destaque coral suave
#e0785c: círculos e sublinhados manuscritos, marcadores, bilhetes. Nunca em fundo grande (exceção: o botão da chamada final, sobre o bloco escuro). - Fontes: Lora nos títulos, com itálico para a palavra de ênfase. Caveat (
.abrigo-mao) para bilhetes, legendas de foto e anotações. Figtree no texto. - Grão (
.abrigo-grao) em toda foto e bloco com gradiente. É o que tira a cara de template.
Regras
- Fotos são o coração do estilo. Placeholders (
<Cena>) são cenas em silhueta contra luz quente, nunca caixa cinza. No cliente, troque por<img className="h-full w-full object-cover">no mesmo wrapper. - Luz sempre quente e de frente (contraluz). Nada de foto fria, azulada ou de banco de imagem.
- Seções com
py-24, largura máx.max-w-6xl. Máximo de 2 botões por tela. - Manuscrito com moderação: um bilhete por seção, no máximo.
- Animação: entrada (
data-sobe), revelação ao rolar (data-revela), traço desenhado e o sol respirando. Tudo para emprefers-reduced-motion.
Adaptar à marca do cliente
- Cor própria: troque
--d-primary(e a sombra do botão do hero). Mantenha creme, luz pêssego e o coral. - Igreja ou comunidade de fé: troque "Mesa comunitária / Contraturno / Rede de cuidado" pelas frentes (celebrações, pastorais, ação social) e a agenda pelos horários de culto/missa.
- Abrigo de animais: use a cena
caonas frentes (adoção, castração, lar temporário) e itens como ração e areia. - Marca muito saturada ou fria (azul royal, neon)? Esse design provavelmente não é o certo.
Deux fichiers.
Un prompt.
Abrigo 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 Abrigo.