← Paula

REDESIGN.md

Pic-Forge, the glossy

Open the live preview

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

  1. The frame never winks. Design plays it straight; only the content is absurd. If a layout element is "wacky," it is wrong.
  2. Images are the product. Every section exists to stage transformations. Text supports, never dominates.
  3. 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.
  4. 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.
  5. Chaos with a path to money. Cover, spreads, and lookbook all route to Start Transforming and Pricing within one scroll gesture.
  6. 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-height 0.78, letter-spacing -0.02em, uppercase
  • Section display: 700 weight, clamp(2.5rem, 5.5vw, 5.5rem), line-height 0.9
  • Cover lines: 600 italic, clamp(1.1rem, 1.6vw, 1.5rem)
  • Pull quotes: 500 italic, clamp(1.6rem, 3vw, 2.6rem), line-height 1.25

Interface and body

Archivo

Fallback: Archivo, "Helvetica Neue", Arial, sans-serif

  • Body: 400, 1.04rem, line-height 1.7
  • Navigation and buttons: 600, 0.9rem, letter-spacing 0.04em
  • Section eyebrows: 600, 0.75rem, letter-spacing 0.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

TokenValueUse
ink-black#0B0B0DPrimary canvas
ink-raised#141417Raised surfaces, cards
ink-line#2A2A30Borders and rules
paper#F4F1EALight interlude pages
paper-line#D8D2C4Rules on paper
bone#EDE9DFPrimary text on dark
bone-dim#9C978CSecondary text on dark
ember#E8481BThe forge: primary action, accents, hot marks
ember-deep#B33312Hover and pressed
ink-on-paper#161511Text on paper pages
gilt#C8A24ASparse 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 padding clamp(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 (56ch max).

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-FORGE in Bodoni left; links Collections, The Lookbook, Process, Pricing; right action Start transforming (ember).
  • Bar is transparent over the cover, then solid ink-black with hairline bottom rule once scrolled.
  • Mobile: wordmark, ember action, and a Menu button 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. Primary ember with ink-black text? No: primary ember background with near-white #FFF6F2 text, hover ember-deep. Secondary: transparent, 1px bone-dim border on dark, ink-on-paper border on paper. Text links underline on hover with ember underline.
  • Plates: 1px ink-line border, zero radius, no shadow, no tilt.
  • Credit blocks: Space Mono, 0.72rem, letter-spacing 0.08em, uppercase labels in bone-dim, values in bone.
  • 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 12px rise, 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.02 inside 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.2rem at 375px.
  • 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 from 320px to 1920px.

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: 2px ember outline, 3px offset, 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.