Kilnlight

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

Noto Serif Display is a high-contrast, didone-like display serif that looks dramatic at huge sizes, set against the quiet, neutral Instrument Sans for utility text.

• Noto Serif DisplayHeadings: hero up to 256px at 500, -2.5% tracking
• Instrument SansBody: body 16px, 14px uppercase nav

Who it is for

• Premium DTC product founders
• Small-batch makers and craft studios
• Agencies building luxury product microsites
• Brands preparing a physical product launch

Layout

1. Transparent fixed header: serif wordmark left, SHOP / ABOUT centered in small caps, cart count right
2. Full-bleed hero: oversized serif product name (~256px, tight negative tracking) with a secondary glyph, over a black stage
3. Vignetted product photograph rising from darkness beneath the headline
4. Scroll-revealed story blocks: short narrative paragraphs about origin, materials and process
5. Material/spec strip (e.g. CLAY, GLAZE labels with values)
6. Product landing pages with feature reveals and spec panels
7. Product detail page: sticky info column beside a scrolling image gallery (light theme)
8. Shop grid with sold-out badges and hover zoom
9. Asymmetric About page with alternating image alignment; Shipping and Warranty pages; newsletter footer

Palette

Cinematic, hushed, luxurious, crafted, nocturnal. It feels like a gallery at night where a single spot-lit object is the star.

• background#000000
• text#ffffff
• primary/accent (copper)#b67135
• border#2e2e2e
• muted text#a3a3a3
• product skin tone (imagery)#d9a48f

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

Noto Serif Display, weight 500, enormous hero sizes (up to 256px) with -2.5% tracking, sentence case

Body

Instrument Sans 16px regular, nav in 14px uppercase with 0.08em tracking

High-contrast didone serif for emotion and luxury, neutral grotesk for utility; the scale jump between them is the whole effect.

Spacing and imagery

Very airy; content centered in a ~1100px stage, sections separated by a full viewport of black; square buttons (0px) with a small .25rem radius on cards.

Single studio product shots on black with a soft radial vignette so the object emerges from darkness; warm skin-toned highlights; lifestyle/usage images on detail pages.

Components

• Transparent fixed header with cart counter
• Giant serif hero title
• Vignetted hero image stage
• Scroll-reveal narrative blocks
• Material/spec label rows
• Sticky product info sidebar
• Scrolling product gallery
• Shop grid card with sold-out badge
• Variant/finish cards
• Accordion full-screen mobile menu
• Newsletter signup
• Asymmetric alternating image-text rows

Interactions

• Fade-and-rise reveals triggered on scroll (content invisible until in view)
• 700ms slow zoom on product image hover
• Header stays fixed over content, gaining a subtle backdrop as you scroll
• Full-screen mobile nav overlay with accordion submenus
• Desktop dropdown menus
• Add-to-cart updates header count with a toast
• Lazy-loaded images with fixed aspect ratios

Data

• Product{slug, name, subtitle, price, images[], materials[], specs[{group, label, value}], careNotes[], soldOut, variants[]}
• Variant{id, name, finish, image, available}
• StorySection{heading, body, image, align}
• CartItem{productId, variantId, qty} (local state)

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 a cinematic product showcase site for a fictional premium maker called **Kilnlight** that sells a handful of hand-finished objects (swap in speakers, ceramics or watches). The audience is design-conscious buyers who want to feel the craft before they see a price. The site must tell a slow, scroll-driven story about one hero product, then lead into a shop grid and rich product pages.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix) for Sheet, Accordion, DropdownMenu and Toast, lucide-react icons. Use Framer Motion (or IntersectionObserver + CSS) for scroll reveals, Embla Carousel for the mobile gallery, Sonner for add-to-cart toasts, React Router for 8 routes. No backend: products live in a typed TS module; cart state in a React context persisted to localStorage.

