# Gallery Quality Standards
The living quality bar for every example in this gallery — and eventually for every site a
Mothership client agent builds. Seeded 2026-07-02; grows out of Adam's review feedback. Every
keep/kill/fix decision on a gallery page should leave a trace here.
## Technical
- One self-contained HTML file: inline CSS, no external JS dependencies. System fonts or
Google Fonts only (Google Fonts `` is the single allowed external request).
- No external images. Visuals are CSS/SVG: color blocking, gradients, inline SVG illustration,
texture. Pages must look *designed*, not "missing images."
- No real trackers or integrations: no HubSpot, gtag/GTM, Bunny, nav-loader. Forms are plain
markup (no action endpoints).
## Layout & responsiveness
- Mobile-first. Flawless at 375px AND 1440px; sane at every width between.
- No horizontal scroll, ever, at any viewport width.
- Clear primary CTA above the fold.
- Working in-page navigation (anchor links that actually land well, with scroll offset for a
sticky header if there is one).
- Footer with the contact/hours pattern: address, phone, hours, and the primary CTA repeated.
## Content
- Realistic fictional business with real-sounding copy. ZERO lorem ipsum or placeholder text —
the gallery models the bar the agent must hit, including copywriting.
- Prices, hours, addresses, menus: specific and plausible for the business type and locale.
- Vibe fidelity: the page must read unmistakably as its category + vibe slot. A stranger should
guess the business type in one second.
## Motion (see `toolbox/animations.html` for live demos + implementations)
- Budget: ~1 motion idea per section, 2–3 technique families per page, one signature moment
(usually the hero). Quiet everywhere else.
- Defaults ON: scroll-reveal (IntersectionObserver, animate once, 16–32px), hero entrance
stagger (≤1s total), hover micro-interactions (150–250ms, `@media (hover:hover)`), sticky nav.
- OFF by default: parallax, text effects, scroll progress. Never: scroll-jacking, mandatory
scroll-snap, preloaders, auto-advancing carousels, typewriters, sound.
- Animate `transform` and `opacity` ONLY. All translation/scale lives inside
`@media (prefers-reduced-motion: no-preference)`; reduce users get fully visible static
content. Initial hidden states are scoped to `.js` (set on `` by script) so no-JS
users see everything.
- The H1 and hero image render at first paint (LCP) — entrance animation is for the elements
around them. Never animate in: body copy, menus/prices, hours, address, contact info.
## Media slots (see `toolbox/media.html` for placement patterns + production wiring)
- Gallery pages carry labeled placeholder frames (gradient + "PHOTO/VIDEO slot" label) sized
and positioned exactly as production media: the agent swaps frames for real
`