Abrigo.
Documental y acogedor: luz de amanecer en durazno y ámbar sobre crema, verde oliva y coral, fotos en marcos torcidos con notas manuscritas. Hecho para quien necesita confianza, no una venta.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Lora
- Texto
- Figtree
ParaDonantes, voluntarios y la propia comunidad atendida; todas las edades
Secciones de la 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.
Del DESIGN.md, que por ahora está en portugués.
ParaDonantes, voluntarios y la propia comunidad atendida; todas las edades
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Lora en los títulos, Figtree en el texto.
TítulosLora
Aag!
Abrigo en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoFigtree
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.
- entidad con fotos reales del día a día
- rendición de cuentas publicada
- marca en tonos tierra, verdes o cálidos
- comunicación cercana, de vecino
- empresa con fines de lucro que vende un producto
- tech/SaaS
- marca fría, corporativa o neón
- entidad sin fotos ni documentos que mostrar
Tono
Lo que lo hace Abrigo
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Abrigo 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 Abrigo.
