Nadia Holt

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

Hubot Sans gives a distinctive grotesk headline, Atkinson Hyperlegible Next is a very readable body, and Geist Mono keeps the indices tidy.

• Hubot SansHeadings: headline 72px 500 at -1.8px
• Atkinson Hyperlegible NextBody: body 16-18px at 1.6
• Geist MonoFigures and code: index numerals

Who it is for

• Senior product designers
• Designers who speak at events and write articles
• Freelancers pitching startups and enterprises
• Agency professionals presenting outcomes

Layout

1. Header: circular avatar with name and city left; Work, Contact and a round theme toggle right
2. Hero: large two-line headline, supporting paragraph, primary 'Email me' button and outlined 'Let's connect' button
3. 'How can I help you?' two service cards (Design Request, Consulting) with arrow links
4. Selected work: large rounded image cards with '01 / 06' index overlay, client and years, case study title
5. Speaking list of talks
6. Writing list of articles
7. Closing thank-you section with contact
8. Case study pages

Palette

Friendly, professional, calm, trustworthy, polished. It reads like a senior designer's personal site: approachable yet credible.

• background (lavender white)#f3f1f9
• text (deep indigo)#18112c
• secondary#ddd7ea
• card#ebe7f3
• accent#352956
• muted#e3dfec
• border#d6cfe2
• muted text#6b6280
• input border#8f7cb0

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

Clash Grotesk 500, 72px, -1.8px tracking (Clash Grotesk is not on Google Fonts; a vibld project loads Hubot Sans)

Body

Atkinson Hyperlegible Next 16-18px at 1.6 line-height; mono-style numerals for indices

A distinctive grotesk headline with a highly readable Atkinson Hyperlegible Next body; tinted indigo text instead of black adds warmth.

Spacing and imagery

1180px container, 48px gutters, cards radius ~16-20px, buttons radius ~6px, generous 96px sections.

Lifestyle and device photography for case studies in large rounded cards with a darkened index label; circular headshot avatar.

Components

• Avatar + name header
• Theme toggle button
• Hero headline with dual CTAs
• Service cards with arrow links
• Numbered case study cards
• Client and year meta
• Speaking list
• Writing list
• Contact form
• Closing thank-you section
• Case study page layout
• Toasts

Interactions

• Project cards zoom image and lift shadow on hover
• Subtle parallax on case study images
• Theme toggle light/dark
• Arrow links nudge on hover
• Contact form with validation and success toast
• Header gains a solid lavender background on scroll

Data

• CaseStudy{index, slug, client, years, title, cover, sections[]}
• Service{label, title, cta}
• Talk{title, event, date, url?}
• Article{title, outlet, date, url}
• Inquiry{name, email, type, 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 an approachable, lavender-tinted portfolio for a fictional senior product designer, "Nadia Holt". It serves startup founders, enterprise product leaders and event organizers. The site should say quickly what she does, offer two clear ways to engage (a project or consulting), show six numbered case studies and prove thought leadership through talks and articles.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS with class dark mode, shadcn/ui (Radix Button, Card, Form, Select, Toast via Sonner, Vaul for mobile nav) and lucide-react. Use Embla Carousel for case study galleries, react-hook-form + zod for the contact form, React Router and optionally Recharts for outcome charts in case studies. One serverless function sends inquiries.

### Pages & layout
1. Header: a 40px round avatar, name (500) and city (small, muted) on the left. On the right: Work, Contact and a round bordered theme toggle.
2. Hero: a two-line headline at clamp(40px, 6vw, 72px), a 2-sentence paragraph at 18px in muted indigo (#6b6280), a filled "Email me" button with a mail icon and an outlined "Let's connect" button with a social icon.
3. "How can I help you?": two cards (`--card` background, 20px radius), each with a small label, a 24px title and an arrow link.
4. Selected work: full-width rounded cards with a mono "01 / 06" index at bottom-left over a darkened image. Below each card: "Client · Years" and the case title.
5. Speaking: rows with talk title, event and year. Writing: rows with article title, outlet and date, with ↗ for external links.
6. Closing: a thank-you line and contact form.

### Design system
- Light: `--background: #f3f1f9`, `--foreground: #18112c`, `--secondary: #ddd7ea`, `--card: #ebe7f3`, `--accent: #352956`, `--muted: #e3dfec`, `--border: #d6cfe2` (decorative), `--muted-foreground: #6b6280`, `--input-border: #8f7cb0` (inputs and the outline button use `--accent`).
- Dark: background #120d20, foreground #eeeaf7, card #1c1530, muted-foreground #b3aac8, input-border #7a6f96.
- Fonts: Clash Grotesk 500 (Fontshare) or Hubot Sans for display; Atkinson Hyperlegible Next 400/500 for body; Geist Mono for indices. Scale: 12 / 14 / 16 / 18 / 24 / 36 / 72px.
- Spacing: 8px base, 96px sections. Radius: 6px on buttons, 20px on cards.
- Shadows: `0 10px 30px -12px rgb(24 17 44 / 0.25)` on hover.
- Motion: 300ms ease-out and 600ms image zoom.

### Components & interactions
- Buttons: primary (indigo fill) and outline states for hover, focus ring, active and disabled/loading (spinner).
- ServiceCard: the whole card is clickable (a single link), and the arrow nudges on hover.
- CaseCard: image zoom and shadow lift. Show a skeleton while loading. The index overlay is text.
- ContactForm: name, email, type (project/consulting/speaking) and message. States for invalid, submitting, success and error.
- Empty lists: hide Speaking or Writing when there is no data.

### Data & state
Typed data files: `CaseStudy{index, slug, client, years, title, cover, sections}`, `Talk`, `Article` and `Service`. Theme is stored in localStorage. Seed six invented clients (finance, health, commerce, onboarding, developer tools, community), four talks and four articles, all fictional.

### Accessibility
- Indigo #18112c on lavender is 16.24:1. Muted text is #6b6280 (5.09:1 on the background, 4.68:1 on cards).
- The white index overlay sits on a 60% black scrim (effective #666666 or darker).
- The avatar has alt text with the name. The theme toggle has `aria-label` and `aria-pressed`.
- The form has visible labels and error text linked with `aria-describedby`.
- Verified contrast: body #18112c on #f3f1f9 = 16.24:1; muted #6b6280 on #f3f1f9 = 5.09:1; button #ffffff on #352956 = 13.1:1; input border #8f7cb0 on #f3f1f9 = 3.3:1.

### Security
- zod on the client and in the function, with a honeypot, rate limit and length caps.
- No API keys in the client. External article links use `rel="noopener noreferrer"`.

### Performance & SEO
Lazy-load case covers with `srcset`, preload the display font, and add Person JSON-LD plus per-case meta and OG images. Target Lighthouse 95+.

### 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:
  - [ ] Hero offers two distinct CTAs that work (mailto and social)
  - [ ] Six case cards render with index overlays and meta
  - [ ] Speaking/Writing lists hide when empty
  - [ ] Light and dark themes pass AA
  - [ ] Contact form covers invalid, loading, success, error

Open the builderAll templatesThis palette on its own