### Pages & layout
1. **Home (dark)** – transparent fixed header (serif wordmark, SHOP/ABOUT centered in small uppercase, cart count right). Hero: product name set enormous in serif across the width, then a vignetted product photo rising out of black. Below, 3–4 story chapters (origin, material, making) that fade in one at a time, then a material/spec strip and a CTA to the product.
2. **Two product landing pages** – hero, alternating feature reveals, grouped spec panels, care notes, buy CTA.
3. **Product detail (light theme)** – two columns: sticky info (name, price, variant cards, add to cart, accordions for specs/care/shipping) beside a vertically scrolling image gallery.
4. **Shop** – 3-column grid, sold-out badges, hover zoom.
5. **About** – asymmetric rows with images alternating right/left.
6. **Shipping & returns**, **Warranty** – readable long-form pages.
7. Footer with newsletter input and small links.

### Design system
- Dark tokens: `--background: #000000`, `--foreground: #ffffff`, `--primary: #b67135` (copper), `--border: #2e2e2e` (decorative dividers), `--input-border: #737373`, `--primary-foreground: #000000`, `--muted-foreground: #a3a3a3`. Light pages: `--background: #f7f4ef`, `--foreground: #141414`.
- Fonts: Noto Serif Display (500) for display, Instrument Sans for body. Scale: 12 / 14 / 16 / 20 / 32 / 56 / 96 / clamp(96px, 18vw, 256px); display tracking -0.025em.
- Spacing on an 8px grid; sections separated by 160–240px on desktop. Radius: 0 for buttons, 4px for cards. No shadows on dark; one soft shadow on light cards.
- Motion: reveals 800ms `cubic-bezier(0.22,1,0.36,1)` with 60ms stagger; image zoom 700ms ease-out to scale 1.05.

### Components & interactions
Header (default / scrolled with blur backdrop), mobile full-screen menu (open/close, focus trapped), variant card (default/hover/selected/unavailable), add-to-cart button (default/hover/loading/disabled when sold out), sold-out badge, spec accordion, gallery (keyboard arrows on mobile carousel), newsletter form (idle/submitting/success/error), toast on cart add, empty cart state in the cart sheet.

### Data & state
`Product{slug, name, tagline, price, images[], variants[], specs[{group,label,value}], care[], soldOut}`; `Variant{id, label, swatch, available}`; `CartItem{productId, variantId, qty}`. Seed 6 fictional products with invented names and plausible specs; use placeholder photography of objects on dark backdrops.

### Accessibility
White on black (21:1) and copper `#b67135` on black (5.4:1) pass AA for text. On light pages copper text darkens to `#8a5226` (5.8:1 on `#f7f4ef`). Inputs use `--input-border: #737373`; `#2e2e2e` is decorative. Content hidden before reveal must still be in the DOM and announced; respect `prefers-reduced-motion` by showing everything immediately. Visible 2px copper focus rings. Hero heading stays a real `<h1>` even at giant size. Every product image gets descriptive alt text. Mobile menu is a dialog with Escape to close.
Verified contrast: body text on dark background #ffffff on #000000 = 21.0:1; muted text on dark background #a3a3a3 on #000000 = 8.33:1; copper accent text on dark background #b67135 on #000000 = 5.4:1; button label on copper primary #000000 on #b67135 = 5.4:1; copper focus ring on dark background #b67135 on #000000 = 5.4:1; input border on dark background #737373 on #000000 = 4.43:1; body text on light product pages #141414 on #f7f4ef = 16.79:1.

### Security
Static site: newsletter form validated with zod (email format, length), honeypot field and a simple client throttle; if you post to a serverless endpoint, validate again there. No API keys in client code. External social links use `rel="noopener noreferrer"`. Checkout, if added later, must go through a hosted checkout, never raw card fields.

### Performance & SEO
Preload the hero image with explicit width/height and `fetchpriority="high"`; lazy-load everything else, serve AVIF/WebP. Route-level code splitting. Per-page title, meta description and Open Graph image; Product JSON-LD on detail pages. Target Lighthouse 90+ on mobile.

### Guardrails
- Original copy and placeholder imagery only; no real brand names, logos or trademarks.
- No invented testimonials presented as real customers.
- Keep components small and typed; no `any`; surface errors visibly.
- Done when: all 8 routes render; scroll reveals work and degrade with reduced motion; the sticky info column stays pinned while the gallery scrolls; cart count updates and persists across reloads; Lighthouse accessibility is 95+.

Open the builderAll templatesThis palette on its own