Ilse Marrow

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

Gloock is a high-contrast serif with a bold, literary personality for the red lowercase words, and Albert Sans is a neutral grotesk for utility.

• GloockHeadings: lowercase section words 120px in red, 40px serif narrative
• Albert SansBody: body 16px at 1.6, lowercase nav

Who it is for

• Freelance consultants and service professionals
• Solo design studios
• Experts building an authority site
• Small firms needing a polished web presence

Layout

1. Fixed header: lowercase sans links (about, people, expertise, connect) left; red X menu icon and vertical rotated serif wordmark top-right
2. Section opener: giant red lowercase serif word ('people')
3. Large serif narrative paragraph with a red concluding sentence
4. Experience and education lists: serif titles with right-aligned years and hairline dividers
5. Split principal block: dark 3D glass-shapes image left, solid red panel right with serif name, tracked role and centered bio
6. Expertise/services section
7. Connect section with contact links
8. Case study pages with galleries and key contributions

Palette

Editorial, confident, warm, literary, bold. It reads like a design magazine profile.

• background (warm paper)#f4f0ec
• text#262626
• muted text#5c5753
• primary red#c32020
• secondary#e5e0dc
• border / rules#262626
• dark image panel#14131c

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

Gloock regular, 120px lowercase section words in red with -3px tracking; 40px serif narrative

Body

Albert Sans 16px, line-height 1.6; lowercase nav

High-contrast didone serif for voice, neutral grotesk for utility; lowercase everywhere feels relaxed and literary

Spacing and imagery

Generous whitespace; 32px left gutter, narrative column ~880px, lists on centered ~830px column with hairline rules, full-bleed 50/50 split panels, 4px radius

Abstract dark 3D renders (glass spheres and cubes with purple light); case study imagery on inner pages

Components

• Lowercase text nav
• Vertical rotated wordmark
• Menu toggle icon
• Giant serif section titles
• Pull-quote narrative with accent sentence
• Experience list with years
• Education list
• Split image + red bio panel
• Services list
• Contact links
• Case study page
• Footer

Interactions

• Fade-in-up on scroll with staggered timing
• Menu icon opens full menu overlay
• Anchor nav smooth-scrolls to sections
• Active section highlight in nav
• Hover underline on links
• Case study gallery carousel

Data

• Experience{company, role, start, end}
• Education{degree, school, start, end}
• Service{title, description}
• CaseStudy{slug, title, client, year, summary, contributions[], images[]}
• Principal{name, role, bio, image}

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 editorial single-founder studio site for a fictional product design consultant called **Ilse Marrow**. The audience is heads of product and founders evaluating a senior consultant. The site should read like a magazine profile: giant serif section words, a confident origin story, a clear experience record, a principal profile, services and contact, plus case-study pages.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix Dialog for the menu overlay), lucide-react, React Router, Framer Motion for staggered fade-up reveals, and Embla for case-study galleries. No backend; contact uses `mailto:` or a single form function.

### Pages & layout
1. Fixed header: lowercase links (about, people, expertise, connect) left; a thin red X/menu icon and a vertically rotated serif wordmark on the right edge.
2. About opener: a huge lowercase red serif word, then a large serif paragraph telling the origin story, ending with one sentence in red.
3. Experience: a list of roles with serif titles, company and years right-aligned, separated by hairlines; then education in the same format.
4. Principal: a full-bleed 50/50 split, an abstract dark 3D render on the left and a solid red panel on the right with a serif name, tracked uppercase role and centered bio in #ffffff.
5. Expertise: 4–6 services with short descriptions and example deliverables.
6. Work: case-study cards leading to pages with a hero title, body, gallery and "key contributions" list.
7. Connect: large serif line, email, social links; footer.

### Design system
Tokens: `--background: #f4f0ec; --foreground: #262626; --primary: #c32020; --primary-foreground: #f4f0ec; --secondary: #e5e0dc; --border: #262626; --muted-foreground: #5c5753; --radius: .25rem`. Fonts: Gloock 400/500 (headings and narrative) and Albert Sans 400/500 (UI and body). Scale: clamp(72px, 10vw, 120px) section words with -2.5% tracking; 40px narrative with 1.05 line-height; 28 / 18 / 16 / 13px (18px body at line-height 1.6, max 70ch; 13px only for weight-500 meta). Spacing: 32px gutters, 160px between sections, hairline 1px dividers at 20% foreground opacity (decorative). Motion: 600ms ease-out fade-up, 80ms stagger. Light only; the red panel is the one saturated block.

### Components & interactions
- Menu overlay: full-screen paper background, large serif links, Esc and focus trap.
- Nav: highlights the current section via IntersectionObserver.
- Experience row: hover shifts the title 4px; focusable if linked to a case study.
- Case-study gallery: arrows and keyboard support, with captions.
- Empty states for missing case-study images; a 404 for unknown slugs.

### Data & state
`Experience{company,role,start,end?}`, `Education{degree,school,start,end}`, `Service{title,text,deliverables[]}`, `CaseStudy{slug,title,client,year,summary,contributions[],images[]}`, `Principal{name,role,bio,image}`. Typed static data; invent all employers (don't name real companies).

### Accessibility
The primary red is #c32020 (deepened from a brighter red that measured only 4.2:1), which gives 5.2:1 on #f4f0ec, so it works for the red narrative sentence and links as well as the giant section words. Text on the red panel is #ffffff (5.9:1). The vertical wordmark is decorative; keep a readable site name in the header for screen readers. Menu toggle needs `aria-expanded`. Reduced motion disables the reveals. Verified contrast: body text on paper: #262626 on #f4f0ec = 13.35:1; muted meta on paper: #5c5753 on #f4f0ec = 6.29:1; red sentence / links on paper: #c32020 on #f4f0ec = 5.22:1; white text on red principal panel: #ffffff on #c32020 = 5.92:1.

### Security
Static site: `mailto:` or a validated form (zod on the client and function, honeypot, rate limit); external links use `rel="noopener noreferrer"`; no keys in the client.

### Performance & SEO
Preload Gloock and Albert Sans with `font-display: swap`, subset to Latin. Lazy-load the 3D render and case-study images. Person and ProfessionalService JSON-LD; per-case-study meta and OG images.

### Guardrails
- Write original biography copy and use invented employers; no real company names or logos.
- Don't publish testimonials presented as real.
- Collect no personal data beyond an optional contact form.
- Keep components small and typed, never use `any`, and show errors visibly.
- Done when: all section words and body text pass AA at their sizes; the menu overlay is keyboard-accessible; the current section highlights in the nav; case-study routes resolve with galleries; the split panel stacks on mobile.

Open the builderAll templatesThis palette on its own