Status and scope
Concept specification for a new landing page identity for pic-forge.com. Build from this document without requesting clarification.
Pic-Forge is an AI photo transformation product: 272+ templates, batch processing, custom prompts. The current site says what the product is in a playful consumer voice. This direction keeps that soul and changes the frame: present Pic-Forge with the full production polish of a luxury fashion magazine, applied deadpan to gloriously unreal images. Premium frame, chaotic content. The contrast is the brand.
This is an original identity. It draws on the general language of high fashion editorial design (cinematic pacing, oversized serif mastheads, credit blocks, issue framing) and copies no specific magazine, template, or photographer's work. No third party names, logos, cover designs, or copy.
Concept name
The Glossy
Identity story
Pic-Forge becomes the world's most serious magazine about completely unserious images. Every screen is art-directed like a collector's issue: a cinematic cover, editorial spreads, fashion-credit typography, issue numbers, a lookbook. And every image in it is a photo someone's uncle took, transformed into something that never happened. The product's chaos is never dressed down; it is dressed UP. The joke lands because the design never winks. The page treats a corgi in Renaissance oil paint with the same reverence a fashion house gives a couture gown, and that deadpan reverence is what separates Pic-Forge from every goofy AI photo toy on the market.
The mood in plain words
- Deadpan luxury
- Cinematic, dark, gallery-lit
- Prestige frame, unhinged content
- Confident, never cute
- Editorial rhythm, magazine pacing
- Expensive-looking on purpose
- Funny through contrast, not through jokes on the surface
- A product page that could hang in a gallery
Brand promise
Nothing in this issue is real.
Treat as design direction until Derek approves exact published wording.
What this direction leaves behind
Drop the current consumer-toy shell: emoji in the interface, bright playful gradients, feature cards with lightning bolts, generic SaaS hero language. Also do not build a literal parody of any real magazine: no borrowed mastheads, no imitated cover layouts of actual publications, no fashion brand names. Do not use dark-SaaS cliches either: no neon cyber grids, no glassmorphism dashboards, no purple AI gradients.
Brand principles
- The frame never winks. Design plays it straight; only the content is absurd. If a layout element is "wacky," it is wrong.
- Images are the product. Every section exists to stage transformations. Text supports, never dominates.
- Credits are the signature joke. Fashion-style credit blocks list PROMPT, TEMPLATE, and BATCH the way a magazine lists photographer and stylist. Deadpan, mono type, small caps.
- Real output only. Ship with actual Pic-Forge transformations. The preview may use labeled placeholder plates, but production never fakes a result the product did not make.
- Chaos with a path to money. Cover, spreads, and lookbook all route to Start Transforming and Pricing within one scroll gesture.
- Commit to the dark. This identity is a cinematic dark canvas with paper-white interludes. It does not have a light mode; it has light PAGES.
Typography
Load from Google Fonts, font-display: swap.
Masthead and display
Bodoni Moda (high-contrast didone, the fashion voice)
Fallback: "Bodoni Moda", "Playfair Display", Didot, "Times New Roman", serif
- Masthead: 800 weight,
clamp(4.5rem, 13vw, 13rem), line-height0.78, letter-spacing-0.02em, uppercase - Section display: 700 weight,
clamp(2.5rem, 5.5vw, 5.5rem), line-height0.9 - Cover lines: 600 italic,
clamp(1.1rem, 1.6vw, 1.5rem) - Pull quotes: 500 italic,
clamp(1.6rem, 3vw, 2.6rem), line-height1.25
Interface and body
Archivo
Fallback: Archivo, "Helvetica Neue", Arial, sans-serif
- Body: 400,
1.04rem, line-height1.7 - Navigation and buttons: 600,
0.9rem, letter-spacing0.04em - Section eyebrows: 600,
0.75rem, letter-spacing0.22em, uppercase
Credits and metadata
Space Mono for credit blocks, page numbers, issue furniture, prompt strings. font-variant-numeric: tabular-nums. No fourth font.
Color tokens
| Token | Value | Use |
|---|---|---|
ink-black | #0B0B0D | Primary canvas |
ink-raised | #141417 | Raised surfaces, cards |
ink-line | #2A2A30 | Borders and rules |
paper | #F4F1EA | Light interlude pages |
paper-line | #D8D2C4 | Rules on paper |
bone | #EDE9DF | Primary text on dark |
bone-dim | #9C978C | Secondary text on dark |
ember | #E8481B | The forge: primary action, accents, hot marks |
ember-deep | #B33312 | Hover and pressed |
ink-on-paper | #161511 | Text on paper pages |
gilt | #C8A24A | Sparse issue furniture only: page numbers, barcode block, thin rules |
Rules: ember is the only saturated color and appears in small, hot doses (actions, underlines, one word per section at most). Gilt never exceeds hairline rules and metadata. Photography plates carry all remaining color. Text contrast meets WCAG AA on both canvases.
Layout and composition
- Max width
1560px, side paddingclamp(20px, 4vw, 80px). - Editorial pacing: alternate full-bleed dark sections with contained paper pages, like turning magazine pages.
- Section spacing
clamp(88px, 10vw, 168px)on dark, tighter on paper. - 12-column grid, but compositions are asymmetric: plates cross columns, text columns stay narrow (
56chmax).
Signature device: the spread
Two plates side by side, original photo and forged result, gutter rule between them, credit block beneath in mono small caps:
`` PHOTOGRAPH submitted by user TEMPLATE Renaissance Oil, No. 114 of 272 PROMPT "make him nobility" TIME 14 seconds ``
Signature device: issue furniture
Every section carries quiet magazine hardware in gilt mono: PAGE 03, issue number, a small barcode block in the cover corner and back cover. Never louder than the content.
Signature device: the plate
All imagery sits in "plates": hard-edged frames, no radius, hairline ink-line border, generous margins. Plates never crop to circles, never tilt, never float with shadows. Gallery presentation.
Navigation
- Top bar: wordmark
PIC-FORGEin Bodoni left; links Collections, The Lookbook, Process, Pricing; right actionStart transforming(ember). - Bar is transparent over the cover, then solid
ink-blackwith hairline bottom rule once scrolled. - Mobile: wordmark, ember action, and a
Menubutton opening a full-screen dark menu in display type. Escape closes and returns focus.
Landing page walk
1. The Cover
Full-viewport dark cover. Oversized PIC-FORGE masthead across the top, gilt issue furniture (ISSUE NO. 001, THE UNREAL COLLECTION, date, barcode block). One dominant hero plate center-right: a single spectacular transformation. Cover lines in Bodoni italic around it, written like magazine cover teases but about the product ("Your dog. Oil on canvas. Fourteen seconds." "272 ways to reimagine a perfectly good photo."). Actions: Start transforming (ember) and Browse the collections (outline). No carousel, no autoplay video.
2. The Manifesto
One paper interlude band. A single Bodoni statement across it: the premise in one deadpan sentence, with one word in ember. Two lines of Archivo support copy. Nothing else.
3. The Collections
Three featured template collections staged as editorials: tall plate, collection title in display serif, template count in mono, one-line description in deadpan luxury voice. Link each to the product's template browser. Titles are Pic-Forge's own (for example The Renaissance Issue, The Neon Archive, The Epic Portraits), never borrowed names.
4. The Spread
The signature before/after: original left, forged right, full credit block beneath. One spread, given room. This is the section that explains the entire product without a paragraph.
5. The Process
Paper page. Mood to mayhem in four numbered steps: Upload, Pick your chaos, Transform, Take it everywhere. Each step one line of copy plus one mono annotation. No icons doing the talking; typography carries it.
6. The Foundry
Dark band for batch processing: the atelier pitch. Volume framed as a production house ("One prompt. Two hundred photographs. The whole shoot, reimagined."). One plate strip showing a batch grid. Action: See the Foundry.
7. The Lookbook
Masonry gallery of six to nine plates with one-line mono credits. In production these are real user transformations with permission; in the preview, labeled placeholder plates. Action: Open the full lookbook.
8. The Reviews
Two or three pull quotes styled as magazine pull quotes with thin gilt rules. Real verified user quotes only in production; preview uses clearly labeled placeholders. No star-rating widgets, no avatars-in-circles.
9. The Subscription
Pricing as a magazine subscription page, on paper. Actual Pic-Forge tiers and prices pulled from the live product before shipping; preview marks numbers as illustrative. Ember on the featured tier only. One FAQ line beneath: plain-English answer about ownership of generated images.
10. The Back Cover
Dark closer: barcode block, issue furniture, one last cover line, Start transforming action, and a compact footer (Product, Templates, Pricing, Support, Terms, Privacy). No social feed embeds.
Component rules
- Buttons: rectangular, no radius,
13px 26px, Archivo 600. Primaryemberwithink-blacktext? No: primaryemberbackground with near-white#FFF6F2text, hoverember-deep. Secondary: transparent, 1pxbone-dimborder on dark,ink-on-paperborder on paper. Text links underline on hover with ember underline. - Plates: 1px
ink-lineborder, zero radius, no shadow, no tilt. - Credit blocks: Space Mono,
0.72rem, letter-spacing0.08em, uppercase labels inbone-dim, values inbone. - No emoji anywhere. No em dashes anywhere in interface copy; use commas or periods. SVG marks only when they add meaning (barcode block is decorative SVG with empty alt semantics).
Interaction and motion
- Entrances: opacity plus max
12pxrise,450ms,cubic-bezier(0.22, 1, 0.36, 1), once per element. - The spread may reveal the forged plate with a horizontal wipe on scroll into view,
700ms, once. No scrubbing, no autoplay loops. - Plate hover: image scale max
1.02inside the fixed frame. - No parallax storms, no marquees, no cursor effects, no infinite animation. Under
prefers-reduced-motion: reduce, all transforms and wipes are removed.
Responsive
- Cover stacks: masthead, hero plate, cover lines, actions. Masthead stays at least
3.2remat375px. - Spreads stack original above forged, credit block below, in that order.
- Collections become a vertical sequence; lookbook becomes two columns at tablet, one at phone.
- Touch targets minimum
44px. No horizontal scroll from320pxto1920px.
Accessibility and content requirements
- WCAG 2.2 AA. Visible skip link. One
h1(the masthead), sequential headings, semantic landmarks. - Every plate has specific alt text describing both the source and the transformation honestly.
- Focus rings:
2pxember outline,3pxoffset, visible on dark and paper. - All claims verified against the live product before shipping: template count, batch limits, pricing, export options. The preview labels every unverified number.
- User images appear only with permission. Never present an AI transformation as a real photograph of an event.
Content voice
Deadpan luxury. Short declarative sentences delivered with a straight face about absurd subject matter. Confidence of a fashion editor, subject matter of a meme factory.
Use: "The fall collection: your face, everywhere." / "Shot on a phone. Elevated beyond reason." / "Batch processing, for when one masterpiece is not enough."
Avoid: exclamation points everywhere, "epic/insane/crazy" as adjectives, winking at the joke ("lol so weird right"), AI hype vocabulary ("revolutionary", "next-gen"), any real magazine or brand name.
What done looks like
- [ ] The page reads as a luxury magazine at first glance and reveals the chaos on second glance.
- [ ] Masthead cover, one spread with full credit block, collections, process, foundry, lookbook, pricing, and back cover are all present in that editorial rhythm.
- [ ] Bodoni Moda, Archivo, and Space Mono load with correct fallbacks; no fourth font.
- [ ] Ember appears only in small hot doses; gilt only as furniture; plates carry the color.
- [ ] Zero emoji, zero em dashes, zero borrowed magazine or brand references.
- [ ] Every number shown is verified or visibly labeled illustrative.
- [ ] Placeholder plates are honestly labeled where real product output is not yet placed.
- [ ] Checked at 1440, 768, and 375; no horizontal overflow 320 to 1920.
- [ ] Keyboard reachable, reduced-motion clean, AA contrast on both canvases.
- [ ] The final page feels like a collector's issue about images that never happened, not a SaaS template with dark mode.