Green Pharmacy Storefront

---
name: bs-green-pharmacy-storefront
description: A multi-page online pharmacy storefront with a lime-green hero, upload-prescription card, pastel category tiles, deal grids, tabbed trending products, brand row, promo tiles, FAQ accordion and a dark-green footer, plus catalog, product detail, cart, checkout, consultation, prescriptions, brands, FAQ, about and contact pages. Every page is fully designed with fictional products, brands and pharmacists, and the cart, filters and forms work in the browser. Ideal for pharmacies, wellness shops and health-delivery services that want a bright, trustworthy store ready to fill with their own range.
---

# Green Pharmacy Storefront

Build a bright, trustworthy online pharmacy in the green pharmacy style: a
32px-radius lime hero frame with a one-line navy "Get well." heading, a
short lede with two trust badges, a pharmacist cut-out rising from the bottom
edge and a white upload-prescription card above a navy button (keep that
hero's composition, scale and few elements exactly; refine, never enlarge); six pastel category tiles of hands on flat colour; grey product cards
with white photo wells and yellow deal pills; a yellow and peach service duo;
monogram brand discs; a tabbed trending grid; pastel promo tiles; an aqua
feature banner with flavour bars; grey FAQ pills that turn lime when open; and
a forest-green footer that ends in a lime band with a centred wordmark. No
purple, lilac or lavender anywhere.

`references/template.html` is the visual and behavioural blueprint, filled
with a fictional worked example (Fernwell Pharmacy, Port Alder). It already
contains the router, cart, variant, filter, search, booking, form and reveal
engines, and renders every collection from data arrays at the top of its
script. Its images sit beside it in `references/images/`; its fonts load
from the fontsource CDN (see Fonts).

## Workflow

1. **Gather the content story.** Shop name and city, delivery promise and
   areas, services (consultations, prescriptions, membership), a product list
   with categories, prices, pack sizes or flavours, discounts and short label
   facts, the brands to feature, pharmacists (name, credentials, focus, days),
   opening hours and contact details. Map the brief with **Adapting to a
   real brief** below. Anything the brief does not give is drafted as
   plausible placeholder copy in the template's plain, warm voice and listed
   in your final reply. Never use real pharmaceutical brands the buyer does
   not stock, real people who are not the buyer's staff, or real logos. Do
   not invent efficacy or dosage claims; use label-style facts and "follow
   the dose on the pack".

2. **Choose the deliverable.** No existing project: 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, keep unrelated files, and port
   per [references/framework-adaptation.md](references/framework-adaptation.md)
   (Next.js App Router with TypeScript when a framework is wanted but not
   named): pages become real routes, the arrays become typed data modules,
   sections become components. Never wrap the HTML in an iframe. The
   single-file hash router belongs only to the single-file deliverable.

3. **Read the design contract** before writing UI:
   [references/style-guide.md](references/style-guide.md) (tokens, type
   scale, components, do/don't) and
   [references/visual-contract.md](references/visual-contract.md) (what must
   survive any port). Non-negotiables: lime is a surface and navy is the
   voice; one pastel per tile and never two neighbours in the same pastel;
   product photos are complete packs on white inside a grey card; deals wear a
   yellow pill and a struck-through price; Bricolage Grotesque for display,
   Geist for text, Geist Mono only for codes and timers (see Fonts below);
   every icon is an inline Lucide-style SVG.

4. **Plan pages and routes** with
   [references/page-library.md](references/page-library.md) and
   [references/route-inventory.md](references/route-inventory.md). The
   storefront engine always ships: home, shop, product detail, cart,
   checkout and a designed 404. Add at least four other pages from the
   brief (in the worked example: consultation, prescriptions, membership,
   brands, help/FAQ, about, contact, account, app, delivery and returns,
   privacy, terms), always including one with a real form (contact, booking
   or prescription upload) plus privacy and terms. Keep the home order and
   drop whole sections rather than thinning them. Inner pages follow
   [references/interior-pages.md](references/interior-pages.md): real tools
   (booking, upload, filters, comparison tables), never a heading and two
   sentences.

5. **Plan the imagery by role before generating anything.** Follow
   [references/image-plan.md](references/image-plan.md), including its
   reuse policy for the shipped images: write one art
   direction sentence, then list every slot (hero cut-out, six category
   tiles, product packshots, pharmacist portraits, feature still life, store
   interior) with role, aspect, crop focus and prompt. Generate packshots as
   one coherent set (same white backdrop, light, angle, and normalised scale),
   generate portraits on the pastel of the tile they sit on, cut the hero
   pharmacist from a flat lime backdrop so she can rise from the frame edge,
   and look at every result before using it. No text in images, no fake UI,
   no real brands. Use `object-fit` and `object-position` deliberately.

6. **Copy the template and fill the slots.** Copy `template.html` next to an
   `images/` folder holding the images you use. Replace the data arrays
   (`STORE`, `AREAS`, `CATEGORIES`, `BRANDS`, `PRODUCTS`, `TEAM`, `REVIEWS`,
   `FAQS`), work through each `REPLACE` comment and delete it, then go
   through the **Replace checklist** below. A product needs `id`, `name`,
   `brand`, `cat`, `img`, `options` (each with its own price, optional
   `was`, `count`, `stock`), optional `flavours`, `blurb`, `benefits`, `use`,
   `details` and three `facts`; its card, detail page, cart line, search
   result and related items are generated from that one entry. Rename pages
   freely: the router reads the page list from the `data-page` sections, so
   change `data-page`, `data-title` and every `href="#/..."` together. The
   engine pages `shop`, `product`, `cart`, `checkout` and `faq` are also
   named in `render()`; keep those slugs or rename them there too.

7. **Apply the motion system** in
   [references/motion-system.md](references/motion-system.md): content is
   visible without JavaScript; one calm hero entrance; reveals with an
   IntersectionObserver safety net; 280 ms route fade with scroll to top and
   focus on the new h1; 120 to 220 ms micro-interactions; everything off under
   `prefers-reduced-motion`.

8. **Make every interaction real.** Mobile menu sheet with focus trap and
   Esc; delivery-area popover that updates times across the site; search
   with suggestions and keyboard navigation; catalog filters, sort, search,
   active-filter chips and an empty state; product variants that change price,
   per-unit price and stock state; mini-cart drawer with steppers, remove with
   undo, free-delivery meter and subtotal; promo codes with inline errors;
   checkout with validation, slots and a clear "no payment is taken" step;
   consultation booking (topic, format, pharmacist, day, time); file
   echo for prescriptions; toasts after every action. Use
   `<button type="button">` for submits (see Single-file constraints).

9. **Build and validate.** Build the deliverable from your source page:
   `node scripts/inline-assets.mjs store/index.src.html store/index.html`
   embeds every `images/` file and downloads the three fontsource fonts
   once, writing them as data URIs (a repeated image is stored once). Then
   `node scripts/validate-pharmacy.mjs store/index.html` checks offline
   self-containment, sandbox-safe APIs, emoji or dingbats, alt text,
   labelled controls, one h1 per page, reduced-motion and focus-visible
   styles, the router (home, 404, the engine pages, four more pages, a
   form page, every link resolves), the green-pharmacy structure, the size
   budget, and fails if any of the worked example's names, pharmacists,
   reviewers, sample brands, street, city, domain or numbers are left.
   Modes: `--template` for `references/template.html`, `--demo` for the
   fictional store demo, `--files` for a deployed site that keeps `images/`
   and `fonts/` beside the page. For a framework port run its own build,
   lint and type checks.

10. **Review in a browser** against
    [references/quality-checklist.md](references/quality-checklist.md) at
    1440, 1024, 768 and 390 px: hero reads in one glance with the portrait
    complete, no horizontal scroll, every route reachable from visible links,
    cart and checkout populated and empty, forms with errors and success,
    reduced motion, no console errors. Fix what you see, rebuild, then look
    again.

## Adapting to a real brief

- **Counts flex; the grammar does not.** `PRODUCTS` takes any number (keep
  at least 8 so the trending tabs and filters stay full; the validator
  fails below 4). `CATEGORIES` drives the home tiles, trending tabs and
  shop filter: `.cats` is a six-column grid (three on tablets, a swipe row
  on phones), so with 4 or 5 categories set the desktop rule to
  `repeat(n, minmax(0, 1fr))` (4: tablet `repeat(2, ...)`) and with 7 or
  more drop the weakest. Deals show the four biggest savings from `was`
  prices; trending shows up to eight. `.brand-row` is an eight-column grid
  (four on tablets): with 5 to 7 brands set `repeat(n, ...)`, with more
  than eight slice `BRANDS` to eight in `renderHome` (the brands page lists
  all); a single-label shop drops the brand row and the brands page.
  `TEAM` is two to eight pharmacists, each with `works` (weekdays on duty)
  for the booking widget; `.roster` is a four-column grid (two on
  tablets), so with three people set `repeat(3, ...)` and with five or more
  let it wrap to a second row of four; `AREAS` sets the delivery popover and zones
  table (the first area is the default, `extra` is its surcharge).
  Promo tiles stay three (`.promos` is a three-column grid). Copy that
  states a number or promise ("At your door in under two hours", "Across
  five Port Alder neighbourhoods", "Free over $35") changes with the data.
- **Map the sections to the business.** A wellness or supplement shop
  without a dispensary: the hero upload card becomes a "Build your routine"
  quiz card in the same white card and navy button, Prescriptions becomes a
  subscription/refill page using the same steps and form, Consultation
  becomes a nutritionist or advisor booking (same widget, new `TOPICS`).
  A clinic or health-delivery service selling few products: keep the shop
  engine for the products it does sell, lead the home with services
  (the service duo and booking), and make Membership the plan page. With no
  membership, delete that page and its perk card instead of inventing one.
- **Real facts only.** For a real business, prices, delivery areas and
  fees, opening hours, pharmacist names and credentials, registration
  numbers, reviews, ratings and review counts come from the brief.
  Anything missing is drafted as clearly plausible placeholder copy and
  listed in your final reply for the buyer to confirm or replace. Never
  invent regulatory registrations, accreditations, awards, clinical claims
  or security claims ("encrypted", "HIPAA"): leave them out or mark them
  for the buyer.
- **People photos.** If the site names real pharmacists or staff, ask for
  their photos (portraits on a flat pastel; the hero needs one cut out on
  lime). Generated portraits, including the shipped `team-*` and
  `hero-pharmacist-cut`, are stand-ins: rename them and say so in your
  final reply.
- **Shipped images.** Reusable as neutral placeholders: the six `cat-*`
  hand tiles and `about-interior` (a generic pharmacy interior; replace
  with the buyer's shop when they have photos). Stand-ins only:
  `hero-pharmacist-cut`, `team-amara`, `team-tomas`, `team-tomas-wide`,
  `team-hana`, `team-hana-sq`, `team-rohan`. Sample-specific, regenerate
  for the buyer's range: every `p-*` packshot (the worked example's
  fictional brands and colourways) and `feature-hydrate` (electrolyte
  sachets). File names that carry sample names (`p-sunlift-*`,
  `team-amara`) must be renamed too: the validator reads them in
  `--files` mode.
- **Deliverable.** No project: the single HTML file built with
  `scripts/inline-assets.mjs` (safe in a sandboxed preview). A normal
  deployed site may keep `images/` and the font files in `fonts/` beside
  the page (validate with `--files`). A framework project: port per
  `references/framework-adaptation.md` with local image and font files.
- **Checkout stays honest.** The single file has no payment provider, so
  the checkout keeps its "no payment is taken" line and the order
  confirmation stays a demonstration. Connecting real payments is a
  framework-port task the buyer must ask for.

## Replace checklist

Strings that live outside the data arrays; the validator names any sample
leftover it finds.

- `<title>`, meta description, Open Graph tags, theme colour and every
  page's `data-title` (the suffix "| Fernwell Pharmacy").
- `STORE` in the script: `site` (title suffix), `pickup` (collection
  point in stock messages), `ref` (order-number prefix), delivery fee,
  free-delivery threshold and promo codes. `name`, `city`, `phone`,
  `email` and `address` are reference values: the same strings are static
  in the markup (header, footer, contact, about, delivery, privacy, terms,
  checkout collect option) and must be replaced there too.
- The logo word in the header, mobile menu and footer wordmark band.
- Hero lede, trust badges and the pharmacist's alt text.
- Membership card name ("Fernwell Card"), the sample member name on the
  card mockups and the pharmacist on duty in the home FAQ and app chat.
- Feature banner: eyebrow, copy, flavour buttons (`data-flavour` ids must
  match the product's `flavours`) and the add button's
  `data-feature-add` (product id) and `data-feature-opt` (option id).
- Promo tiles: copy, links and `data-pimg` product ids; the brands page
  own-label feature; the account page sample orders (`renderPast`).
- Codes and numbers in markup: pharmacy code `FW-PA-0417`, order samples
  `FW-20418`, the registration line in the footer, `+1 (555) 010-`
  numbers and `.example` addresses.
- Privacy and terms: drop the sentences saying they were written for a
  fictional pharmacy, and have the buyer review the legal text.

## Fonts

Fonts: Bricolage Grotesque (variable), Geist (variable) and Geist Mono
(variable). The template loads them from the fontsource CDN.
`scripts/inline-assets.mjs` downloads the three woff2 files from the URLs in
the template's `@font-face` rules at build time and embeds them, so the
single file makes no network requests. A deployed site keeps them in
`fonts/` beside the page. In a framework project install
`@fontsource-variable/bricolage-grotesque`, `@fontsource-variable/geist` and
`@fontsource-variable/geist-mono`, or use `next/font/google`
(`Bricolage_Grotesque`, `Geist`, `Geist_Mono`).

## Single-file constraints

- One self-contained HTML file: fonts and images inlined as data URIs by
  `scripts/inline-assets.mjs`, no CDN or other remote requests at runtime,
  under 5 MB (hard cap 8 MB).
- Sandbox restrictions apply when the page is previewed inside a sandboxed
  iframe (a single-file demo): the router keeps route state in JavaScript
  and syncs the hash with `history.pushState` inside try/catch; storage is
  wrapped with an in-memory fallback; no `alert`, `window.open` or top
  navigation; clipboard falls back to `execCommand('copy')`; submits are
  `type="button"` with click handlers. The template already works this way.
  A deployed site or framework project does not need them.
- A buyer's store uses the buyer's real name, domain and contact details.
  Only the store demo is fictional (`+1 (555) 010-` numbers, `.example`
  addresses); placeholders you had to draft go in the final reply.
  App-store chips are text with a generic phone glyph, never platform logos.
- Cart, checkout, bookings, uploads and sign-in are demonstrations until a
  backend is connected. Copy must say that nothing is charged, sent or
  stored.

<!-- reui:stack -->
#### React outputs: interface components come from ReUI

The single-file deliverable is vanilla HTML, CSS and JS so it can run as one
file. In a framework port to React or Next.js, build the generic controls
(buttons, inputs, selects, radio groups, toggle groups, tabs, accordions,
sheets, dialogs) with [ReUI](https://reui.io) instead of hand-rolled markup.

- Install from the official registry (`npx shadcn@latest add @reui/button`,
  and so on) and import from your `components/ui` directory. The source
  lives at https://github.com/keenthemes/reui.
- Map the template's classes to components with
  [references/reui-components.md](references/reui-components.md) and point
  ReUI's custom properties (`--primary`, `--background`, `--border`,
  `--radius`, font family) at this palette. Keep the template's own classes on
  rendered elements so its CSS still applies.
- Bespoke pieces stay bespoke: the hero frame, product cards, flavour bars,
  delivery tracker, membership card stack and footer wordmark.
- In a non-React stack, check ReUI support first. Astro can mount React
  islands; Vue or Svelte cannot use ReUI directly, so raise the conflict
  instead of silently swapping libraries.
<!-- /reui:stack -->

## Files

- `references/template.html`: the blueprint and engine with `REPLACE`
  markers (fictional worked example); open it beside `references/images/`
  (fonts load from the fontsource CDN).
- `references/images/`: the template's images (see the reuse policy in the
  image plan).
- `references/style-guide.md`: tokens, type scale, spacing, radius, shadows,
  component anatomy, do and don't.
- `references/visual-contract.md`: signature elements and what every port
  must preserve.
- `references/page-library.md`: page anatomy, home order, product data model.
- `references/route-inventory.md`: the worked example's routes and entry points.
- `references/interior-pages.md`: depth rules for inner pages.
- `references/image-plan.md`: art direction, slot table, prompts and reuse policy.
- `references/motion-system.md`: durations, easings, reveal pattern, reduced
  motion.
- `references/quality-checklist.md`: pre-delivery checklist.
- `references/icon-library.md`: sprite ids and placements.
- `references/framework-adaptation.md`: porting to a framework project and
  fidelity checks.
- `references/reui-components.md`: ReUI mapping for React outputs.
- `scripts/inline-assets.mjs`: builds the single offline file (images,
  fonts, each repeated image once).
- `scripts/validate-pharmacy.mjs`: the validator from step 9.