Marlowe Page

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 light Garamond named in the notes stays for the vermilion display, and Ysabeau Office is a graceful humanist sans that suits the boutique profile.

• Cormorant GaramondHeadings: name 96px at 300, section titles ~64px, vermilion
• Ysabeau OfficeBody: body 22px, labels and long descriptions

Who it is for

• Product managers and designers job hunting
• Consultants and freelancers
• Mid-to-senior professionals
• Recruiters reviewing candidates

Layout

1. Sticky slim header: name + role left in serif, 'Contact' link right, hairline bottom border
2. Hero: small uppercase role eyebrow, first and last name in huge light serif flanking a centered arch-cropped portrait, year below
3. About Me: short narrative paragraph
4. Experience: split layout with sticky section title left and stacked role entries right (title at company, date range, description), separated by rules
5. Education
6. Skills grid with hover effects
7. Contact: email, website, location, social links
8. Floating back-to-top circular button

Palette

elegant, warm, confident, editorial, monochrome. It feels like a boutique magazine profile rather than a CV.

• background (cream)#f5f1ea
• primary text / accent (vermilion)#e8341f
• secondary text (warm gray)#6b625a
• divider#e8d6cc
• button fill#c42a17
• body text#3a2f2a

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

Cormorant Garamond Light (300, display only), 96px name, normal tracking; section titles ~64px

Body

Large 22px body copy in warm dark #3a2f2a at 1.6 line-height (vermilion is reserved for display text at 24px+); small Ysabeau Office uppercase eyebrows at 13px, weight 500, 0.12em tracking

A high-contrast light Garamond for display, set in vermilion at display sizes, with a system sans for labels and long descriptions.

Spacing and imagery

Wide 1100px container, asymmetric 5/7 split grid, very large vertical rhythm (120px+ between sections), pill back-to-top button, arch-shaped image mask.

A single professional portrait masked in an arch shape; optional company logos in the experience list; otherwise purely typographic.

Components

• Sticky name/role header
• Uppercase eyebrow label
• Split-name hero with arch portrait
• About paragraph
• Sticky section titles
• Experience entries with date ranges
• Education list
• Skills grid with hover
• Contact block with social links
• Back-to-top floating button
• Skip link

Interactions

• Scroll-linked fade and slide reveals (GSAP or Framer Motion)
• Section titles stick while entries scroll
• Skills items highlight on hover
• Back-to-top button appears after scrolling
• Smooth scroll to contact
• Link underline animations

Data

• Person{name, role, year, bio, portrait, email, website, location, socials[]}
• Experience{title, company, start, end, description, logo?}
• Education{degree, school, years}
• Skill{name, category}

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 "Marlowe Page", a one-page personal resume site for a senior product professional. Recruiters and hiring managers should get a striking first impression (an oversized serif name wrapped around an arched portrait) and then read the career history comfortably. It replaces the PDF resume with a shareable, printable web page.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Button, Separator, Tooltip), lucide-react. Framer Motion for reveal-on-scroll and the back-to-top button; CSS `position: sticky` for section titles. No backend; the contact is a mailto link.

### Pages & layout
1. **Header**: sticky, 56px tall, cream background with a hairline border. Name and role on the left in serif, a "Contact" anchor on the right.
2. **Hero**: centered small uppercase role eyebrow; first name and last name in very large light serif on either side of a centered portrait masked in an arch (rounded top only); the current year below in small serif.
3. **About**: a two-column split with the label left and a large readable paragraph right.
4. **Experience**: the same split. The section title sticks on the left while role entries scroll on the right. Each entry has a serif "Role at Company" title, a date range and a description, separated by thin rules.
5. **Education**: degree, school and years.
6. **Skills**: a 2 to 4 column grid of skill chips grouped by category.
7. **Contact**: email, website, city and social links. A floating round back-to-top button sits bottom right.

### Design system
Monochrome warm theme. Tokens: `--background: #f5f1ea`, `--ink: #e8341f` (vermilion, for headings and links), `--text: #3a2f2a` (body copy, to keep long text readable), `--muted: #6b625a`, `--link: #c42a17` (small links, chip fills and focus rings), `--rule: #e8d6cc` (decorative). Fonts: Cormorant Garamond 300/500 for display and titles (300 only at 32px and above), Ysabeau Office 400 for descriptions and eyebrows. Scale: 112/64/32/22/16/13px; eyebrows 13px uppercase at 0.12em tracking. Spacing: 8px base with 144px section gaps. Grid: 5/7 columns at desktop, stacking on mobile. Radius: arch mask `border-radius: 999px 999px 0 0`, round buttons. Motion: 500ms fade and 16px rise, `ease-out`. Light only, with a print stylesheet.

### Components & interactions
- Header link: hover animates an underline; focus shows a 2px `--link` ring.
- Hero names fade in from the sides while the portrait scales from 0.96.
- Experience entry: hover shifts the left border to ink; the date is shown in serif italic.
- Skill chip: hover inverts to a `--link` fill with cream text.
- Back-to-top: hidden until 600px of scroll; states for hover, focus and active.
- Missing portrait: show initials inside the arch as a fallback.

### Data & state
One typed `profile.ts`: `Person{name, role, bio, portrait, email, website, location, socials}`, `Experience{title, company, start, end|null, summary}`, `Education{degree, school, start, end}`, `Skill{name, group}`. No global state. Seed a fictional person with 3 roles, 2 degrees and 12 skills.

### Accessibility
Vermilion `#e8341f` on cream is 3.77:1, which is acceptable only for display text at 24px and above, so use the darker `#3a2f2a` for paragraphs and `#c42a17` for small links. Include a skip link, `<header>`, `<main>` and `<footer>`, and a single H1 containing the full name (the split words are spans). The portrait needs alt text naming the person. Visible focus rings; reduced motion disables the reveals. Printing should give a clean one-column layout. Verified contrast: body #3a2f2a on #f5f1ea = 11.51:1; muted #6b625a on #f5f1ea = 5.3:1; links #c42a17 on #f5f1ea = 5.05:1; display vermilion (large only) #e8341f on #f5f1ea = 3.77:1; chip hover #f5f1ea on #c42a17 = 5.05:1.

### Security
Static site with no forms. Obfuscate the email lightly against scrapers, add `rel="noopener noreferrer"` to social links, and put no analytics keys in source.

### Performance & SEO
Preload the display font subset and serve a responsive portrait in WebP. Add a Person JSON-LD block, OG and Twitter cards and a descriptive title ("Name, Role"). Use passive scroll listeners. Target Lighthouse 95+.

### Guardrails
- Use original copy and placeholder imagery only, with no real company logos or trademarks.
- Do not add fake endorsements presented as real.
- Show only contact details the person chooses to publish.
- Keep components small and typed, with no `any`, and show fallbacks visibly.
- Done when: the hero renders with the arch portrait; section titles stick on desktop; the back-to-top works by keyboard; body text contrast passes AA; the print view shows one clean column.

Open the builderAll templatesThis palette on its own