Fernwool

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

Lato's light weights are warm and semi-rounded, giving the gentle, crafted autumn label without any decorative face.

• LatoHeadings: hero 96px 300, +2.4px tracking; section heads 36px
• LatoBody: body 16px/1.6, 12px uppercase nav

Who it is for

• Small handmade fashion labels
• Knitwear and textile makers
• Slow-fashion brands
• Designers launching a first shop

Layout

1. Transparent header over hero: wordmark left, uppercase SHOP/ABOUT/CONTACT center, social and cart icons right; turns solid white on scroll
2. Full-bleed hero photo (model in knitwear in a misty field) with a large light-weight collection title bottom-left
3. Intro row on cream: statement headline left, 3 product cards (photo, name, price) right
4. Two collection tiles with overlaid titles
5. Newsletter band over a yarn texture photo with inline email + burnt-orange Sign Up
6. Footer; shop grid; collection pages; product detail; stockists; about; contact

Palette

Earthy, calm, handcrafted, autumnal, honest. A quiet studio label with warm natural textures.

• background cream#f5f0ea
• surface#ffffff
• text#2e261f
• primary brown#493827
• accent orange#b85a1f
• secondary#f3eee8
• border#e5e7eb
• muted text#6f6259
• input border#828b9e

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

System sans 300 (display sizes ≥ 36px only), 96px hero title with wide +2.4px tracking; 36px section heads (the system face is not on Google Fonts; a vibld project loads Lato)

Body

System sans 400 16px/1.6; uppercase nav 12px with 0.1em tracking (the system face is not on Google Fonts; a vibld project loads Lato)

Light, airy sans at large sizes gives a gentle, crafted feel; no decorative faces

Spacing and imagery

Full-width 24px gutters; 12-col grid with statement spanning 4 and products 8; 0 radius; collection tiles 50/50 with 8px gap; tall 380px newsletter band

Autumnal editorial photography -- knitwear on models in fields, folded sweaters, scarves, yarn close-ups -- in rust, oat and brown tones.

Components

• Scroll-aware transparent header
• Full-bleed hero with overlaid title
• Statement + product row
• Product card
• Collection tile with overlay title
• Newsletter band with inline form
• Shop grid with filters
• Product detail with gallery and quantity
• Cart drawer with subtotal
• Stockists directory
• Contact form
• Mobile hamburger menu

Interactions

• Header transitions transparent → solid on scroll
• Product hover image zoom
• Add to cart with quantity update and toast
• Cart subtotal recalculates
• Mobile menu drawer
• Newsletter submit states

Data

• Product{id, slug, name, price_cents, images[], collection, materials, sizes[], colors[]}
• Collection{slug, name, description, cover}
• CartItem{product_id, size, color, qty}
• Stockist{name, city, country, address, url}

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 **Fernwool**, an online shop for a small handmade knitwear label. The site should feel like walking into a quiet studio: misty editorial photography, a short brand statement, two collections, a list of stockists and a newsletter. Shoppers can add pieces to a working cart. The job: sell a handful of well-made products with a strong, calm brand story.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Zustand (persisted) or context for cart; Embla for product galleries; Vaul for the mobile menu/cart drawer; Sonner toasts; react-hook-form + zod for newsletter/contact. Checkout via hosted provider (Stripe Checkout / Payment Links or a headless commerce backend).

### Pages & layout
1. **Home** – header transparent over hero (wordmark left, uppercase nav center, social icon + cart right), solid white after 80px scroll. Full-bleed 70vh hero photo with a 96px light title in the lower-left. Cream intro row: statement headline (1/3) + 3 product cards (2/3). Two collection tiles with white overlaid titles. Newsletter band over a yarn texture with a dark overlay, heading, subline, inline email + orange button. Footer.
2. **Shop** – all products with collection/size filters.
3. **Collection** pages (×2) – hero strip + grid.
4. **Product** – gallery, name, price, size and color selectors, quantity, Add to cart, materials & care accordion.
5. **About**, **Stockists** (grouped by country), **Contact**, **Cart**.

### Design system
`--background: #f5f0ea`, `--surface: #ffffff`, `--foreground: #2e261f`, `--primary: #493827`, `--accent: #b85a1f` (buttons), `--secondary: #f3eee8`, `--border: #e5e7eb` (decorative), `--input-border: #828b9e`, `--muted-foreground: #6f6259`. Font: Lato 300/400/500 (display 300 with +0.025em tracking). Scale 12 (uppercase nav, 0.1em) / 16 / 18 / 36 / 96; weights below 400 only at 36px+. Radius 0. Shadows none. Motion: header 300ms, image hover scale 1.04 over 600ms.

### Components & interactions
Header (transparent/solid, mobile hamburger), Hero, StatementRow, ProductCard, CollectionTile, NewsletterBand (idle/loading/success/error), FilterBar, ProductGallery, OptionSelector (sold-out variants disabled), QuantityStepper, CartDrawer (empty/items), StockistList, ContactForm, Footer.

### Data & state
Typed product/collection/stockist data. Cart items keyed by product+size+color; subtotal computed. Seed 8 products (socks, wrap, pullover, beanie, cardigan…) with invented names, generated photography of fictional models, and 10 fictional stockists.

### Accessibility
White hero title over a light misty photo sits on a `rgb(0 0 0 / .55)` gradient scrim (4.7:1); the newsletter band overlay is `rgb(0 0 0 / .6)`. Buttons use burnt orange #b85a1f so white text reaches 4.6:1. Transparent header must remain legible over every hero (add gradient). Cart drawer focus-managed. Selectors are radio groups. Descriptive alt on product photos. Verified contrast: body text #2e261f on #f5f0ea = 13.1:1; muted text #6f6259 on #f5f0ea = 5.2:1; white #ffffff on #b85a1f = 4.6:1; white hero title #ffffff on #737373 = 4.7:1; white newsletter text #ffffff on #666666 = 5.7:1.

### Security
No card data on site; hosted checkout with server-built sessions from product IDs; verify via webhook. Newsletter/contact validated with zod client and server, honeypot and rate limit. Stockist URLs validated; external links `rel="noopener noreferrer"`. No secrets in the client.

### Performance & SEO
Hero preloaded with responsive sources; other images lazy with fixed ratios. Product schema, meta/OG per page, sitemap. Lighthouse 90+.

### Guardrails
- Invented label, products and stockists; generated images; no real brand logos.
- No invented customer reviews.
- Keep only emails for the newsletter.
- Typed small components, no `any`, visible errors.
- Done when: header transitions correctly on scroll, cart handles variants and quantities with correct subtotal and persists, checkout hands off to a hosted session, orange buttons meet contrast, and all nine pages are reachable on mobile.

Open the builderAll templatesThis palette on its own