Aurelle

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

Josefin Sans has elegant, wide geometric capitals with a vintage-fashion feel, ideal for a restrained luxury lookbook.

• Josefin SansHeadings: thin uppercase wordmark ~32px at 300
• Josefin SansBody: descriptions 16px, product names and prices 14px

Who it is for

• Independent jewelry designers
• Small luxury accessory brands
• Boutique concept stores
• Agencies building premium storefronts

Layout

1. Header: Shop/New in/About left, thin uppercase wordmark center, search, wishlist and bag with count right
2. Two large side-by-side collection tiles (portrait photography) with name and one-line description below
3. Product grid: image, 'NEW' tag, category, name, price in euros
4. Full-width editorial banner with caption
5. Asymmetric image pair (narrow + wide) editorial section
6. Short brand story section
7. Footer; product detail with gallery; brand story; store locator; cart and checkout; legal pages

Palette

Minimal, luxurious, sensual, quiet, editorial. A high-end fashion lookbook with lots of breathing room.

• background#ffffff
• text / primary#171717
• secondary#f5f5f5
• border#e6e6e6
• muted text#6b6b6b
• warm shadow tone#3a2a20
• input border#8e8e8e

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

Josefin Sans 300, thin uppercase wordmark ~32px with wide letterforms

Body

Josefin Sans 400 16px for descriptions (line-height 1.6), 14px for product names and prices in grids

Single sans; the 300 weight is reserved for the 32px wordmark, all other text is 400+; restraint lets photography feel expensive

Spacing and imagery

Full-bleed-ish 24px gutters, 2-column hero tiles and asymmetric pairs, 4-column product grid, square corners (6px max), tight 8px caption spacing, big 100px section gaps

Warm, high-contrast close-up portraits with dramatic window light showing earrings, chains and bracelets; skin tones and shadows dominate.

Components

• Split header with centered wordmark
• Icon buttons (search, wishlist, bag with count)
• Collection tile
• Product card with NEW tag
• Editorial full-width banner
• Asymmetric image pair
• Product gallery with zoom
• Variant/size selector
• Add to bag button
• Cart drawer
• Checkout steps
• Store locator list/map
• Legal pages

Interactions

• Header becomes translucent white on scroll
• Product image swaps to second view on hover
• Gallery zoom on click
• Add to bag updates count with toast
• Wishlist toggle
• Search overlay
• Checkout step validation

Data

• Product{id, slug, name, category(earrings|bracelets|necklaces|rings), price_cents, currency, images[], materials, is_new, collection_id}
• Collection{id, name, description, cover}
• CartItem{product_id, qty, variant}
• Store{name, address, lat, lng, hours}
• Order{items[], shipping, total}

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 **Aurelle**, a minimalist online storefront for an independent jewelry designer. Large editorial photography introduces collections; shoppers browse pieces, examine them in a zoomable gallery, save favorites, add to bag and check out. Brand story and stockist pages build trust. The job: make high-priced pieces feel considered and make buying effortless.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Zustand (persisted) for cart and wishlist; react-hook-form + zod for checkout forms; Embla for product galleries; React Router for pages. Payments via a hosted checkout (Stripe Checkout or a headless commerce API) -- the front end never handles card data. Optional Leaflet for the store locator.

### Pages & layout
1. **Home** – header with text links left, a thin wide uppercase wordmark centered, search/wishlist/bag icons right (bag shows count). Two large portrait collection tiles side by side with name + one-line description below. 4-column product grid (image, optional NEW tag, category, name, price). Full-width editorial banner with caption. Asymmetric pair (1/3 + 2/3) of close-up portraits. Short brand statement. Footer (shop, about, legal, newsletter).
2. **Shop / Collection** – filters (category, material, price), sort, grid.
3. **Product** – gallery (thumbnails, zoom), name, price, materials, size/length selector, Add to bag, care notes, related.
4. **About / Story**, **Stores** (list + map), **Cart**, **Checkout** (contact → shipping → review → hosted payment), **Privacy/Terms/Returns**.

### Design system
`--background: #ffffff`, `--foreground: #171717`, `--primary: #171717`, `--secondary: #f5f5f5`, `--border: #e6e6e6`, `--muted-foreground: #6b6b6b`, `--input-border: #8e8e8e` (inputs, size selector, filters). Font: Josefin Sans 300/400/500 (wordmark 300 uppercase at 32px with 0.08em tracking). Scale 12/14/16/20/32 (descriptions 16px; 12px only for tags). Radius 0–4px. No shadows except drawers. Motion: 250ms crossfade image swap; header background fade on scroll.

### Components & interactions
Header (transparent/solid), IconButton with badge, CollectionTile (hover slight zoom), ProductCard (hover second image, NEW tag, wishlist heart), FilterBar, Gallery + Zoom dialog, VariantSelector (unavailable disabled), AddToBag (idle/adding/added/error), CartDrawer (empty state), CheckoutStepper, StoreList + Map, SearchOverlay (no results state), Toasts.

### Data & state
Typed product and collection JSON (or a headless CMS). Prices in cents with `Intl.NumberFormat('de-DE', {currency:'EUR'})` or configurable. Cart/wishlist persisted in localStorage. Seed 12 pieces with invented names and generated product/model photos.

### Accessibility
Small 14px grey text uses #6b6b6b (5.3:1 on white, 4.9:1 on #f5f5f5); banner captions sit on a `rgb(0 0 0 / .6)` scrim (5.7:1). Icon buttons labeled ("Bag, 3 items"). Product cards single link; wishlist heart a separate button outside the link. Gallery thumbnails are buttons with "Image 2 of 5". Zoom dialog keyboard accessible. Every model photo has alt describing the piece worn. Visible focus ring (2px #171717 offset). Verified contrast: body text #171717 on #ffffff = 17.9:1; muted grey text #6b6b6b on #ffffff = 5.3:1; muted grey text #6b6b6b on #f5f5f5 = 4.8:1; white #ffffff on #171717 = 17.9:1; input/selector border #8e8e8e on #ffffff = 3.2:1.

### Security
No card data on the site; redirect to hosted checkout and confirm via webhook on the server/edge. Validate address forms with zod. Don't trust client prices -- checkout session built server-side from product IDs. External links `rel="noopener noreferrer"`. Minimal PII kept client-side (clear after order).

### Performance & SEO
Photography is heavy: AVIF/WebP, responsive sizes, lazy-load below fold, blur-up placeholders, fixed aspect ratios. Product structured data (price, availability), meta/OG per product, sitemap. Lighthouse 90+.

### Guardrails
- Invented brand and product names; generated imagery; no real luxury brand references.
- No fabricated reviews.
- Store only order-necessary data.
- Typed small components, no `any`, visible errors.
- Done when: bag count updates and persists, variant selection is required before adding, checkout redirects to a hosted session built server-side, filters/sort work, and product pages expose valid Product schema.

Open the builderAll templatesThis palette on its own