Revelação.
A photographer's portfolio as a darkroom: red safelight, a contact sheet with film strips and grease pencil, photos that develop as you scroll and packages in lab envelopes.
- Type
- Landing page
- Theme
- Dark
- Headings
- Bodoni Moda
- Body
- Hanken Grotesk
ForPeople and small brands hiring an authorial photographer through referrals and Instagram
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForPeople and small brands hiring an authorial photographer through referrals and Instagram
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Bodoni Moda for headings, Hanken Grotesk for body text.
HeadingsBodoni Moda
Aag!
Revelação in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyHanken Grotesk
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.
- solo image professional
- analog or film aesthetic
- brand in black, red or earthy tones
- per-session sales with a date calendar
- tech/SaaS
- colorful children's brand
- store with many products
- cold-colored brand (blue, green)
- anyone without their own photos for the portfolio
Tone
What makes it Revelação
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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).
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Revelação 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 Revelação.
