Hearthwick

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Bodoni Moda is an elegant, high-contrast serif with italics for quiet luxury, and Figtree is a clean, friendly body.

• Bodoni ModaHeadings: hero 128px 500 with italic second line, section heads 60px
• FigtreeBody: body 16px/1.6, 12px uppercase eyebrows

Who it is for

• Homeware and interior boutiques
• Ceramicists and craft studios
• Furniture and lighting makers
• Interior designers selling curated objects

Layout

1. Translucent header: serif wordmark left, COLLECTIONS ▾ / SHOP ALL / ABOUT center (tracked caps), wishlist and bag icons right
2. Full-bleed parallax living-room hero with dark overlay: tracked eyebrow, 128px serif headline with italic second line, subcopy, terracotta 'Shop now →' button, 'Scroll' cue
3. Featured collection section (Lighting)
4. 'Just arrived / Latest products' 4-up grid with Featured/New badges, category eyebrow, serif name, excerpt, price; 'View all →'
5. Asymmetric collections grid (Lighting, Ceramics, Furniture, Textiles)
6. Story/about section, newsletter, footer
7. Shop with filters + 5 sorts, product detail with sticky info, cart, checkout

Palette

Warm, serene, refined, earthy, Scandinavian. Quiet luxury for considered living.

• background#faf8f5
• text#2a2622
• primary terracotta#a65e3f
• section beige#f0ebe6
• card#f6f4ee
• muted#e8e6e3
• border#e5e0dc
• muted text#6e655d
• input border#9d8a7b

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type scale

Display

Bodoni Moda 500, 128px hero with italic second line, 60px section heads

Body

Figtree 400 16px/1.6; 12px uppercase eyebrows (1-4 words) with 0.2em tracking

Elegant high-contrast serif with italics over clean Figtree; terracotta accents

Spacing and imagery

1184px container, 4-column product grid with 40px gaps, asymmetric 2/3 + 1/3 collection layouts, 2–4px radius, 120px section rhythm

Styled interior photography (living rooms, pendant lights, stoneware vessels, bowls) with soft natural light; dark overlay on hero.

Components

• Translucent header with dropdown
• Parallax hero with scroll cue
• Eyebrow + serif section header
• Badged product card with dual-image hover
• View all link
• Asymmetric collection tiles
• Filter sidebar and sort select
• Product gallery with sticky info panel
• Wishlist heart
• Cart drawer
• Checkout form
• Animated mobile nav

Interactions

• Hero parallax and scroll cue bounce
• Product card swaps to second image on hover
• Scroll-triggered fade-ups
• Collections dropdown
• Filter via URL params and 5 sort options
• Add to cart / wishlist persist
• Checkout validation

Data

• Product{id, slug, name, category(lighting|ceramics|furniture|textiles), price_cents, images[2+], excerpt, description, badges[featured|new], materials, dimensions}
• Collection{slug, name, description, cover, layout}
• CartItem{product_id, qty}
• WishlistItem{product_id}

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build **Hearthwick**, an editorial online store for handcrafted home goods -- lighting, ceramics, furniture and textiles. The site should feel like a calm interiors magazine that happens to sell things: a slow parallax hero, curated collections, and product pages with room to breathe. The job: make artisan objects feel worth their price and make buying frictionless.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Framer Motion for parallax, fades and mobile nav; Embla for product galleries; Zustand (persisted) for cart and wishlist; react-hook-form + zod for checkout; React Router with URL search params for filters/sort. Payment via hosted checkout (Stripe Checkout) with a small server/edge function to create sessions.

### Pages & layout
1. **Home** – translucent header (serif wordmark, tracked-caps nav with Collections dropdown, heart + bag). Full-bleed interior hero with a dark overlay and slow parallax: tracked eyebrow, 128px serif headline with an italic second line, subcopy, terracotta "Shop now →", "Scroll ↓" cue. Featured collection split. "Just arrived" 4-up grid with Featured/New badges. Asymmetric collections (large + stacked smalls). Brand story, newsletter, footer.
2. **Shop / Collection** – filter sidebar (category, material, price), 5 sorts (featured, newest, price ↑/↓, name), grid.
3. **Product** – gallery left, sticky info right (eyebrow, serif name, price, description, materials, dimensions, quantity, Add to bag, wishlist), related products.
4. **Wishlist**, **Cart**, **Checkout** (contact, shipping, review → hosted payment), **About**.

### Design system
`--background: #faf8f5`, `--foreground: #2a2622`, `--primary: #a65e3f` (terracotta), `--section: #f0ebe6`, `--card: #f6f4ee`, `--muted: #e8e6e3`, `--border: #e5e0dc`, `--muted-foreground: #6e655d`, `--input-border: #9d8a7b` (`--border` stays decorative). Fonts: Bodoni Moda 500/500-italic (display) + Figtree 400/500. Scale 12 (caps, 0.2em) / 16 / 18 / 24 / 36 / 60 / 128; Georgia/serif and system-ui fallbacks. Radius 2–4px. Badges: terracotta or near-black with white caps. Shadows minimal. Motion: parallax translateY ≤ 15%, fade-ups 600ms ease-out, image swap 400ms.

### Components & interactions
Header (translucent, dropdown), ParallaxHero, ScrollCue, SectionHeader (eyebrow + serif title + View all), ProductCard (dual image, badges, wishlist, focus), CollectionMosaic, FilterSidebar, SortSelect, ProductGallery, StickyInfo, QuantityStepper, AddToBag (states), CartDrawer (empty/items), WishlistPage (empty), CheckoutForm, MobileNav (animated sheet).

### Data & state
Typed product/collection JSON; filters/sort from URL; cart and wishlist persisted. Prices in cents with `Intl.NumberFormat`. Seed 16 products across 4 categories with invented names and generated interior photos, two images each.

### Accessibility
Hero white text sits on a `rgb(0 0 0 / .55)` overlay (≥ 4.7:1). Terracotta #a65e3f with white text is 4.9:1; button and badge text 12px+ at weight 500. Eyebrows use #6e655d (4.8:1 on section beige). Dual-image hover also triggers on focus; alt text describes the object. Dropdown uses Radix NavigationMenu keyboard pattern. Parallax and fade-ups disabled under reduced motion. Filter changes announced ("12 products"). Verified contrast: body text #2a2622 on #faf8f5 = 14.1:1; muted/eyebrow text #6e655d on #faf8f5 = 5.3:1; muted/eyebrow text #6e655d on #f0ebe6 = 4.8:1; white #ffffff on #a65e3f = 4.8:1; white hero text #ffffff on #737373 = 4.7:1.

### Security
Checkout sessions created server-side from product IDs and quantities (never trust client prices); verify payment via webhook. zod validation on address/contact forms client and server. No card data on the site. Newsletter with honeypot and rate limit. External links `rel="noopener noreferrer"`.

### Performance & SEO
Hero image preloaded; product images responsive and lazy with fixed aspect ratios; parallax via transform only. Product schema, meta/OG per product/collection, sitemap. Lighthouse 90+.

### Guardrails
- Invented shop and product names; generated imagery; no real design-brand references.
- No fabricated customer reviews or press quotes.
- Minimal personal data; clear cart data after purchase.
- Typed small components, no `any`, visible errors.
- Done when: filters and all five sorts work and persist in the URL, cart and wishlist survive reloads, product pages have sticky info on desktop and stacked on mobile, checkout redirects to a server-created session, and reduced motion disables parallax.

Open the builderAll templatesThis palette on its own