Abrigo.
Documentary and welcoming: sunrise light in peach and amber over cream, olive green and coral, photos in tilted frames with handwritten notes. Built for those who need trust, not a sales pitch.
- Type
- Landing page
- Theme
- Light
- Headings
- Lora
- Body
- Figtree
ForDonors, volunteers and the community being served; all ages
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForDonors, volunteers and the community being served; all ages
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Lora for headings, Figtree for body text.
HeadingsLora
Aag!
Abrigo in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyFigtree
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.
- organization with real, everyday photos
- published financial reports
- brand in earthy, green or warm tones
- close, neighborly communication
- for-profit company selling a product
- tech/SaaS
- cold, corporate or neon brand
- organization with no photos or documents to show
Tone
What makes it Abrigo
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Abrigo 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.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 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.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 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 Abrigo.