Sticker Gifting App Landing

---
name: bs-sticker-gifting-app-landing
description: Build a complete multi-page website with warm cream, oversized black type, coral and yellow stickers, playful gift-card artwork and bold product bands. Includes connected content pages and interactive controls, with a reusable visual system for new brands and content.
---

# Sticker Gifting App Landing

Build a complete, production-quality marketing site for a consumer gifting or
greeting app: warm cream ground, large black Bricolage Grotesque headlines,
die-cut coral and yellow stickers, gouache gift-card artwork and full-bleed
coral, sun and ink product bands. The worked example is a fictional brand,
**Gladlet**, with 11 routed pages plus 8 data-driven gift card detail pages.

`references/template.html` is the visual blueprint and a working site. Keep its
design relationships when you replace the content; do not fall back to a
generic SaaS layout. Its content is a fictional worked example: the brand,
people, shops, cities and the `gladlet.app` domain must not survive into a
buyer's page (the validator fails on them). A `SITE` constant at the top of the
script holds the brand name used in generated titles and toasts, the
collection's index route and the collection noun.

## Files

- `references/template.html`: the full blueprint (hash-routed, fictional worked example, fonts from the fontsource CDN).
- `references/images/`: the template's 17 local images (see the reuse policy under Adapting to a real brief).
- `references/style-guide.md`: tokens, type scale, spacing, radius, shadows, component anatomy, do and don't.
- `references/visual-contract.md`: the signature elements and fidelity rules per page.
- `references/image-plan.md`: art direction and every image slot with role, aspect, crop and prompt.
- `references/motion-system.md`: motion tokens, what moves and why, reveal pattern, reduced motion.
- `references/quality-checklist.md`: the pre-delivery checklist.
- `references/page-library.md`, `references/route-inventory.md`, `references/interior-pages.md`: page roles, routes and inner-page composition.
- `references/framework-adaptation.md`: stack choice, component mapping and verification.
- `references/reui-components.md`: how the template's controls map to ReUI in React outputs.
- `references/icon-library.md`: icon and sticker grammar.
- `scripts/inline-assets.mjs`: builds the single offline file (fonts and images as data URIs, each repeated image once).
- `scripts/validate-sticker.mjs`: static validator for your page, a deployed site (`--files`) and the template (`--template`).

## Workflow

### 1. Establish content and output location

Read the target repository and its instructions first. Identify the brand,
audience, products (cards, gifts, plans), occasions and the pages required,
then map them onto the template with **Adapting to a real brief** below. Ask
only for information that blocks progress. For a real business, facts come
from the brief; anything missing is drafted as clearly plausible placeholder
copy and listed in your final reply. Never use "Your Company", lorem ipsum,
real third-party brands or logos, or invented claims about real customers.
Keep unrelated files intact and put a standalone site in its own directory.

### 2. Choose the deliverable

No existing project and no stack named: build **one self-contained HTML file**
from the template, like the store demo. This is the default; do not ask a
stack question. The buyer has a framework project or asks for one: inspect it
first, never silently migrate an application, and port per
`references/framework-adaptation.md` (Next.js App Router with TypeScript when
a framework is wanted but not named): pages become real routes, collections
typed data modules, sections components. Never ship an iframe or the template
injected as raw HTML. The hash router belongs to the single-file output.

### 3. Lock the visual system

Read `references/style-guide.md` and `references/visual-contract.md`, then open
`references/template.html`. Copy the tokens block as-is before changing copy.
Fonts: Bricolage Grotesque (variable; display and UI), Figtree (variable; body)
and Caveat (variable; handwritten card messages, notes and the hero note only).
The template loads them from the fontsource CDN. In a framework project install
`@fontsource-variable/bricolage-grotesque`, `@fontsource-variable/figtree` and
`@fontsource-variable/caveat` or use `next/font/google`; for the single-file
deliverable `scripts/inline-assets.mjs` downloads each woff2 named in the
template's `@font-face` src once and embeds it as a data URI, so the page makes
no network requests.

Keep every signature element: cream ground, black display type at a calm
scale (hero 96 px / 600, no swash; one rotated yellow highlight word on inner
titles), the split phone hero on a soft butter band with exactly its few
elements (see the hero anatomy in `references/style-guide.md`), the five-tile
mosaic, three full-bleed product bands (coral card editor, sun gift cards, ink
Cash), die-cut stickers, the gift card object, the thank-you notes wall and the
ink footer with the giant wordmark. Never enlarge the hero, add elements to it
or introduce purple, violet or indigo.

### 4. Plan the page family

Read `references/page-library.md`, `references/route-inventory.md` and
`references/interior-pages.md`. Inventory every nav item, card, CTA and footer
link and give each a real destination (route or section). Collections (gift
cards, occasions, plans, help articles, roles) live in typed data modules and
render through small components. Detail pages get their own image, options,
specs, related items and a return path. Keep a designed 404.

