# pfpmaker.online — Content Fit Matrix

Status: DESIGN_CONDITIONAL_GO
Date: 2026-06-03
Source copy: /root/.hermes/reports/site-pfpmaker-20260603/copy-package.md
Design package: /root/.hermes/reports/site-pfpmaker-20260603/design

## Design direction

Japanese Minimal utility toolkit: warm ivory canvas, ink UI, teal crop rings, orange upload CTA, geometric crop-grid motif. The visual identity is intentionally lighter and more editor/task focused than pfpmaker.com; it avoids heavy AI headshot/photoshoot positioning, competitor social proof, platform logos, and official endorsement cues.

## Matrix

| Route / state | Source sections | Display position | Homepage? | Layout container | Visual risk / design note |
|---|---|---|---:|---|---|
| `/` home | copy-package §1 homepage; PRD §4 positioning; SEO matrix primary keyword | Hero, short answer, preset bento, feature bento, how-it-works, FAQ | yes | Asymmetric split hero + bento sections | Stitch inserted generated avatar/photo placeholders in some screenshots. Treat as temporary visual placeholders; dev should replace with abstract initials/geometric avatar examples, not real face/headshot assets. |
| `/discord-pfp-maker` | copy package Discord page; PRD P0 preset task; SEO high-intent page | Route hero, safe crop mechanics, contextual preview, common mistakes, FAQ | linked card only | Safe-zone crop diagram + control cards | Must not use Discord logo/UI. Generic dark community preview only. |
| `/profile-picture-maker` | copy package profile picture page; PRD secondary ICP | Route hero, use case grid, export matrix, design tips, FAQ | linked card only | Multi-platform export matrix + preview rail | Avoid professional headshot narrative; keep general profile-picture utility. |
| `/ai-pfp-maker` | copy package AI feature-state copy; compliance AI claim boundary | Route hero, feature-state notice, planned style cards, FAQ | linked card only | Notice-first page + planned style bento | Conditional: AI is planned/coming-next only. Dev must remove/replace any generated human/anime placeholder images before launch. |
| `/editor#empty` | copy package above-fold empty state | Tool shell / home above fold | yes | Dropzone + circular preview + preset chips | Privacy line must remain non-absolute: “where possible.” |
| `/editor#upload` | copy package upload/processing microcopy | Tool state screen | no | Progress ring + selected file placeholder | Do not imply server upload if browser-local. Use “preparing in editor.” |
| `/editor#edit` | PRD P0 controls; copy feature blocks | Tool state screen | no | Canvas, crop handles, controls, live preview | Controls shown are design reference; implementation can simplify if core upload/crop/download stays intact. |
| `/editor#result` | copy package result/download states | Tool state screen | no | Finished preview + export cards | PNG/WebP, no watermark, no signup must be visible. |
| `/editor#download` | copy package download success | Tool state screen | no | Success panel + downloaded file cards | Must avoid fake save/account prompts. |
| `/editor#error` | copy package error state | Tool state screen | no | Error card + retry CTA + accepted formats | Recovery copy must be calm and specific. |
| `/templates` | copy package conditional templates section | Not independently generated in this package | no | Use same bento/token system if later generated | Keep noindex unless 12+ original/licensed apply-able templates exist. |
| Legal/contact | compliance-boundary.md | Footer links / downstream noindex pages | no | Plain text legal pages in same token system | Email aliases require launch confirmation. |

## Red lines preserved

- No copied pfpmaker.com user counts, social proof, AI photoshoot language, or visual identity.
- No platform logos or official endorsement language.
- No “100% private”, “unlimited”, or live AI generation claims.
- No Stripe/account/checkout UI in MVP design.
- AI page uses feature-state framing, not live generation promise.

## Downstream replacement contract

Replace any Stitch-generated face/anime/photo-like placeholder with original safe assets before production:

1. Abstract initials avatars.
2. Geometric crop rings and square safe-zone diagrams.
3. Self-authored gradient/blob avatar examples.
4. Product UI screenshots from the actual browser-side editor after frontend build.

Do not replace them with platform UI screenshots, copied template packs, anime/game IP, celebrity photos, or competitor-style headshots.