Abrigo.
Documental e acolhedor: luz de amanhecer em pêssego e âmbar sobre creme, verde-oliva e coral, fotos em moldura torta com bilhetes manuscritos. Feito para quem pede confiança, não venda.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Lora
- Texto
- Figtree
ParaDoadores, voluntários e a própria comunidade atendida; todas as idades
Seções da página01/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.
ParaDoadores, voluntários e a própria comunidade atendida; todas as idades
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Lora nos títulos, Figtree no texto.
TítulosLora
Aag!
Abrigo em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoFigtree
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.
- entidade com fotos reais do dia a dia
- prestação de contas publicada
- marca em tons terrosos, verdes ou quentes
- comunicação próxima, de vizinho
- empresa com fins lucrativos vendendo produto
- tech/SaaS
- marca fria, corporativa ou neon
- entidade sem nenhuma foto nem documento para mostrar
Tom
O que faz ser Abrigo
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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.
Regras do jogo
Direto do DESIGN.md.
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.
Dois arquivos.
Um prompt.
O Abrigo 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.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 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 Abrigo.