### 5. Plan and produce the images

Read `references/image-plan.md`. Before generating anything, list every image
slot by role (gift-card artwork, greeting-card artwork, lifestyle, people,
detail, team) with aspect, crop focus and the text it sits next to. Write one
art direction sentence for the whole site and append it to every prompt. Use
the gouache illustration family for card art and warm natural-light
photography for people; never mix them within one role. No text, logos or
fake UI inside images. Review every generated image and regenerate anything
off-brief, uncanny or repetitive. Product UI (phone screens, calendars,
wallets) is built in HTML/CSS, never generated.

Set `width`/`height`, `object-fit: cover` and a deliberate `object-position` on
every image, `loading="lazy"` below the fold and meaningful `alt` text.

### 6. Build components and interactions

Use shared components for header, mobile sheet, buttons, chips, segmented
controls, fields, accordion, gift card object, greeting card face, phone frame,
sticker, drawer and toast. Implement the full cycle for each control (default,
hover, active press, focus-visible, selected, disabled, loading, success,
empty and error) as listed in `references/quality-checklist.md`. Forms validate
inline and confirm locally without claiming a message was sent or a payment
was taken.

### 7. Apply the motion system

Follow `references/motion-system.md`: content visible by default, reveals only
under a `js` class with an IntersectionObserver plus fallbacks, hero entrance
within 900 ms, route transitions of about 300 ms with scroll-to-top, one slow
occasions marquee, micro-interactions of 120 to 220 ms on transform and
opacity only, and a complete `prefers-reduced-motion` block.

### 8. Build and validate

Edit a working copy of the template (say `site/src.html`) next to an
`images/` folder holding the images it uses, then build and check the
deliverable:

```bash
node scripts/inline-assets.mjs site/src.html site/index.html
node scripts/validate-sticker.mjs site/index.html
```

The default mode is strict (offline, everything embedded, 8 MB cap) and fails
on any of the template's sample identity. A deployed site that keeps
`images/` and `fonts/` beside the page is checked with `--files`;
`--template` checks the blueprint itself. Fix every error and read the
warnings (sample first names or cities, removed features). For a framework
output run the project's type check and build instead; the validator does not
check framework source.

### 9. Review in a real browser, twice

Screenshot home and every inner route at 1440, 1024, 768 and 390 px. Critique
like a demanding designer: hero reads in one glance, no cropped faces or
subjects, no text covered by stickers, no horizontal overflow, consistent
rhythm. Click the menu, routes, filters, search empty state, sort, amount
controls, gift basket, pricing toggle, help search and every form. Fix and
repeat at least once.

### 10. Deliver

Report the output path, the stack, what was validated programmatically and
what was reviewed in the browser, plus every drafted placeholder (people,
replies, prices, dates, addresses, domain) and every generated stand-in
portrait for the buyer to confirm or replace. Do not claim deployment,
publication, real payments or message delivery unless they were actually
connected.

## Adapting to a real brief

- **Counts flex; the grammar does not.** Gift cards, products or venues are
  the `GIFTS` array (with `CATS` for the chips): the grid, chip counts, result
  count, the sun band category counts and the detail pages all follow it, so
  4 to 12 items need no CSS change (each detail page shows three related
  items). The `.fan` holds exactly four `.gcard` links to four items.
  `.plans` is `repeat(3, ...)`: two plans set `repeat(2, ...)` with the
  featured plan second, four is too many for this layout (put the fourth in
  the comparison table). `.notes` takes four (three: `repeat(3, ...)`);
  `.miles`, `.topics` and `.grid-gifts` are four-column, `.perks`,
  `.cash-facts`, `.reqs` and `.related` three. The `.bento` takes four to six
  tiles on its 6-column grid: four, drop `.t-group` and give `.t-sched`
  `grid-row: span 2`; six, add a bottom tile and set the bottom row to
  `span 2` each. Headings that state a number change with it.
- **Renaming routes.** Change `data-page`, `data-nav`, every `href="#/..."`
  and, for the collection index, `SITE.index` (the detail page renders at
  `#/<index>/<id>`). Keep `home` and `not-found`.
- **Removing a feature** (Cash, basket, pricing toggle, help search, card
  editor): delete its markup and its script block (each starts with a
  `/* ---- name */` comment). The validator fails when the script still
  queries a hook that no element carries, because that stops every control.
- **Map the sections to the business.** A florist or bakery delivery app:
  the sun band and Gift cards page become the catalogue (bouquets or boxes
  as `GIFTS`, detail pages with sizes in the amount chips), the Cash band
  becomes a gift-credit or subscription amount, the card editor stays as the
  note that ships with the order. A wedding or baby registry: occasions
  become events, `GIFTS` become registry items, the group gift tile and
  features section carry the shared fund, the basket is the registry list.
  A stationery or print shop: the editor is the product, the gift cards are
  card designs. Keep the bands, stickers and phone; change what they hold.
