Revelação.
Portafolio de fotógrafo como laboratorio de revelado: luz de seguridad roja, hoja de contactos con tiras de película y lápiz graso, fotos que se revelan al hacer scroll y paquetes en sobre de laboratorio.
- Tipo
- Landing page
- Tema
- Oscuro
- Títulos
- Bodoni Moda
- Texto
- Hanken Grotesk
ParaPersonas y marcas pequeñas que contratan a un fotógrafo de autor por recomendación e Instagram
Secciones de la página01/09Topo e navegação
Portfólio de fotógrafo montado como um laboratório de revelação analógica. Escuro, quente, editorial. A única cor forte é o vermelho da luz de segurança.
Del DESIGN.md, que por ahora está en portugués.
ParaPersonas y marcas pequeñas que contratan a un fotógrafo de autor por recomendación e Instagram
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Bodoni Moda en los títulos, Hanken Grotesk en el texto.
TítulosBodoni Moda
Aag!
Revelação en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoHanken Grotesk
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.
- profesional de la imagen que trabaja solo
- estética analógica o de película
- marca en negro, rojo o tonos terrosos
- venta por sesión con agenda de fechas
- tech/SaaS
- infantil colorido
- tienda con muchos productos
- marca de color frío (azul, verde)
- quien aún no tiene fotos propias para el portafolio
Tono
Lo que lo hace Revelação
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 01
Luz de segurança: brilho vermelho no alto à direita do fundo,
.revelacao-lampadaacesa na nav, nas leituras e na agenda; botão vermelho com brilho (.revelacao-botao). - 02
Folha de contato: cada categoria é uma
.revelacao-tira(furos de tracionamento em SVG, código de borda, número do quadro comA); médio formato usa.revelacao-tira--120(sem furo, quadro 1:1). - 03
Lápis graxa (
Lapis): círculo na foto escolhida, X na descartada. O traço se desenha ao rolar. A mesma marca vale na agenda (círculo = livre, X = reservado). - 04
Foto que revela (
.revelacao-foto): começa vermelho quase preto e revela ao rolar (scroll-driven), no hover em navegador sem suporte, e sozinha no hero (--ja). Com movimento reduzido, já aparece revelada. - 05
Grão de filme fixo na página inteira (SVG feTurbulence) e mais forte dentro das fotos.
- 06
Processo como ficha de banhos: tabela com bandeja, banho químico, etapa, texto e tempo. Não é card.
- 07
Pacote em envelope de laboratório kraft, com recorte de dedo no topo, campos pontilhados, caixa marcada, carimbo de prazo e a cópia saindo do envelope no hover.
- 08
Cópia no varal no "sobre" (papel fibra + pregador).
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
Identidade
- Fundo quase preto quente
#0e0b0a; blocos alternados emsurface(#151010). Nunca preto puro nem cinza frio. - Texto papel
#efe6dc; secundário#9c8f84. - Primária vermelho de câmara escura
#c2261b: botão, lâmpada, brilho difuso. Em texto pequeno use--revelacao-luz(#e25a47, legível no escuro). Nada de gradiente roxo/azul. - Destaque sépia
#d8b37asó em código de borda do filme e no pregador. Kraft (--revelacao-kraft) e papel fibra (--revelacao-papel) só em envelope e cópia. - Fontes: Bodoni Moda nos títulos (itálico na palavra-chave), Hanken Grotesk no texto, Azeret Mono em caixa alta espaçada para tudo que é técnico (exposição, rótulo, código de borda, tempo).
Regras
- Composição assimétrica em grid de 12; seções com
py-24 md:py-32,max-w-6xl. - Formato da foto é o do filme: 2:3 retrato, 3:2 paisagem, 1:1 médio formato. Não cortar em 4:5 ou 16:9.
- Máximo de 2 chamadas por tela; texto de botão é a ação ("Marcar uma conversa").
- Vermelho é luz, não decoração: nada de fundo vermelho grande, nada de segunda cor saturada.
- Toda legenda técnica em mono (
f/2.8 · 1/125 · ISO 400). Número de exposição só se for da foto real. data-sobeno hero,data-revelaabaixo da dobra; animações próprias param em movimento reduzido.
Adaptar à marca do cliente
- Marca com vermelho próprio: troque
--d-primarye--revelacao-luz(versão mais clara) e as cores dosrgba(194,38,27,…)dotokens.css. Mantenha o fundo quente escuro. - Fotógrafo de casamento: categorias viram cerimônia, making of, retrato do casal, festa; o pacote vira cobertura por horas. Fotógrafo de produto: trocar "Família" por "Still" e as cenas por
objeto/mesa. - Marca clara, pastel ou de cor fria: esse design não é o certo.
Dos archivos.
Un prompt.
Revelação 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 Revelação.