Kestrel Bureau

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

Encode Sans is a tight-fitting grotesk with good light weights, a Google Fonts stand-in for PP Neue Montreal that keeps the cinematic white frame.

• Encode SansHeadings: titles 40-64px at 300/400, ending in an underscore
• Encode SansBody: body 16px, 12px 500 uppercase labels at 0.14em

Who it is for

• Freelance brand designers attracting new clients
• Small studios competing with larger agencies
• Agencies preparing competitive pitches
• Designers who want case study pages

Layout

1. Auto-hiding header: wordmark with period left; Work, About, Contact in tracked uppercase right
2. Full-bleed hero slideshow with crossfades and slow zoom
3. Intro statement that reveals word by word on scroll
4. Featured: stacked wide 16:9 cards with dark gradient, 'CATEGORY • YEAR' label, underscore-suffixed title and client name
5. Selected Work: two-up dual project cards
6. 'View all projects' link
7. Footer: Stay in touch email and socials, location
8. Case study pages with hero, process sections and gallery

Palette

Clean, cinematic, contemporary, confident, colorful. The white frame lets bold artwork crops dominate like film stills.

• background#ffffff
• text#0a0a0a
• accent (green)#1ba34d
• muted surface#f5f5f5
• border#e6e6e6
• overlay label#d4d4d4

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

PP Neue Montreal, light-to-regular, 40-64px titles ending in an underscore (PP Neue Montreal is not on Google Fonts; a vibld project loads Encode Sans)

Body

PP Neue Montreal 16px; 12-14px tracked uppercase labels (PP Neue Montreal is not on Google Fonts; a vibld project loads Encode Sans)

A single grotesk with tight modern proportions; the underscore suffix adds a subtle code-like signature.

Spacing and imagery

32px page gutters; cards span the container with ~48px vertical gaps; zero radius; header 64px.

Vivid, saturated art and 3D imagery (watercolor florals, street murals, iridescent sculpture) cropped wide with a bottom-left gradient for text.

Components

• Auto-hiding header
• Hero slideshow with Ken Burns
• Scroll-reveal statement
• Featured project card with overlay
• Dual project cards
• Category/year label
• View all link
• Contact footer
• Case study page
• Dark mode toggle
• Mobile drawer menu (Vaul)
• Toast notifications

Interactions

• Header hides on scroll down and reappears on scroll up
• Hero images crossfade with slow zoom
• Statement words brighten progressively as you scroll
• Card images zoom and gradient deepens on hover
• Mobile nav opens as a bottom drawer
• Theme toggle with persistence

Data

• Project{slug, title, client, category, year, cover, featured, sections[], gallery[]}
• HeroSlide{src, alt}
• Profile{name, statement, email, location, socials[]}

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, minimal studio portfolio for a fictional brand designer, "Kestrel Bureau". It targets startups and cultural clients comparing independent studios. The page should feel like a film reel: a slow-zooming hero slideshow, a manifesto that lights up word by word as you scroll, and wide featured project cards with overlaid titles. Deeper case study pages show the process.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix) and lucide-react. Use Embla Carousel with the fade and autoplay plugins for the hero, Framer Motion (`useScroll`/`useTransform`) for the word reveal and header hide, Vaul for the mobile drawer, Sonner for toasts and React Router for `/`, `/work`, `/work/:slug`, `/about` and `/contact`. Static only.

### Pages & layout
1. Header, 64px, white: a wordmark ending in a period on the left and three uppercase links with 0.12em tracking on the right. It hides when scrolling down and returns when scrolling up.
2. Hero: a full-width, 85vh slideshow with 3-5 images, a 1.2s crossfade and a 1.0 to 1.08 scale over 6s.
3. Statement: a 2-3 sentence positioning line at 40-48px. Words start at 20% opacity and reach full as you scroll.
4. Featured: three full-width 16:9 cards. At bottom-left: a "CATEGORY • YEAR" label, the title with a trailing underscore at 48px and the client name.
5. Selected work: a two-column grid of smaller cards and a "View all projects →" link.
6. Footer: "Stay in touch" with email and socials, a location column and copyright.
7. Case study: hero, overview and meta, process blocks and an image gallery.

### Design system
- `--background: #ffffff`, `--foreground: #0a0a0a`, `--accent: #1ba34d` (used sparingly for focus rings and small markers), `--muted: #f5f5f5`, `--muted-foreground: #737373`, `--border: #e6e6e6` (decorative), `--input-border: #737373`, `--radius: 0`.
- Dark: #0a0a0a background, #f5f5f5 text and #a3a3a3 muted text.
- Fonts: a neo-grotesk. PP Neue Montreal if you have a license, otherwise Encode Sans from Google Fonts. Titles use 300/400; labels are 12px/500 uppercase with 0.14em tracking. Scale: 12 / 14 / 16 / 24 / 40 / 64px; body 16px at 1.6 line-height, ~65ch measure.
- Spacing: 8px base, 32px gutters, 48px gap between cards, 128px sections.
- Motion: 500ms cubic-bezier(0.22,1,0.36,1) for UI and 6s linear for Ken Burns.

### Components & interactions
- Header: visible, hidden and mobile-open states, with a Vaul drawer on mobile.
- ProjectCard: bottom gradient overlay. Hover or focus zooms the image to 1.04 and darkens the gradient. Show a skeleton while loading.
- WordReveal: splits the text into spans. Under reduced motion it renders at full opacity.
- HeroSlideshow: dots and a pause button; autoplay stops on focus and hover.
- ThemeToggle with persistence.

### Data & state
`Project{slug, title, client, category, year, cover, featured, sections, gallery}` and `HeroSlide{src, alt}` as typed arrays. UI state covers header visibility, drawer and theme. Seed six fictional projects with invented company names.

### Accessibility
- Card text sits on a bottom-left black gradient that reaches 65% opacity behind the text (effective #595959 or darker, even over white imagery): white labels and titles reach 7:1 and the #d4d4d4 client line 4.73:1.
- The auto-advancing hero needs a pause control, and the word reveal must never hide content from screen readers.
- The header must return on keyboard focus.
- Green #1ba34d is used only for focus rings and small markers (3.29:1 on white, 3.01:1 on #f5f5f5); it is never a text color.
- Verified contrast: body #0a0a0a on #ffffff = 19.8:1; muted #737373 on #ffffff = 4.74:1; card title #ffffff on #595959 = 7.0:1; focus ring #1ba34d on #ffffff = 3.29:1.

### Security
- The contact page uses zod on the client and in a serverless function, with a honeypot and rate limit.
- No secrets client-side. External links use `rel="noopener noreferrer"`.

### Performance & SEO
Load the first hero image eagerly and the rest lazily. Use `srcset`/AVIF and code-split the case study route. Add per-project meta and OG images and keep one H1 per page (the visual hero has none, so add a visually hidden H1).

### Guardrails
- Do write all copy yourself and use placeholder imagery (Unsplash-style stock or generated); no trademarked names, client logos or real people.
- Don't present invented testimonials or awards as real; label sample content as sample.
- Keep components small and fully typed; no `any`. Surface errors visibly instead of failing silently.
- Don't collect or store more personal data than the contact form needs.
- Done when:
  - [ ] Header hides/reveals on scroll and on keyboard focus
  - [ ] Hero slideshow is pausable and respects reduced-motion
  - [ ] Overlay text passes contrast on every card
  - [ ] Word reveal is readable by screen readers
  - [ ] Case study route renders from typed data

Open the builderAll templatesThis palette on its own