- **Real facts only.** For a real business, testimonials (the notes wall),
  people, team size, founding year, milestones, open roles and pay bands,
  cities, support hours, prices, plan limits, store requirements and the
  domain come from the brief. Anything missing is drafted as clearly
  plausible placeholder copy and listed in your final reply. No invented
  awards, press, certifications, regulatory, payment-security or
  data-protection claims; keep the legal page to what the buyer confirms.
- **People photos.** If the site presents a real team or founder, ask for
  their photos. Generated people (`photo-team`, `photo-group`, `photo-open`)
  are stand-ins: say so in the final reply.
- **Shipped images.** Neutral, reusable for any gifting or greeting product:
  `card-birthday`, `card-thanks`, `card-home`, `photo-wrap`,
  `photo-envelope`, `photo-cards`. Reusable as category placeholders only
  when the buyer sells that kind of thing: the eight `gc-*` artworks
  (coffee, florist, arcade, books, bakery, ramen, plants, cinema), which
  belong to the sample shops. Stand-ins to replace for a real business:
  `photo-team` (the About team), `photo-group`, `photo-open`. Regenerate
  with `references/image-plan.md` and put the buyer's brand in its art
  direction sentence.
- **Deliverable.** No project: the single file built with
  `scripts/inline-assets.mjs` (safe in a sandboxed preview). A deployed site
  may keep `images/` and `fonts/` beside the page instead (validate with
  `--files`). A framework project: port per
  `references/framework-adaptation.md` with local image and font files.
- **The hero copy changes, its anatomy does not.** New kicker, two short
  lines, one short line, the same CTA pair, note, phone, two gift cards and
  occasion switcher (its four entries are the `OCCASIONS` array).

## Replace checklist

Strings outside the data arrays that carry the sample identity:

- `<title>`, meta description, Open Graph tags and every
  page's `data-title` (`... | Gladlet`).
- `SITE` in the script: `brand`, `index`, `item`.
- The header and menu sheet wordmark (`gladlet`, `aria-label="Gladlet home"`),
  the footer giant wordmark and `&copy;` line ("Made in Portland and Lisbon").
- Data arrays: `GIFTS`, `CATS`, `OCCASIONS`, `DESIGNS` (card titles name
  Juno), `HELP` (answers name Gladlet Cash) and the How it works `FLOW`
  screens (Leo, shop names).
- The PDP spec "Yes, for Gladlet Cash at full value." in `renderPDP`.
- Hard-coded people and shops in markup: the hero phone, features (scheduled
  list, reminders, wallet and inbox), the notes wall, the How it works
  timeline, the download phone (Fern Street), About (founder, team size,
  cities, milestones, roles) and help hours ("Portland and Lisbon",
  "Pacific").
- `press@gladlet.app` (text and `data-copy`) and "at gladlet.app" on Download.
- Toast copy for store and social buttons, and plan names in `data-plan`.

## Single-file constraints

The single-file deliverable is one self-contained HTML file (target 5 MB, hard
cap 8 MB) with inline CSS, JS, fonts and images, built by
`scripts/inline-assets.mjs`. Sandbox restrictions apply when the page is
previewed inside a sandboxed iframe (a single-file demo,
`<iframe sandbox="allow-scripts">`): no network requests, no storage, no
`alert/confirm/prompt`, no `window.open`, no top navigation, no native form
submission (use `type="button"` plus Enter-key handlers), route state kept in
JS with `history.pushState` inside try/catch, and in-page anchors scrolled
from script. The template already works this way. A deployed site or
framework project does not need them. Forms confirm in-page and say that
nothing was sent until a backend is connected.

<!-- reui:stack -->
#### Interface components come from ReUI (React outputs)

The template's generic controls (buttons, fields, selects, segmented toggles,
chips, tabs, accordions, the mobile menu sheet and the gift basket drawer) are
hand-written so the template stays a single file. In a React or Next.js output,
build them from [ReUI](https://reui.io) components instead, using the mapping
in `references/reui-components.md`.

- Install from the official registry (`npx shadcn@latest add @reui/button`,
  and so on) and import from your `components/ui` directory. The component
  source also lives at https://github.com/keenthemes/reui.
- Do not substitute a native `<select>` or a `div` with matching class names
  for a ReUI control. If a control needs behaviour ReUI does not provide,
  build it explicitly and say so.
- Style through tokens: point ReUI's custom properties (`--primary`,
  `--background`, `--border`, `--radius`, font family) at this palette and
  keep the template's class names on rendered elements.
- Stickers, gift card objects, the phone mockup, bands and motion stay bespoke
  CSS; ReUI covers the interface layer, not the artwork.
- In a non-React stack, check ReUI support before promising it. A Vue or
  Svelte project cannot use ReUI directly; raise the conflict instead of
  silently swapping libraries.
<!-- /reui:stack -->