Aperture Hall

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

M PLUS 2 is a clean geometric grotesk with a very heavy weight, giving the dramatic size contrast on the gallery-dark stage.

• M PLUS 2Headings: hero ~128px 800, section titles 48px bold
• M PLUS 2Body: body 16px grey on black, tracked uppercase nav and eyebrows

Who it is for

• Photography schools and workshop hosts
• Beginner and intermediate photographers
• Professional photographers who teach
• Hobbyists seeking structured courses

Layout

1. Black header: aperture logo left, uppercase links (About, Courses, Gallery) and amber consultation pill right
2. Hero: giant bold white two-word title centered with two tilted rounded photo cards overlapping behind the text
3. Two-column instructor bio with image
4. Three dark course cards with amber icon tiles
5. Testimonial carousel/grid of cards with large sentence-case quote headlines and decorative quote marks
6. Closing CTA band
7. Masonry student gallery with hover overlays, gallery detail pages (photographer, course, camera settings)
8. Course schedule page (courses and workshops with dates, prices, green/red spot badges)
9. Footer: contact, quick links, social; legal pages

Palette

dramatic, premium, focused, cinematic, confident. It is a gallery-dark stage that lets the photographs glow.

• background black#000000
• surface#141414
• card#0f0f0f
• text white#ffffff
• accent amber#fbbd23
• muted gray#9ca3af
• availability green#22c55e

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

M PLUS 2 ExtraBold ~128px hero, tight leading; 48px bold section titles; sentence-case quote headlines

Body

M PLUS 2 16px, #9ca3af on black, line-height 1.6; uppercase tracked nav and amber eyebrows flanked by short rules

Pure M PLUS 2 with extreme size contrast; the amber accent is used sparingly for CTAs, icons and eyebrows.

Spacing and imagery

1152px container, 3-column card grid, 120px sections alternating #000 and #141414, 12px radius cards with subtle borders, pill CTA.

Vivid landscape and portrait photographs on tilted rounded cards; masonry of student work with dark hover overlays; line icons in amber on dark tiles.

Components

• Black header with amber pill CTA
• Oversized hero title with tilted photo cards
• Instructor bio split
• Course package cards with icon tiles
• Eyebrow with side rules
• Testimonial cards with quote headlines
• Masonry gallery with hover overlay
• Gallery detail page with EXIF settings
• Course schedule list with availability badges
• CTA band
• Full-screen mobile menu
• Legal pages

Interactions

• Hero photo cards subtly float/tilt
• Sections fade in on scroll; gallery reveals staggered
• Gallery hover overlay with title and photographer
• Testimonials scroll horizontally
• Header backdrop blur on scroll with smooth anchor scrolling
• Full-screen mobile menu

Data

• Course{slug, title, level, description, price, weeks, startDate, spotsTotal, spotsLeft, type: course|workshop}
• GalleryImage{slug, src, title, photographer, course, camera, lens, aperture, shutter, iso}
• Testimonial{name, course, headline, quote}
• Instructor{name, bio, credentials[], photo}

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 "Aperture Hall", a website for a photography school led by one main instructor. Aspiring photographers should be drawn in by strong imagery, trust the instructor, compare courses and workshops (and see how many spots remain), browse student work with camera settings, and book a free consultation.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Card, Badge, Sheet, Dialog, Toast via Sonner), lucide-react. Framer Motion for the floating hero cards and reveals. A CSS-columns masonry for the gallery. React Router for Home, Courses, Gallery, Gallery detail and three legal pages. The consultation CTA opens an embedded scheduler or a short form sent through a serverless function.

