Quietroom

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

Raleway's light, wide-set capitals give the hushed exhibition wall-text feel, and it is legible at body sizes.

• RalewayHeadings: headline 128px 300, uppercase, 0.15em
• RalewayBody: body 16-18px

Who it is for

• Emerging fashion labels pre-launch
• Photographers announcing exhibitions
• Designers building a waitlist
• Boutiques teasing a new collection

Layout

1. Full-screen hero photo (close-up monochrome texture) with wordmark top-left and social icons top-right
2. Huge ultra-light, widely tracked two-line title over the image
3. Short description with launch timing and RSVP line
4. Inline email field + black 'Sign up' button
5. Lookbook collection grid (product cards)
6. Product view with gallery navigation and size selector
7. Long-form brand story page
8. Two-column contact page; slide-out mobile menu

Palette

Hushed, luxurious, artistic, monochrome, anticipatory. Feels like the wall text at a photography exhibition.

• background#ffffff
• text#1a1a1a
• primary black#000000
• hero photo mid-tone (under scrim)#8a8f96
• secondary#f5f5f5
• border#e6e6e6
• input border#949494

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, 128px uppercase with 0.15em tracking (never below 56px) (the system face is not on Google Fonts; a vibld project loads Raleway)

Body

System sans 400 16–18px (the system face is not on Google Fonts; a vibld project loads Raleway)

Light, wide-spaced display creates an exhibition feel; everything else is quiet

Spacing and imagery

Full-viewport hero with content aligned to a left gutter (~64px) and a stepped layout (title left, copy offset right); square inputs and buttons; minimal radius

Macro monochrome photography (feather texture) filling the screen; lookbook uses black-and-white editorial fashion shots.

Components

• Full-screen hero
• Top-left wordmark
• Social icon row
• Tracked display title
• Launch copy with RSVP
• Inline email capture
• Lookbook grid
• Product gallery with thumbnails
• Size selector
• Brand story long-form layout
• Two-column contact
• Slide-out mobile menu

Interactions

• Staggered fade-in of title, copy and form
• Email submit loading/success toast
• Gallery prev/next and thumbnail switching
• Size selector toggle
• Mobile menu slide

Data

• Look{id, title, images[], sizes[], description, price_hint}
• Subscriber{email, created_at}
• ContactMessage{name, email, message}

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 **Quietroom**, a pre-launch site for a monochrome fashion and photography project. The first screen is a full-bleed image with a very large, widely spaced title, a short launch note and an email RSVP. Supporting pages show a lookbook of pieces, a brand story and contact details. The job: build a waitlist and set a premium, exhibition-like tone before launch.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Framer Motion for staggered entrance; Embla for lookbook galleries; Vaul for mobile menu; Sonner toasts; react-hook-form + zod for RSVP/contact. Backend only for the waitlist (Supabase table + Edge Function, or a newsletter provider).

### Pages & layout
1. **Coming soon** – 100vh background photo (monochrome macro texture) with subtle dark gradient; wordmark top-left (bold sans), three social icons top-right. Two-line 128px light (300) uppercase title with 0.15em tracking, left-aligned. Offset right below: two-line description with launch season, a small RSVP line, then an inline email field (white, square) joined to a black "Sign up" button.
2. **Collection / Lookbook** – grid of looks (portrait B&W images, name).
3. **Look detail** – gallery with thumbnails and arrows, description, size selector (visual only pre-launch), "Notify me" CTA.
4. **About** – long-form story with pull quotes and full-width images.
5. **Contact** – two columns: studio details / form.

### Design system
Monochrome. `--background: #ffffff`, `--foreground: #1a1a1a`, `--primary: #000000`, `--secondary: #f5f5f5`, `--border: #e6e6e6`, `--muted-foreground: #5f5f5f`, hero overlay: a left-side gradient reaching `rgb(0 0 0 / .55)` behind all text, `--input-border: #949494`. Font: a neutral grotesk (e.g. Raleway 300/400/600, system-ui fallback); 300 only for the display title. Scale 12 (caps, 0.2em) / 16 / 18 / 24 / clamp(56px, 10vw, 128px); body 16-18px/1.6. Radius 0–4px. No shadows. Motion: staggered fade/slide 700ms, 120ms between items.

### Components & interactions
HeroBackground, Wordmark, SocialIcons, TrackedTitle, LaunchNote, RsvpForm (idle/validating/loading/success/duplicate/error), LookCard, LookGallery (keyboard arrows), SizeSelector (radio group), StoryLayout, ContactColumns + ContactForm, MobileMenu.

### Data & state
Static typed data for looks and story. Waitlist table: email unique, created_at, source. Seed 8 looks with generated monochrome imagery and invented names.

### Accessibility
White text over the mid-grey photo uses weight 300+ for the title and a `rgb(0 0 0 / .55)` gradient scrim, so both the title and the description reach ≥ 4.5:1. The tracked title should be real text (not an image) with normal reading order. The email field has a label (visually hidden OK) and error text. Social icons need names. Reduced motion disables entrance animation. Gallery is keyboard operable. Verified contrast: body text #1a1a1a on #ffffff = 17.4:1; muted text #5f5f5f on #ffffff = 6.3:1; white #ffffff on #000000 = 21.0:1; white hero title/description #ffffff on #737373 = 4.7:1; input border #949494 on #ffffff = 3.0:1.

### Security
Proportionate: RSVP validated with zod client and server, honeypot, per-IP rate limit, double opt-in; RLS denies public reads of the waitlist; no keys in the client; contact form same treatment; external links `rel="noopener noreferrer"`.

### Performance & SEO
Hero image preloaded as AVIF/WebP at multiple widths; everything else lazy. Tiny JS on the landing route; code-split the rest. Meta/OG (hero image), canonical, "coming soon" pages still indexable with descriptive copy. Lighthouse 95+.

### Guardrails
- Invented label name and launch copy; generated imagery; no real fashion house references.
- No fake waitlist counts or testimonials.
- Store emails only, with unsubscribe.
- Typed small components, no `any`, visible errors.
- Done when: the hero fits any viewport without overflow of the tracked title (320–1920px), RSVP handles all states and blocks duplicates, lookbook galleries work by keyboard, text over the photo passes contrast, and reduced motion is respected.

Open the builderAll templatesThis palette on its own