Revelação.
Portfolio de photographe façon laboratoire de développement : lumière inactinique rouge, planche-contact avec bandes de pellicule et crayon gras, photos qui se révèlent au scroll et forfaits en pochettes de labo.
- Type
- Landing page
- Thème
- Sombre
- Titres
- Bodoni Moda
- Texte
- Hanken Grotesk
PourParticuliers et petites marques qui engagent un photographe d'auteur par recommandation et Instagram
Sections de la page01/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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourParticuliers et petites marques qui engagent un photographe d'auteur par recommandation et Instagram
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Bodoni Moda pour les titres, Hanken Grotesk pour le texte.
TitresBodoni Moda
Aag!
Revelação en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteHanken Grotesk
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- professionnel de l'image qui travaille seul
- esthétique analogique ou argentique
- marque en noir, rouge ou tons terreux
- vente par séance avec agenda de dates
- tech/SaaS
- enfantin coloré
- boutique avec beaucoup de produits
- marque aux couleurs froides (bleu, vert)
- qui n'a pas encore de photos personnelles pour le portfolio
Ton
Ce qui fait Revelação
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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).
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Revelação devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Revelação.