### Pages & layout
1. **Header**: black, with an aperture-mark logo, uppercase tracked links (About, Courses, Gallery) and an amber pill "Book consultation". It gains a blur after scrolling and becomes a full-screen overlay menu on mobile.
2. **Hero**: black, with a giant two-line bold white title centered and two rounded photo cards tilted about 4° peeking from behind, one top-right and one left, floating slowly.
3. **Instructor**: a two-column bio with photo, credentials and years of experience.
4. **Courses**: three dark cards with amber icon tiles, title and two-line summary, linking to the schedule.
5. **Testimonials**: an amber eyebrow flanked by short rules, then cards with a big sentence-case quote headline, decorative quote glyph, quote, name and course.
6. **CTA band**, then a gallery preview.
7. **Footer**: contact, links and socials.
8. **Courses page**: courses and workshops with dates, price and a spots badge (green for open, amber when few are left, red when full).
9. **Gallery**: masonry with hover overlays. The detail page shows the image, photographer, course and settings (camera, lens, f-stop, shutter, ISO) with previous and next links.

### Design system
Dark only. Tokens: `--background: #000000`, `--surface: #141414`, `--card: #0f0f0f`, `--foreground: #ffffff`, `--muted: #9ca3af`, `--primary: #fbbd23`, `--primary-foreground: #000000`, `--border: rgb(255 255 255 / .08)`, `--success: #22c55e`, `--danger: #ef4444`, `--radius: 0.75rem`. Font: M PLUS 2 400/600/800. Scale: clamp(64px, 10vw, 128px) for the hero, then 48/28/20/16/13px; nav 14px uppercase at 0.08em. Spacing: 8px base, 120px sections alternating black and surface. Motion: float loop 6s ease-in-out, reveals 500ms, gallery stagger 40ms.

### Components & interactions
- Amber pill: black text; hover brightens; focus shows a white ring with a 2px offset.
- Course card: the border brightens on hover; the whole card is one link.
- Spots badge: text states ("6 spots left", "Almost full", "Sold out"). A sold-out course disables "Enroll" and shows a "Join waitlist" link.
- Gallery tile: on hover or focus a dark overlay shows title and photographer; Enter opens the detail page.
- Testimonials: horizontal scroll-snap with arrow buttons.
- Consultation form: loading, success and error toasts.

### Data & state
`courses.ts` (`Course{slug, title, type, level, summary, price, start, weeks, spotsTotal, spotsLeft}`), `gallery.ts` (`GalleryImage{slug, src, width, height, title, photographer, course, camera, lens, aperture, shutter, iso}`), `testimonials.ts`, `instructor.ts`. Everything is static. Seed about 30 placeholder landscape and portrait images with invented student names.

### Accessibility
Amber on black and black text on amber both pass, so never put white text on amber. Muted gray `#9ca3af` on black passes AA. The tilted hero photos are decorative and float only when motion is allowed. Gallery tiles are links with alt text describing the scene. The masonry reading order must follow the DOM. Spots badges are text, not only color. The mobile overlay traps focus. Use one H1 per page. Verified contrast: muted #9ca3af on #000000 = 8.27:1; pill #000000 on #fbbd23 = 12.41:1; amber on surface #fbbd23 on #141414 = 10.88:1; sold-out badge #ef4444 on #0f0f0f = 5.09:1.

### Security
Static content. The consultation form uses zod validation on the client and in the function, plus a honeypot and rate limit. Allow-list the scheduler embed, keep no keys in the client, and give social links `rel="noopener noreferrer"`. The legal pages are placeholders to be reviewed by the owner.

### Performance & SEO
The gallery is image-heavy, so use responsive `srcset`, width and height attributes, lazy loading, and AVIF or WebP. Code-split the gallery detail. Add Course and EducationalOrganization JSON-LD, canonical URLs, and OG images per gallery item. Target Lighthouse 90+ with CLS under 0.05.

### Guardrails
- Use original copy and placeholder imagery only, with no camera or software brand names beyond generic mentions.
- Do not present sample testimonials as real.
- Collect only consultation contact details.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: the hero renders with floating cards (static under reduced motion); spots badges reflect data; gallery detail routes work with previous and next; amber buttons pass contrast; the legal pages exist.

Open the builderAll templatesThis palette on its own