Hollis Ward

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

A single literary text serif carries this monograph-like page, and Source Serif 4 appears in only a couple of templates.

• Source Serif 4Headings: hero ~48px regular, short uppercase contact line
• Source Serif 4Body: body 16px, italic for small cues

Who it is for

• Freelance graphic designers and art directors
• Small design studios pitching premium clients
• Designers who want case studies linked from one gallery
• Creatives who prefer an editorial, typographic look

Layout

1. Minimal top bar: wordmark (first name) left, 'Work' and 'About' links right, hairline bottom border
2. Text-only hero: multi-line serif statement in terracotta at ~48px, italic 'scroll down' hint beneath, generous top/bottom padding
3. Full-bleed two-column project grid with no gutters; each tile is a large image with title and year revealed on hover
4. Closing contact band: short uppercase serif heading, one line of copy and a 'Get in touch' link
5. Footer: copyright left, Instagram/LinkedIn links right
6. Project detail pages: full-screen hero image, captioned gallery with full-width and half-width rows, circular prev/next navigation

Palette

Warm, literary, calm, confident, understated. It feels like the opening spread of a design monograph printed on uncoated cream stock.

• background#f3ebe2
• text#392a22
• accent / headings#9c583b
• muted surface#f0ebe6
• border (terracotta 20%)#9c583b33
• secondary text#7e6558

Every checked pair, measured again

As vibld’s tokens

The palette on the 15+ color tokens vibld styles a project with, each text color 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

Source Serif 4, regular 400, ~48px, sentence case for the hero; the contact heading is a short uppercase line with +0.05em tracking

Body

Source Serif 4 16px, with italic used for small cues

A single serif family carries everything, which gives the page a book-like, literary tone; hierarchy comes from size and color rather than weight.

Spacing and imagery

Sparse. Hero text sits in a ~900px column with large vertical padding; the grid is full-bleed with zero gutters so images read as one continuous wall. Radius is essentially zero on imagery.

Large, color-rich lifestyle and print-design photography cropped to equal tiles. No borders, shadows or overlays until hover.

Components

• Wordmark top bar with two text links
• Serif statement hero
• Scroll cue in italic
• Two-column full-bleed project grid
• Project tile with hover caption (title + year)
• Contact CTA band with uppercase heading
• Social links footer
• Project detail hero image
• Captioned gallery rows (full / half width)
• Circular prev/next project navigation
• Skip-to-content link
• Theme variant switcher (optional palette presets)

Interactions

• Hover on project tile fades in a caption overlay and slightly scales the image
• Smooth page transition between index and project pages
• Images lazy-load with a soft fade as they near the viewport
• Nav links shift color on hover with an underline
• Circular navigation wraps from last project back to first
• Contact form shows inline validation and a success toast

Data

• Project{slug, title, year, cover, discipline, summary, gallery: GalleryRow[]}
• GalleryRow{layout: 'full'|'half', images: {src, alt, caption}[]}
• SiteProfile{name, statement, location, socials[]}
• Inquiry{name, email, message} (contact form only)

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 color 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, labeled 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 warm, typographic single-page portfolio for a fictional art director called "Hollis Ward". The audience is prospective clients and agencies who want to judge taste quickly. The page must do three jobs: introduce the designer in one large sentence, show six to eight projects as a big image wall, and funnel visitors to get in touch.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix) for the dialog, toast and form primitives, lucide-react for the few icons. Use React Router for index and `/work/:slug` routes, Framer Motion for page transitions and hover fades, and react-hook-form + zod for the contact form. No backend is required; send the form through a small serverless function or a form service.

### Pages & layout
1. Top bar: wordmark left, "Work" and "About" right, 1px border below.
2. Hero: a three to five line serif statement (name, role, city, disciplines) at display size in the accent color, then a small italic scroll hint.
3. Project wall: edge-to-edge two-column grid with no gutter; one column on mobile.
4. Contact band: uppercase serif heading, one line of copy, a "Get in touch" link that opens a form dialog.
5. Footer: copyright and two social links.
6. Project page: full-viewport cover, intro paragraph, gallery rows that alternate full-width and paired half-width images with captions, then circular previous/next links.

### Design system
- Colors: `--background: #f3ebe2`, `--foreground: #392a22`, `--accent: #9c583b`, `--muted: #f0ebe6`, `--border: #9c583b33` (decorative hairlines only), `--input-border: #9c583b`, `--secondary-text: #7e6558`.
- Fonts: Source Serif 4 for everything, loaded from Google Fonts with 400 and 400 italic. Scale: 14 / 16 / 20 / 32 / 48 / 64px (14px only for captions and meta, never paragraphs), line-height 1.15 for display and 1.6 for body; cap paragraphs at ~65ch.
- Spacing: 4px base; section padding 96-160px; text column max 56rem.
- Radius 0 on images, 6px on inputs. No shadows.
- Motion: 250ms ease-out for hovers, 450ms cubic-bezier(0.22,1,0.36,1) for route transitions. Light theme only; keep tokens swappable for palette presets.

### Components & interactions
- ProjectTile: default shows only the image. On hover or focus it shows a cream overlay with title and year and scales the image to 1.03. The pressed state navigates.
- Gallery row: full or half layout with figure/figcaption.
- ProjectPager: previous/next that wraps around.
- ContactDialog: fields for name, email and message. Show a spinner while submitting, disable the button, show inline errors and a toast when it succeeds.

### Data & state
Store projects in a typed `projects.ts` array: `{slug, title, year, cover, discipline, summary, gallery}`. Put site profile data in a config object. The only runtime state is the dialog and form. Seed six fictional projects across branding, editorial, product and illustration.

### Accessibility
- The terracotta accent is deepened to #9c583b so it passes 4.5:1 on cream at any size; use #392a22 for body copy and #7e6558 for secondary text. The contact heading is short, uppercase and tracked +0.05em.
- Captions revealed on hover must also appear on keyboard focus. Give tiles a visible 2px focus ring in the foreground color.
- Every image needs meaningful alt text. Add a skip link and landmark elements.
- Honor `prefers-reduced-motion` by disabling scale and route animations.
- Verified contrast: body #392a22 on #f3ebe2 = 11.64:1; accent #9c583b on #f3ebe2 = 4.59:1; secondary #7e6558 on #f3ebe2 = 4.57:1; input border #9c583b on #f3ebe2 = 4.59:1.

### Security
- Validate the form with zod on the client and again in the serverless handler.
- Add a honeypot field and basic rate limiting.
- Never put API keys in client code.
- Social links open with `rel="noopener noreferrer"`.

### Performance & SEO
Serve responsive AVIF/WebP images with `srcset` and lazy-load everything below the hero. Code-split project routes. Give each project unique title and description meta plus OG images. Use one H1 per page.

### 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:
  - [ ] Index shows hero, at least six tiles and the contact band at 375px and 1440px widths
  - [ ] Tile captions appear on both hover and keyboard focus
  - [ ] Project pages render mixed full/half gallery rows and wrap-around navigation
  - [ ] Contact form validates, blocks spam via honeypot and shows a success toast
  - [ ] Axe scan reports no serious violations

Open the builderAll templatesThis palette on its own