Revelação.
Portfólio de fotógrafo como laboratório de revelação: luz de segurança vermelha, folha de contato com tiras de filme e lápis graxa, fotos que revelam ao rolar e pacotes em envelope de laboratório.
- Tipo
- Landing page
- Tema
- Escuro
- Títulos
- Bodoni Moda
- Texto
- Hanken Grotesk
ParaPessoas e pequenas marcas contratando fotógrafo autoral por indicação e Instagram
Seções da 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.
ParaPessoas e pequenas marcas contratando fotógrafo autoral por indicação e Instagram
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Bodoni Moda nos títulos, Hanken Grotesk no texto.
TítulosBodoni Moda
Aag!
Revelação em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoHanken Grotesk
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.
- profissional de imagem que trabalha sozinho
- estética analógica ou filme
- marca em preto, vermelho ou tons terrosos
- venda por sessão com agenda de datas
- tech/SaaS
- infantil colorido
- loja com muitos produtos
- marca de cor fria (azul, verde)
- quem ainda não tem fotos próprias para o portfólio
Tom
O que faz ser Revelação
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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).
Regras do jogo
Direto do DESIGN.md.
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.
Dois arquivos.
Um prompt.
O Revelação 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 Revelação.