Seren Maddox

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

Livvic is a friendly, slightly playful sans that stays calm in text, so the floating artworks keep the energy.

• LivvicHeadings: two-line title 72px 500 uppercase at 0.05em
• LivvicBody: body 18px at 1.6, 12px tracked labels

Who it is for

• Visual artists launching an online portfolio
• Artists preparing gallery or residency applications
• Painters with 20+ works needing detail pages
• Artists promoting an exhibition or open studio

Layout

1. Minimal header: initials 'S.M.' left, hamburger right opening a fullscreen nav overlay
2. Parallax hero: ~12 artwork tiles scattered around the viewport at different depths; centered two-line uppercase title, thin divider, subtitle, outlined pill CTA, 'Scroll' cue
3. Three-column masonry gallery of artworks (2 on tablet, 1 on mobile)
4. Artwork detail page: large image, title, medium, dimensions, year, availability, inquiry form
5. About / statement and exhibition section
6. Contact / collector inquiry

Palette

Playful, vivid, airy, kinetic, artistic. It feels like walking into a studio with canvases pinned at different depths.

• background (warm off-white)#fffdf9
• text#121211
• primary#18181b
• muted#f4f4f5
• border#e4e4e7
• scroll cue gray#6b6b6b
• input border / secondary text#6b6b6b

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

Livvic 500, 72px uppercase for the short two-line title, 0.05em tracking

Body

Livvic 18px at 1.6 line-height; 12px tracked uppercase labels

A single friendly grotesk, with uppercase kept to the short title and labels, keeps the text calm so the floating artworks carry the energy.

Spacing and imagery

Hero is a free-form scatter within the viewport; gallery uses 3 columns with ~40px gutters and 20px page margins; small ~4px radius on tiles; pill button fully rounded.

Saturated abstract paintings, brushes, paint tubes and collage close-ups, in portrait tiles with soft blur on distant layers.

Components

• Initials logo
• Hamburger with fullscreen nav overlay
• Parallax artwork field
• Centered hero title and subtitle
• Outlined pill CTA
• Scroll cue
• Masonry artwork grid
• Artwork detail page
• Artwork meta table
• Collector inquiry form
• Exhibition/event block
• Mobile responsive nav

Interactions

• Hero tiles move with mouse position and scroll depth, with blur/scale/opacity by layer
• Title fades and moves up as hero scrolls away
• Masonry items fade in on scroll
• Hover on artwork scales slightly and shows the title
• Overlay nav opens with staggered link animation
• Inquiry form validates and confirms with a toast

Data

• Artwork{slug, title, medium, dimensions, year, image, availability: 'available'|'sold'|'nfs', price?}
• Exhibition{title, venue, dates, description}
• Inquiry{artwork_slug, name, email, 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 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 motion-rich portfolio for a fictional painter, "Seren Maddox". It is aimed at collectors, curators and residency panels. The first screen is a playful depth field of artworks that drift with the cursor and scroll around a calm centered title. Below it, a masonry gallery leads to one page per artwork with its details and an inquiry form for collectors.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix Dialog/Sheet, Form, Toast) and lucide-react. Use GSAP with ScrollTrigger (or Framer Motion `useScroll`) for scroll-linked parallax, a pointer-tracking hook for the mouse offset, TanStack Router or React Router for `/`, `/art/:slug` and `/about`, and react-hook-form + zod for inquiries. The only backend is one serverless or edge function to relay inquiries by email. Embla is optional for detail-page alternate views.

### Pages & layout
1. Header: two-letter initials ("S.M.") on the left and a hamburger on the right that opens a full-screen overlay with large links (Work, About, Exhibitions, Contact).
2. Hero at 100vh: 10-14 artwork tiles placed absolutely at preset positions and assigned to three depth layers. Center: a two-line uppercase title at 72px, a 56px hairline, a sentence-case subtitle, an outlined pill "Let's connect" and a "Scroll" cue with a vertical line.
3. Gallery: 3 columns at 1024px and up, 2 at tablet and 1 on mobile. Tiles have 4px radius and natural ratios.
4. Artwork page: the image on the left (or top); on the right the title, a meta list (medium, dimensions, year), an availability badge and an inquiry form. Previous/next artwork at the bottom.
5. About: artist statement, CV highlights and an upcoming exhibition card.

### Design system
- `--background: #fffdf9`, `--foreground: #121211`, `--primary: #18181b`, `--muted: #f4f4f5`, `--border: #e4e4e7` (decorative), `--input-border: #6b6b6b`, `--muted-foreground: #6b6b6b`, `--radius: 4px`. Pills use 9999px.
- Font: Livvic (Google Fonts) at 400/500. Scale: 12 / 14 / 18 / 24 / 40 / 72px. Titles use 0.05em tracking, labels 0.2em. Keep a clear zone around the title so no artwork tile ever drifts behind text.
- Spacing: 8px base, 40px gallery gutter, 20px page margin.
- Motion: layer offsets of 10, 25 and 45px for the mouse. On scroll, far layers blur to 4px and fade. Use 150ms lerp smoothing and 500ms reveals. Light only.

### Components & interactions
- ParallaxField: uses transforms only (no layout thrash) and is throttled with rAF. It is static under reduced motion or on touch without a fine pointer.
- PillButton: outline by default; hover fills with ink and inverts the text; clear focus ring.
- ArtworkTile: a blur placeholder while loading. Hover scales to 1.02 and shows a caption.
- InquiryForm: name, email, message and a prefilled artwork. States for invalid, submitting, success (toast) and error (retry).
- OverlayNav: staggered links and Esc to close.

### Data & state
`Artwork{slug, title, medium, dimensions, year, image, availability, price?}` and `Exhibition{title, venue, dates}` as typed data. The inquiry sends `{artwork_slug, name, email, message}`. Seed 20-24 invented artworks with placeholder images.

### Accessibility
- Hero tiles are decorative (`aria-hidden`). The title and CTA are in normal DOM order.
- The "Scroll" cue and other secondary text use #6b6b6b (5.25:1 on the off-white background).
- The overlay nav is a modal dialog with focus trap. Artwork alt text describes the piece.
- Availability is conveyed in text, not only color. Honor reduced motion.
- Verified contrast: body #121211 on #fffdf9 = 18.45:1; secondary #6b6b6b on #fffdf9 = 5.25:1; pill hover #ffffff on #18181b = 17.72:1; input border #6b6b6b on #fffdf9 = 5.25:1.

### Security
- zod on the client and in the function. Honeypot plus rate limit. Cap the message at 2,000 characters.
- Never collect payment details. Sales happen offline or via hosted checkout later.
- No secrets in client-side code. External links use `rel="noopener noreferrer"`.

### Performance & SEO
Hero tiles use small thumbnails (about 400px). Lazy-load the gallery with `srcset`. Add VisualArtwork JSON-LD and OG images per artwork 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:
  - [ ] Hero parallax runs smoothly and is disabled for reduced-motion/touch
  - [ ] Gallery is 3/2/1 columns by breakpoint
  - [ ] Each artwork has its own page with meta and inquiry form
  - [ ] Inquiry form validates and handles success/error
  - [ ] Overlay nav traps focus and closes with Esc

Open the builderAll templatesThis palette on its own