Nadia Kolbe

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

The Instrument serif and sans are designed as siblings, which is the point of the design, and the pairing appears nowhere else.

• Instrument SerifHeadings: headline 96px at -2.4px, italic for emphasis
• Instrument SansBody: body 16-20px, 16px semibold uppercase section labels

Who it is for

• Product and brand designers
• Designers job-hunting in competitive markets
• Freelancers wanting a distinctive personal brand
• Creative generalists (product, motion, sound)

Layout

1. Fixed blurred header with breadcrumb 'Name / Page'
2. Hero: large serif sentence introduction with italic employer name, right-aligned supporting sentence
3. Info grid: Contact, Social, Other (resume) columns and 'Selected work ↓' link
4. Experience section with hover cards (company, years, role)
5. Personal projects
6. Education list with degree, years, school
7. About paragraphs with bolded disciplines and italic sign-off
8. Case study pages via client-side routing

Palette

Bold, warm, confident, editorial, optimistic. One loud color turns a minimal CV into a statement.

• background coral#ed5d31
• text#000000
• secondary deeper orange#eb4614
• accent#eb4e1e
• muted surface#e14414
• border#000000
• muted text (near-black brown)#1f0c06

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

Instrument Serif regular, 96px with -2.4px tracking, italic for emphasis

Body

Instrument Sans 16-20px, line-height 1.6; section labels 16px semibold uppercase with 0.4px tracking

Serif/sans siblings from the same family give editorial polish on a loud background

Spacing and imagery

32px outer margins, content column offset to ~288px left start for info and sections, 4-column info grid, generous vertical gaps, 8px radius for hover cards

Almost none on the home page; case studies carry product imagery

Components

• Breadcrumb header with blur
• Serif intro statement
• Contact/social/other info grid
• Selected work anchor link
• Experience hover cards
• Personal projects list
• Education list
• About block
• Case study page
• Toasts
• Mobile drawer

Interactions

• Framer Motion scroll-triggered entrances
• Hover cards reveal details/raise
• Breadcrumb updates with route
• Anchor smooth scroll to selected work
• Client-side route transitions
• Copy email toast

Data

• Experience{company, role, start, end, summary}
• Project{slug, title, category, year, images[], body}
• Education{degree, school, years}
• Profile{name, currentRole, company, city, email, links[]}

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 personal portfolio for a fictional product designer called **Nadia Kolbe**. The audience is hiring managers and freelance clients who see dozens of minimal portfolios a week. This one uses a single saturated coral background, black type and an editorial serif introduction to be memorable, while staying a clear, scannable record of experience, projects, education and contact options.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS with CSS-variable tokens, shadcn/ui (Radix HoverCard, Sheet), lucide-react, React Router, Framer Motion for entrance reveals, Embla for case-study galleries, Sonner for toasts, Vaul for the mobile menu, and react-helmet-async for SEO and Open Graph tags. No backend.

### Pages & layout
1. Fixed header: breadcrumb "Name / Page" left on a blurred coral bar with a bottom hairline.
2. Hero: a large serif sentence ("Nadia Kolbe is a product designer currently at *Fieldnote* in Lisbon."), with the employer in italic; a right-aligned supporting sentence below.
3. Info grid: columns for Contact (email with copy button), Social (two links), Other (resume PDF) and a "Selected work ↓" anchor.
4. Selected work: 4–6 project rows or cards linking to case studies.
5. Experience: rows with company, years and role that raise into a card with a short summary on hover or focus.
6. Personal projects, Education (degree, years, school), and About (short paragraphs with bolded disciplines and an italic sign-off).
7. Case study: breadcrumb updates to the project, hero image, context, process, outcome, gallery, next project.

### Design system
Tokens: `--background: #ed5d31; --foreground: #000000; --secondary: #eb4614; --accent: #eb4e1e; --muted: #e14414; --muted-foreground: #1f0c06; --border: #000000; --radius: .5rem`. Fonts: Instrument Serif 400 (and italic) plus Instrument Sans 400/600. Scale: clamp(48px, 7.5vw, 96px) intro with -2.5% tracking; 20 / 16 / 14px (16–20px body at line-height 1.6, max 70ch; 14px only for weight-600 meta); section labels 16px uppercase semibold with 0.025em tracking. Spacing: 32px margins, content column starting about 22% from the left on desktop, 120px section gaps. Borders: 1px black at 15% opacity (decorative hairlines only; interactive edges use solid black). Motion: 500ms fade-up on section entry; 200ms hover card raise. Light, single-color theme; a toggle to a neutral cream version is optional.

### Components & interactions
- Experience row: hover or focus opens a card (Radix HoverCard also opens on focus); on touch, tapping expands inline.
- Copy email: button copies and shows a toast; falls back to `mailto:`.
- Breadcrumb: reflects the route and is a `<nav aria-label="Breadcrumb">`.
- Case-study gallery: keyboard and swipe support.
- Empty and error states for missing images; 404 page on coral with a link home.

### Data & state
`Profile{name,role,company,city,email,links[]}`, `Experience{company,role,start,end?,summary}`, `Project{slug,title,category,year,images[],body}`, `Education{degree,school,years}`. All static, typed, in one content folder. Use invented companies and schools.

### Accessibility
Black on #ed5d31 is 6.2:1 and stays above 5:1 on the deeper #eb4614, #eb4e1e and #e14414 surfaces, so body text passes everywhere. Any brown lighter than #1f0c06 drops below 4.5:1 on those deeper oranges, so secondary text uses #1f0c06 and is distinguished by size and weight rather than a lighter tint. Never place white text on the coral (about 3:1). Focus rings should be 2px black with a 2px offset. The serif intro is the H1. Reduced motion disables reveals. Hover-only details must be keyboard and touch reachable. Verified contrast: body text on coral background: #000000 on #ed5d31 = 6.21:1; text on muted surface: #000000 on #e14414 = 5.04:1; muted text on coral: #1f0c06 on #ed5d31 = 5.58:1; coral text on black button: #ed5d31 on #000000 = 6.21:1.

### Security
Static: resume served as a PDF from your own origin; `mailto:` contact; external links use `rel="noopener noreferrer"`; no analytics secrets in the client.

### Performance & SEO
The home page is text only, so aim for Lighthouse 100; preload Instrument Serif and subset it. Lazy-load case-study images; code-split routes. Per-page title, description, and OG image (a coral card with the intro line); Person JSON-LD.

### Guardrails
- Use a fictional person and invented employers; never list real companies or schools.
- Don't present made-up metrics or endorsements as real.
- Publish only the contact details the owner provides.
- Keep components small and typed, never use `any`, and show errors visibly.
- Done when: every text color on coral passes AA; experience details open by hover, focus and tap; the breadcrumb updates per route; each route has unique OG tags; the layout reflows to one column at 360px.

Open the builderAll templatesThis palette on its own