The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Sticker Shop Website

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build [BRAND], a fictional sticker shop launching [COLLECTION] for [AUDIENCE]. Cherry/lemon color blocks and original abstract rainbow die-cut shapes are the visual identity.

- Audience: [AUDIENCE] who want small, expressive objects without licensed characters.
- Goal: Filter products, inspect original art, build a six-sticker pack and manage a correctly priced local-only shopping bag.
- Tone: Playful, specific and useful about size, materials and price; no fake sales urgency or real checkout claims.

## Stack
- Framework: Vite + React + TypeScript
- Styling: Vanilla CSS
- Libraries: vite (MIT), react (MIT), react-dom (MIT), typescript (Apache-2.0), @fontsource/baloo-2 (OFL-1.1), @fontsource/nunito-sans (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Set Vite base to ./ and build.sourcemap to false. Use a single src/content.ts for all editable content and fully rewrite its data for variable changes.
  - Implement responsive components and CSS tokens in src/styles.css. Bundle fonts through the listed Fontsource packages; import only the weights actually used.
  - Provide semantic native controls and keyboard/touch alternatives; implement focus-managed dialogs and local-only validated form feedback.

## Variables
- [BRAND] — Brand (default: "Peel Parade"). Rewrite every related headline, item, label, alt and confirmation for this value.
- [COLLECTION] — Collection (default: "Everyday Orbit"). Rewrite every related headline, item, label, alt and confirmation for this value.
- [AUDIENCE] — Audience (default: "notebook keepers and desk tinkerers"). Rewrite every related headline, item, label, alt and confirmation for this value.
- [FREE_SHIPPING] — Free Shipping (default: "24"). Rewrite every related headline, item, label, alt and confirmation for this value.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/sticker-shop-website in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Cherry red `#FF2D55` — Large hero half, catalog dividers and original artwork. WCAG relative-luminance calculations: #141126 text on #FF2D55: 5.06:1; #141126 text on #FFF35C: 16.02:1; #141126 text on #FFFFFF: 18.45:1; #FFFFFF text on #254DFF: 5.86:1; #141126 text on #19C37D: 8.04:1. Use these pairs for every normal-size label/body/button. Decorative overlaps/gradients carry no text; readable text gets a solid backing.
- Lemon `#FFF35C` — Large hero half and pack-building desk.
- Ink `#141126` — Body and controls on cherry/lemon/white.
- White `#FFFFFF` — Die-cut border and product reading panels.
- Cobalt `#254DFF` — Secondary solid panels and selected pack actions.
- Leaf green `#19C37D` — Decorative sticker art and selected-count chips.

### Typography
- Display: Baloo 2 (OFL), weights 700
- Body: Nunito Sans (OFL), weights 400/700

### Layout & motion
- Spacing: 1200px max, 40px desktop/20px mobile gutters, 8px unit, 88px/52px sections. 4col catalog/2 mobile, pack desk 55/45 with 3×2 visible slots. H1 92px/54px.
- Radius: 20px product photos/panels, 12px controls, 999px category tags. Stickers have contour-following 6–10px white die-cut borders and soft shadows, not square image frames.
- Motion: Sticker hover/focus tilt maximum 3deg and a small corner curl for 160ms; tap Preview peel button toggles the same effect without adding a product. Drag can be an optional enhancement, never required to fill slots.
- Motion: Cart drawer 200ms slide, reduced motion instant; no floating sticker loop, cursor replacement or motion that hides prices.
- Imagery: Four unified photorealistic tabletop product images with hard-soft daylight, cherry red/lemon colored surfaces, unbranded notebooks and mailers, original abstract rainbow die-cut stickers with clean white edges. No existing characters, faces, logos, slogans or lettered sticker designs. Product thumbnails are original inline SVG artworks with the exact recurring original motifs, not random emoji. Use photography for physical storefront credibility and SVG for precise selectable items. Any visible hand belongs to a fictional person, no face.

## Pages & Sections
### [BRAND] — Tiny things, loud personality (`index.html`)
1. **Cherry lemon storefront** — Header [BRAND], Shop, Build a pack, The details, 'Bag (0)'. Announcement 'Illustrative US shipping: $4, free at $[FREE_SHIPPING]'. H1 'Tiny things. Loud personality.' Intro '[COLLECTION]: original rainbow shapes for [AUDIENCE]. Pick a favorite. Make a mix. Give your everyday things a little more you.' CTAs 'Shop the collection' and 'Build six for $18'. Visible badge 'Fictional shop • local cart demo'. Hero figure caption 'Original concept stickers, photographed in a generated tabletop scene'. Small print 'No licensed characters. No order is processed here.' Scattered SVG products use the same designs as catalog, not copied mascots. Add-to-bag never auto-triggered by peeling.
   Layout: Hero split 48% cherry #FF2D55 and 52% lemon #FFF35C, each large >=30% first-screen block. Ink #141126 92px Baloo2 H1 on cherry, bright hero-flatlay.webp inside 500×420 lemon frame with 3 separate original die-cut SVG accents and shadows. No white-on-cherry small text. Mobile 54px H1, stacked photo >=330px wide. Header lemon/ink, no neutral first-screen fallback.
   Motion: Once-only 6px arrival; subtle focus/tap peel, no constant drift.
2. **Shop original shapes** — Heading 'Choose a little everyday energy.' Filters Type All / Singles / Packs, Theme All / Space / Shapes / Nature; Sort Featured / Price low to high. Result count and Reset. Eight singles in USD: Orbit Bloom $3.50, Space, 2.4in, six-petal cobalt/coral flower enclosed by an irregular orange orbital ring; Tangled Comet $4, Space, 2.8in, lime capsule core with three looping magenta/cyan tails; Rainbow Loop $3.50, Shapes, 2.5in, asymmetric rainbow ribbon knotted once with no known symbol; Wavy Ladder $3, Shapes, 2.2in, bent cobalt ladder with alternating rounded yellow bars; Sunny Puddle $3, Nature, 2.3in, irregular orange puddle with small yellow arc rays; Zigzag Sprout $3.50, Nature, 2.6in, green zigzag stem with three asymmetric pink leaves; Pebble Stack $3, Shapes, 2.4in, four offset irregular rainbow pebbles; Dotted Moon $3.50, Space, 2.3in, purple irregular crescent with cyan dots and small orange square orbit. No faces, text or known characters. Two prepared packs: Desk Trio $9 contains Orbit Bloom/Wavy Ladder/Sunny Puddle; Full Spectrum $22 contains all eight once. Show actual included sticker thumbnails in pack cards. Every single/pack detail dialog shows size, exact contents, price, 'Illustrative material: matte laminated vinyl; intended for clean dry smooth surfaces', care note 'Avoid heat and heavy abrasion; no durability testing is claimed', qty1–6 and 'Add to demo bag'. Missing results state and local counts work. No fake stock or sale tags.
   Layout: White #FFFFFF catalog with ink #141126 labels, cherry #FF2D55 header stripe and lemon #FFF35C filter rail. 4col desktop/2col mobile, artwork occupies 70% card height over alternating cherry/lemon/cobalt fields; names/prices on opaque white. Strong white die-cut contours, no emoji stand-ins. Theme tags cobalt #254DFF/white.
   Motion: 160ms tilt/peel on focus or hover, separate Preview peel button on touch; keep art and price readable.
3. **Six-slot custom pack desk** — Heading 'Make a pack that looks like you.' Fixed custom pack price $18 for six singles, max two copies of any one design. Show six numbered slots, each chosen name/art and Remove button. All eight single-design picker buttons show + Add and current qty/2, disabled explanation at duplicate limit or full pack. Adding fills next empty slot; removing compacts list. Count '4 of 6 chosen' etc updates aria-live, empty slots contain 'Choose a sticker', not broken images. Optional drag allowed only alongside full button controls. Reset pack, 'Fill with a surprise mix' uses deterministic six distinct designs seeded by local click count (not claim random stock), and Undo last add are real. Summary lists each design and qty, fixed total $18. 'Add custom pack to demo bag' disabled until exactly six with explanation, then adds immutable snapshot of six IDs/quantities, opens cart, keeps builder intact with 'Added — edit this mix or reset'. A later edit never mutates existing cart snapshot. Duplicate identical snapshots merge quantities, different mixes remain separate lines.
   Layout: Lemon #FFF35C main section/ink #141126 copy; left 55% picker grid, right 45% cobalt #254DFF desk with white #FFFFFF slot surfaces and dark names. Slots 3×2 desktop and mobile with 100px min width, compact remove controls44px outside art. Add button cobalt/white, selected counter leaf green #19C37D/ink. pack-layout.webp horizontal inspiration photo below heading, clearly separate from interactive slots.
   Motion: Slot changes instant, optional short 120ms border emphasis; no essential drag.
4. **Materials and small rituals** — 'A little peel. A better-looking notebook.' Photo peel-hand.webp with original sticker lifting from white backing, no face. Three specific notes: 'Smooth surface first' — Wipe dust away and let the surface dry; 'Start at one edge' — Press slowly from the center outward; 'Keep the art yours' — All designs here are original geometric concept artwork, not licensed characters. Product material is illustrative, no dishwasher/waterproof/outdoor promise. Adjacent pack-mailer.webp shows unmarked packaging. 'What is inside a pack?' disclosure explains singles, prepared packs and six-choice custom packs use the same visible original designs. No invented eco-certification or manufacturing origin.
   Layout: Cherry #FF2D55 band with ink #141126 headings and opaque white #FFFFFF note panels. 2col photographs/notes; lemon #FFF35C caption bars. Mobile one photograph then notes then mailer, no carousel needed.
   Motion: Photo corner peel only on explicit preview, reduced motion no tilt.
5. **Fictional review wall** — Heading 'Little objects, personal places.' Immediate visible sublabel 'Fictional sample reviews for this shop demo — not verified purchases.' Four invented notes: Mae Rowan, Notebook keeper — 'The odd little ladder makes my sketchbook easy to spot in a stack.'; Ivo Lane, Desk tinkerer — 'I made a mix with one loud shape for every plain thing on my desk.'; Nina Quill, Journal maker — 'The colors work together without every sticker needing to match.'; Eli Fen, Craft friend — 'Choosing six was the fun part. I liked seeing the whole mix before adding it.' No aggregate rating, review totals or verified badges. Optional Favorite quote button highlights one locally without claiming social proof. Reviews are sample copy, not real customer evidence.
   Layout: Cobalt #254DFF wall with white #FFFFFF title; 4 slightly tilted lemon #FFF35C and white notes with ink #141126 body, 2col desktop/1mobile. Small original decorative sticker motifs in corners, no initials avatars needed because these are quotes, not staff portraits.
   Motion: Focus straightens note; reduced motion all notes static.
6. **Local bag, useful questions and footer** — Cart drawer available from header and add actions. Line keys single:<id>, prepared:<id>, custom:<sorted composition IDs/counts>; each displays art, label, size if single, custom contents if pack, qty1–6, unit price, line subtotal and Remove. Calculate integer cents, subtotal=sum(unit×qty); shipping $4 if subtotal>0 and subtotal<FREE_SHIPPING, otherwise0; tax label 'Not calculated in this demo', total=subtotal+shipping (label estimate). Show '$X away from illustrative free shipping' only when applicable. Empty bag 'Your mix starts with one small thing' and Shop button. Clear bag, Continue shopping, Download local bag list .txt. Explicit note beside primary download 'Local demo only. No order, stock check, payment or message is sent.' Do not include Checkout or fake success receipt. Persist bag in namespaced localStorage and handle corrupt data by clearing safely; no personal data fields. FAQ: 'Are the characters licensed?' — No characters; original abstract artwork; 'Can I really order here?' — No, only a local bag list; 'Can I change a custom mix?' — Edit builder and add a new snapshot, remove old line if desired; 'Are these durability claims tested?' — No, illustrative product details only. Footer [BRAND], [COLLECTION], Back to shop, local demo note, no dates.
   Layout: Footer lemon #FFF35C/ink #141126 with cherry #FF2D55 strip. Drawer white #FFFFFF/ink, cobalt #254DFF/white primary action, lemon totals panel; 440px desktop width or full mobile. Trap focus, restore opener, Escape/outside close, scroll lock; 44px qty controls and no clipped custom contents.
   Motion: Drawer200ms, reduced motion instant; aria-live totals and add status.

## Assets
- font: Self-host Baloo 2, Nunito Sans using the Fontsource packages listed in Stack; OFL-1.1, no external font requests.
- image: Download https://media.vibefather.ai/assets/99f46bbf-fbec-4d1b-b2bd-6ba584fbe3a7/hero-flatlay.webp to public/images/hero-flatlay.webp and reference only the local relative URL. Alt: Original rainbow die-cut sticker shapes on a cherry and lemon tabletop. Used in hero. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Record URL, path, alt, generator and this permission in ASSETS.md. The asset is supplied after generation/upload; fail clearly if it cannot download, never replace it with unrelated stock or a broken placeholder.
- image: Download https://media.vibefather.ai/assets/99f46bbf-fbec-4d1b-b2bd-6ba584fbe3a7/pack-layout.webp to public/images/pack-layout.webp and reference only the local relative URL. Alt: Six original stickers arranged as a custom pack. Used in pack builder inspiration. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Record URL, path, alt, generator and this permission in ASSETS.md. The asset is supplied after generation/upload; fail clearly if it cannot download, never replace it with unrelated stock or a broken placeholder.
- image: Download https://media.vibefather.ai/assets/99f46bbf-fbec-4d1b-b2bd-6ba584fbe3a7/peel-hand.webp to public/images/peel-hand.webp and reference only the local relative URL. Alt: A fictional hand peeling an original ladder sticker. Used in materials section. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Record URL, path, alt, generator and this permission in ASSETS.md. The asset is supplied after generation/upload; fail clearly if it cannot download, never replace it with unrelated stock or a broken placeholder.
- image: Download https://media.vibefather.ai/assets/99f46bbf-fbec-4d1b-b2bd-6ba584fbe3a7/pack-mailer.webp to public/images/pack-mailer.webp and reference only the local relative URL. Alt: Original stickers beside a plain open mailer. Used in packaging note. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Record URL, path, alt, generator and this permission in ASSETS.md. The asset is supplied after generation/upload; fail clearly if it cannot download, never replace it with unrelated stock or a broken placeholder.
- image: Author eight original contour-cut sticker designs as inline SVG exactly as catalog describes, with 6–10px white die-cut borders and a consistent saturated rainbow palette. Draw from scratch, no emoji, external illustration, known mascot, copied artwork or logo. Reuse actual design components in cards, builder slots and cart; record as original AI-created project artwork in ASSETS.md.

## Don'ts
- Build a static-only demo: no backend, API routes, databases, authentication, payments, third-party APIs, analytics, telemetry, or forms that send network requests. Confirmations must explicitly say local demo; never claim an order, booking, generated service result, or email was sent.
- Use Vite base ./, relative local assets, hash routes or real .html filenames; no bare-directory links. Direct-open every route and ensure any detail route without an ID renders its first item. Build minified dist/ with npm run build, no source maps or source files, total dist under 20 MB.
- Keep all editable copy, fictional sample data, prices, interaction labels, alt text and A/B content in a single src/content.ts module. Keep 3–6 variables. When variables change, rewrite all related content consistently; never leave the default brand or subject in the second case.
- All visible language and alt text use US English. Do not render calendar dates, years, dated copyright lines, fake freshness or popularity metrics. Operational weekdays and times, track durations, relative timers, issue identifiers and dimensions are permitted.
- Use only original code/art/copy, permissive MIT/ISC/BSD/Apache/CC0 dependencies and locally bundled OFL fonts. No copied site code, existing logos, famous characters, commercial fonts, restricted components or recognizable real-person likeness. List every font, dependency and generated artwork in ASSETS.md with source and license.
- Everything is local at runtime: no hotlinked pictures, font CDNs, remote scripts, remote music or placeholder-image services. Download exactly the specified template-hosted images before build; record full source URL, target path, alt text and generated credit in ASSETS.md.
- At 1440×900 and 390×844 keep zero console errors and no horizontal overflow. Touch targets at least 44px, visible keyboard focus and labeled inputs, Escape/outside close and focus restore for dialogs, drawer focus trap, scroll lock and aria-live for result changes. Hover effects need equivalent focus/tap paths.
- Respect prefers-reduced-motion: remove looping transforms, scroll scrub and parallax, show final static states, never autoplay audio/video, no flashing, strobe or rapid full-screen luminance changes. Do not hide essential content pending animation.
- Preserve the assigned palette with at least two strong hero colors occupying large areas. No neutral cream/charcoal fallback, no gradients behind normal text, no low-contrast small labels. Use the calculated AA text/background pairs in Design.
- Never use recognizable existing characters, mascots, game/anime art, real logos, slogans, copyrighted sticker designs, copied product photos or emoji substitutes. Generated realistic product photos and original SVG art share the same abstract motifs; no faces or identifiable people.
- The six-slot builder must actually track selections/removals/limits and immutable cart snapshots; no inert slots, fake Add buttons or drag-only controls. Cart cents, quantity, pack contents and shipping must calculate correctly. No Checkout, payment, order confirmation, real stock promise, email form or network request.
- Sample reviews must be clearly fictional and unverified next to the review wall. No invented real customers, aggregate ratings, verified purchase labels, durability certification, origin or eco claim.
- For Layer Picnic rewrite all product names, pack names, prices, collection text, review names/quotes and audience use cases around craft-club journaling. Keep eight original geometric motifs and four consistent no-logo photos as generic physical product placeholders, same local formulas and six-slot architecture; update fixed custom-pack price and all labels consistently if changed. No default shop/collection/audience remains.

---
— Prompt by VibeFather · https://vibefather.ai/t/sticker-shop-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.