` — drag handle keyboard-operable with arrow keys. - **Before image**: ` Product photo before: original smartphone snapshot on wooden table

`. - **After image**: ` Product photo after: studio-quality white background with professional lighting

`. - **Dialog**: `role="dialog" aria-modal="true" aria-labelledby` with focus trap and Esc-to-close. - **Live regions**: `aria-live="polite"` for generation-complete status messages. ### Keyboard Navigation - Tab order: skip-link → masthead nav → primary CTA → before-after panel drag handle → feature section → pricing → footer. - Before-after slider: Left/Right arrow keys adjust reveal by 5%; Home/End go to 0%/100%. - Esc closes dropdowns, modals, and the mobile nav sheet. ### Screen Reader Hints - Before-after panels carry descriptive `alt` text on both images. - Icon-only buttons carry `aria-label`. - The brand-pink featured pricing badge carries `aria-label="Recommended plan"`. ### Reduced Motion Honoured globally. Before-after auto-reveal skips animation; all translate-up fades collapse to opacity-only; badge pop removes the scale. ## 10. Responsive Behavior ### Breakpoints | Name | Width | Use | |---|---|---| | Mobile | < 640px | Single-column stack; full-bleed comparison panels | | Tablet | 640–1024px | 2-column feature grid; headline above panel stacked | | Desktop | 1024–1280px | Full split hero; 3-column feature grid; full nav | | Wide | > 1280px | Page locks at 1280px; gutters expand | ### Touch Targets - Minimum tap target: 44×44px on all interactive elements. - Primary pill CTAs on mobile: full-width (100%) at 48px height minimum. - Before-after drag handle: 44px touch area regardless of visual handle size. - Nav hamburger: 44×44px minimum. ### Collapsing Strategy - **Header**: full nav at ≥1024px; hamburger sheet below. Primary CTA always visible — on mobile it migrates to the bottom of the hamburger sheet and bottom of the hero section. - **Hero**: 55/45 split → headline-first stack (headline → CTA → comparison panel) on mobile. - **Headline**: 72px → 52px → 40px across desktop / tablet / mobile. - **Feature grid**: 3-up → 2-up → 1-up across breakpoints. - **Section spacing**: 128px → 96px → 64px across sizes. - **Card padding**: 24px → 20px on mobile. ### Image Behavior - Before-after panels: serve `srcset` with 2× resolution assets for Retina; aspect ratio locked via CSS `aspect-ratio`. On mobile, height is capped at `100vw` (square). - Feature images: native lazy-loading; descriptive `alt`. - Hero panel: may use a static image on initial paint, swapping to interactive comparison on `load` event. ### Container Queries Used inside feature cards to switch icon-top to icon-left layout when the card container width crosses 280px — allows the 3-column grid to reflow gracefully without global breakpoint coupling. ## 11. Content & Voice ### Tone **Fast, confident, and seller-first.** Picoko writes for the Shopify merchant or Amazon seller who is juggling product launches with zero budget for a photographer. The copy is direct, quantified where possible ("studio-quality photos in seconds"), and never condescending. No AI hype jargon ("harness the power of…"); just the outcome the seller cares about. ### Microcopy Patterns - **Button verbs**: "Get started," "Try for free," "Generate photos," "See plans," "Upload product." Never "Begin your journey" or "Unlock AI power." - **Eyebrows / labels**: "FOR SHOPIFY SELLERS," "USED BY 10,000+ BRANDS," "NO PHOTOGRAPHER NEEDED." Plain, uppercase, factual. - **Feature descriptions**: one sentence — the capability, then the benefit. "Remove backgrounds in one click — your product, ready for any platform." - **Error messages**: "Couldn't generate that image. Try a different background or upload a clearer photo." — diagnose, suggest, move on. - **Success confirmations**: "Photo generated. Download or edit." Brief, actionable. - **Loading states**: "Generating…" with a subtle pink progress bar. No "Our AI is thinking magical thoughts…" ### Empty States - *"Upload your first product photo to get started."* — clear invitation, no guilt. - *"No generated photos yet. Try 'Studio background' to create your first batch."* — point to a specific action. - Never uses "Oops!" Never implies the user did something wrong unless they actually did. ### CTA Verb Conventions - Primary hero: "Get started free," "Generate photos now," "Try Picoko" - Secondary hero: "See how it works," "Watch a demo" - Pricing: "Start free," "Choose Pro," "Contact sales" - Footer: "Pricing," "Integrations," "Blog," "Help" The voice is **outcome-first**: tell the seller what they'll have (studio-quality photos, in seconds, for Shopify), not what Picoko is doing internally. The product is the magic; the copy is the shortcut to the result. ## 12. Dark Mode & Theming Picoko ships a genuine light + dark theme toggle — a first-class UI element in the nav, not an afterthought. The live-probed default is **light** (the warm near-white canvas `#fbfaf8`). Dark mode inverts to a warm near-black canvas (`#0d0c0b`) with near-white body copy (`#f5f4f2`). ### What Changes in Dark Mode - **Canvas**: `#fbfaf8` → `#0d0c0b`. Warm temperature maintained in the dark shift (warm near-black, not cool neutral). - **Surface**: `#ffffff` → `#1f1e1c`. Cards remain visibly lighter than the canvas. - **Text**: `#121110` → `#f5f4f2`. Body copy stays near-white, not full white, to avoid harshness. - **Borders**: `rgba(18,17,16,0.08)` → `rgba(245,244,242,0.08)`. Same 8% opacity, flipped channel. - **Shadows**: warm-dark at low opacity replace the warm-light versions. ### What Does Not Change - **Brand pink** `#fe1c71` — invariant across both themes. The contrast ratio on dark canvas (`#0d0c0b`) is approximately 3.9:1 — slightly higher than on light, still AA-large for CTAs. The electric quality of the pink is maintained and arguably enhanced against the dark ground. - **Radius scale** — unchanged. - **Typography** — unchanged; Outfit at all weights and sizes is stable across themes. - **Motion** — unchanged. ### Theme Persistence Preference is written to `localStorage` under a key (e.g. `picoko-theme`). On next visit, the stored value is applied before first paint (inline script in ``) to prevent flash of wrong theme. `data-theme="light"` or `data-theme="dark"` on `` drives all CSS custom property swaps via `:root[data-theme="dark"] { ... }` blocks. `prefers-color-scheme` is the initial fallback when no localStorage key exists. ### Before-After Panels in Dark Mode The comparison images themselves are unaffected by theme (they show the user's product). The panel frame — border, drag handle — flips to dark-theme tokens. The brand-pink drag handle remains `#fe1c71` in both themes. ## 13. Lineage & Influences Picoko inherits the joyful-SaaS playbook refined by Framer, Luma, and modern freemium B2C tools: a geometric sans at maximum weight, a single electric accent colour quarantined to primary actions, and a warm canvas that reads approachable rather than corporate. The 32px pill CTA places Picoko in the same shape language as Notion, Pitch, and early Framer — a register that says "this is a tool people choose, not enterprise software people are assigned." Outfit as the type system is the key differentiator from the design-tool SaaS tier (which defaults to Inter, Söhne, or Suisse Intl). Outfit's rounded stems and open apertures read as warm and friendly at 400; at 900 they become bold without feeling aggressive. The choice signals that Picoko's user is a Shopify merchant, not a design-system engineer. The before-after comparison slider is a well-established pattern in image-editing SaaS — Luminar, Lightroom mobile, Canva's background remover — and Picoko uses it as the hero's primary product demonstration. It's a borrowed pattern, executed at 16px radius with a brand-pink drag handle to make it distinctly Picoko. What Picoko rejects: dark canvases (Krea, Midjourney, Runway), monochrome restraint (Linear, Vercel), editorial neutrality (Stripe), and AI-purple gradients (every third AI startup). The brand wants to be unmistakably warm, bright, and fast — the opposite register from the creative-AI gallery aesthetic. **Named influences:** - **Krea** — AI image-generation SaaS peer; Picoko applies similar single-accent discipline to the opposite palette (warm light instead of absolute dark). *https://krea.ai* - **Midjourney** — reference for AI image-generation brand positioning; Picoko explicitly differentiates by going warm/light where Midjourney goes dark/editorial. *https://www.midjourney.com* - **Shopify** — primary distribution platform for Picoko's end-customers; Polaris design language informs e-commerce UI conventions that sellers already know. *https://www.shopify.com* - **Outfit (Google Fonts)** — the typeface that carries the entire system; geometric grotesque with rounded stems chosen for friendly-SaaS warmth at heavy weights. *https://fonts.google.com/specimen/Outfit* - **Framer** — modern playful-SaaS aesthetic reference: pill CTAs, warm canvas, heavy geometric sans, freemium conversion UX patterns. *https://www.framer.com* - **Canva** — before-after image comparison patterns; approachable creative-tool register aimed at non-designer users. *https://www.canva.com* ## 14. Do's and Don'ts ### Do - **Do** use `#fe1c71` for every primary CTA — and only for primary CTAs and brand marks. One use, one role, maximum impact. - **Do** set hero headlines in Outfit weight 900 at 72px with -0.03em tracking. The heaviness is the brand's loudest signal. - **Do** maintain the warm canvas temperature. `#fbfaf8` is not `#f5f5f5` or `#fafafa` — the warmth matters. - **Do** use 32px pill shape for primary and secondary CTAs. Never 8px or straight-edge for a primary action. - **Do** use 16px radius on cards and comparison panels — the brand's mid-tier signature shape. - **Do** keep white cards (`#ffffff`) on the warm canvas (`#fbfaf8`) — the surface step is the primary depth cue. - **Do** use `#c0004e` (darker pink) for small-size pink text where contrast matters — never `#fe1c71` at body size. - **Do** show a before-after image comparison as the hero's right-column content — it demonstrates the product thesis in a single glance. - **Do** add the `aria-label` and keyboard controls on the before-after slider — it's a non-standard interactive element. - **Do** keep the brand pink invariant across light and dark themes. - **Do** pace sections at 80–128px vertical rhythm. The page should feel fast but not anxious. - **Do** write CTA verbs in outcome-first imperative: "Get studio-quality photos," "Generate now," "See plans." ### Don't - **Don't** use `#fe1c71` as a background for a full-width section unless it is an intentional CTA band (bottom of page). A pink hero canvas would overwhelm. - **Don't** use `#fe1c71` as body text at small sizes — the 3.3:1 contrast fails WCAG AA for text below 18px normal / 14px bold. - **Don't** mix a second accent colour into the system. The pink's impact depends on isolation. - **Don't** use weights below 600 for CTAs, or below 400 for body. Outfit at 300 loses brand warmth. - **Don't** use a dark canvas for the marketing surface — the product's visual brand is warm, light, and fast. - **Don't** use shadow-only depth — always pair with the surface step (`#fbfaf8` → `#ffffff`). - **Don't** apply negative tracking below h4 — Outfit's openness at body sizes is part of its warmth; closing the tracking looks forced. - **Don't** use sharp 0px or 4px radius on CTAs — pill shape is the non-negotiable signature. - **Don't** use purple, indigo, or gradient-mesh AI aesthetics — Picoko differentiates by being the warm, fast, approachable tool in the category. - **Don't** add exclamation marks or hyperbole to CTA copy. The product's value is self-evident; the copy just names the outcome. - **Don't** use Outfit weight 900 below 36px — it becomes too heavy and loses legibility at body scales. - **Don't** ignore the warm temperature shift in the dark palette. Dark mode uses warm near-black (`#0d0c0b`), not neutral cool dark (`#111111`). ## 15. Agent Prompt Guide ### Quick Color Reference ``` Light theme: bg: #fbfaf8 bg-alt: #f5f3f0 surface: #ffffff text: #121110 text-muted: #6b6663 text-soft: #9c9793 brand: #fe1c71 brand-deep: #e5005c on-brand: #ffffff border: rgba(18, 17, 16, 0.08) border-strong: rgba(18, 17, 16, 0.16) Dark theme (derived): bg: #0d0c0b surface: #1f1e1c text: #f5f4f2 text-muted: #9c9793 brand: #fe1c71 ← same border: rgba(245, 244, 242, 0.08) ``` ### Example Component Prompts 1. **"Create a Picoko-style hero — warm near-white `#fbfaf8` canvas split 55/45. Left column: 72px headline in Outfit weight 900, tracking -0.03em, colour `#121110`; 18px / 400 sub-headline in `#6b6663`; one hot-pink `#fe1c71` pill CTA 'Get started free' at 32px radius / Outfit 600 / 16px / padding `12px 28px`. Right column: 1:1 before-after image comparison panel, white background, 16px radius, brand-pink drag handle at centre."** 2. **"Design a Picoko feature card — `#ffffff` background on `#fbfaf8` canvas, `1px solid rgba(18,17,16,0.08)` border, 16px radius, 24px padding, `rgba(18,17,16,0.06) 0 2px 12px` shadow. Icon at top (48px, brand-pink). Heading: Outfit 700 / 22px / `#121110`. Body: Outfit 400 / 16px / `#6b6663`. On hover, shadow deepens to `0 6px 24px`."** 3. **"Build a Picoko pricing tier — 3 cards in a row on `#fbfaf8` canvas. Default cards: `#ffffff`, 16px radius, `1px solid rgba(18,17,16,0.08)` border, 28px×24px padding. Featured (Pro) card: `2px solid #fe1c71` border, `rgba(254,28,113,0.12) 0 8px 32px -4px` shadow, pink eyebrow 'Most popular' at Outfit 600 / 12px / uppercase. Plan price: Outfit 800 / 48px. CTA: full-width pink pill 'Choose Pro' 32px radius."** 4. **"Compose a Picoko navigation — 64px header, `rgba(251,250,248,0.90)` background with `backdrop-filter: blur(16px)`. Wordmark left: Outfit 700 / `#121110`. Links centre: Outfit 500 / 15px / `#121110`, 8px radius hover fill `rgba(18,17,16,0.05)`. Right: ghost 'Sign in' + pink pill 'Get started' at `#fe1c71` / `#ffffff` / Outfit 600 / 15px / 32px radius / `12px 24px` padding."** 5. **"Render a Picoko before-after comparison panel — `#ffffff` surface, 16px radius, 1:1 aspect ratio, no padding (images bleed to radius). Left half shows original product snapshot; right half shows AI-generated studio shot on white background. Vertical drag handle at 50% position: 40px tall, `#fe1c71` pill-shaped bar, white arrow icons. Hover hint: 'Drag to compare' in Outfit 500 / 12px / `#9c9793` fading in at 500ms."** 6. **"Create a Picoko platform badge row — 3 neutral pill badges in a horizontal flex. Each: bg `rgba(18,17,16,0.06)`, text `#6b6663`, Outfit 500 / 12px, padding `6px 14px`, radius 9999. Labels: 'Shopify', 'Amazon', 'TikTok Shop'. Preceded by an eyebrow label 'WORKS WITH' in Outfit 600 / 12px / uppercase / 0.1em tracking / `#9c9793`."** ### Iteration Guide 1. **Start with the warm canvas.** If you're using `#f5f5f5` or `#fafafa`, it's cold. Picoko's `#fbfaf8` has a faint red-green warmth — run it through a colour picker and verify the R channel is ≥ the B channel. 2. **Brand pink once per visual unit.** In a hero, `#fe1c71` should appear once — the primary CTA. In a card grid, once per card at most (the CTA or a badge). The moment pink appears twice at similar visual weight, the hierarchy collapses. 3. **Weight 900 means weight 900.** If your Outfit headline is rendering at 800 or 700, the brand's signature loudness is gone. Confirm via DevTools computed styles that font-weight resolves to 900. 4. **32px radius on CTAs is non-negotiable.** An 8px or 12px radius on the primary CTA loses the consumer-SaaS register. If the design system forces a global radius, override it for CTAs specifically. 5. **Surface step before shadow.** Add the `#ffffff` card on `#fbfaf8` canvas first — that surface step delivers most of the depth. Add shadow (`0 2px 12px`) as a secondary reinforcer, not the primary depth cue. 6. **Keep `#c0004e` in your palette for pink text.** Whenever you need to write pink text at body size (12–16px), switch from `#fe1c71` to `#c0004e` — darker enough to pass WCAG AA on white while still clearly brand-adjacent. 7. **Dark mode: warm the near-black.** Don't use `#111111` or `#0f0f0f`. Picoko's dark canvas is `#0d0c0b` — the warmth matches the light palette's temperature. A cool dark ground creates a jarring inconsistency when the user toggles. 8. **CTA verbs: outcome, not process.** Replace "Try our AI" with "Generate photos." Replace "Sign up today" with "Start free." Every CTA should complete the sentence "I want to ___." --- *Theme-toggle audit: score=7, signals=[theme-toggle-button-text, prefers-color-scheme-css, tailwind-dark-class]*