Hollis Fern

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

Lora and Caveat keep the porch-at-dusk liner notes, and Alegreya Sans is a warmer, more handmade humanist body than Source Sans 3.

• LoraHeadings: hero name 96px bold at -2.4px, italic tagline
• Alegreya SansBody: body 16px at 1.6, slight positive tracking
• CaveatHandwriting: handwritten liner-note accents

Who it is for

• Folk and Americana singer-songwriters
• Independent artists moving fans off social media
• Musicians selling merch without a label
• Fans attending intimate venue shows

Layout

1. Transparent header: serif name left, small-caps serif nav (Home, Music, Videos, Merch, Info, Newsletter) right with underline on active
2. Full-viewport long-exposure sunset seascape hero with centered serif name and italic tagline
3. 'Latest stories' horizontal carousel of paper-toned cards: handwritten script eyebrow, serif title, short excerpt, rust-colored action link (Listen/Watch/Tickets/Shop)
4. Dark brown band behind carousel
5. Footer over photo: rule, serif name, row of platform links in tracked caps, italic copyright
6. Inner pages: album release pages, tour dates with door times/support/age, video gallery, merch with sizes and stock badges, info, newsletter

Palette

Warm, intimate, nostalgic, handcrafted, calm. It feels like a porch at dusk with a notebook of songs.

• background (paper)#f8f5f1
• text#2f2823
• muted text (excerpts, meta)#786d63
• primary rust#964c2c
• cream on photo / on rust#f7f1de
• sage secondary#d1d7cc
• wheat accent#e0ceae
• card#f6f2ea
• dark wood band#2a1a12
• input border#9d8874
• photo scrim (wood brown 65%)#2a1a12a6

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

Lora bold, 96px with -2.4px tracking for the hero name; Lora italic tagline

Body

Alegreya Sans at 16px, line-height 1.6, with slight positive tracking; Caveat handwritten script for card eyebrows at 24px+ only

Bookish serif + friendly humanist sans + handwritten accent evokes liner notes and journals

Spacing and imagery

Comfortable; ~1150px container with 96px side margins, cards ~320px wide with 24px gaps and 8px radius, full-bleed photographic sections

Long-exposure sunset seascape as hero and footer backdrop; card thumbnails of cabins, vinyl and landscapes with soft vintage paper texture

Components

• Transparent serif header
• Photo hero with serif title
• Stories carousel
• Paper card with script eyebrow
• Rust action link with arrow
• Album release page with tracklist
• Tour list with door time/support/age
• Video gallery with custom thumbnails
• Merch cards with size and stock badges
• Newsletter signup form
• Platform link footer

Interactions

• Carousel drag/swipe with snap
• Card hover lifts and arrow nudges
• Active nav underline
• Page fade transitions
• Video thumbnail opens embed
• Newsletter submit with success toast
• Stock badges (in stock / low / sold out)

Data

• Story{kind: song|video|tour|merch, title, excerpt, image, href}
• Album{title, releaseDate, cover, tracks[], links}
• Show{date, venue, city, doors, support, age, priceAdv, priceDoor, ticketUrl}
• Video{title, youtubeId, thumbnail, location}
• MerchItem{name, price, sizes[], stock, image}
• Subscriber{email}

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 website for a fictional folk singer-songwriter called **Hollis Fern**. The audience is listeners who found them at a small show or on social media and want to hear more, buy a record, or join the mailing list. The site should feel handmade and quiet, like liner notes, while still handling releases, shows, videos, merch and a newsletter.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react, React Router, Embla Carousel for the stories row, Framer Motion for gentle fades, and react-hook-form + zod for the newsletter. The newsletter is the only backend need: a Supabase table or a single edge function that forwards to an email provider.

### Pages & layout
1. Header: serif name left and small-caps serif links right, transparent over the hero, with an underline on the active page.
2. Hero: full-viewport long-exposure dusk seascape, the name centered in large bold serif, and an italic subtitle.
3. Latest stories: a dark wood-brown band holding a swipeable row of paper-colored cards. Each card has a handwritten eyebrow ("Latest song", "Recent video", "Tour date", "New merch"), a serif title, a two-line excerpt, and a rust link (Listen, Watch, Tickets, Shop).
4. Newsletter strip with one email field.
5. Footer over the photo with the same 65% wood-brown overlay: hairline rule, name, and a row of platform links in tracked caps.
6. Music: album pages with artwork, tracklist, release date and platform links.
7. Shows: date, venue, doors time, support act, age limit, advance and door prices, ticket link.
8. Videos (YouTube thumbnails with play overlay), Merch (sizes, stock badge), and Info (bio, press photo, booking).

### Design system
Tokens: `--background: #f8f5f1; --foreground: #2f2823; --primary: #964c2c; --primary-foreground: #f7f1de; --secondary: #d1d7cc; --accent: #e0ceae; --muted: #e6e1db; --border: #d9d1c9 (decorative dividers); --input-border: #9d8874; --muted-foreground: #786d63; --card: #f6f2ea; --band: #2a1a12`. Fonts: Lora (600/700, italic), Alegreya Sans (400/600), and Caveat for eyebrows only, set at 24px or larger with a Source Sans fallback and a readable text label for assistive tech. Scale: clamp(56px, 8vw, 96px) hero; 32 / 22 / 16 / 13px (13px only for meta at weight 400+; body 16px, line-height 1.6, max 68ch). Spacing: 8px base, 96px section padding. Radius 8px on cards; soft shadow `0 10px 30px -12px rgb(47 40 35 / .35)`. Add a subtle paper-grain texture to cards. Motion: 400ms ease-out fades. Light theme with dark photographic bands.

### Components & interactions
- Story card: hover lifts 4px and the arrow shifts right; focus ring in rust; a skeleton while images load.
- Carousel: arrows and dots, keyboard arrows, snap scrolling on touch.
- Show row: sold-out shows keep the row but disable the link and show a text badge.
- Merch: size chips with a disabled state for sizes that are out; badges for In stock, Low stock and Sold out.
- Newsletter: inline validation, loading state, success message, and a friendly error with retry.

### Data & state
`Story{kind,title,excerpt,image,href}`, `Album{slug,title,date,cover,tracks[],links}`, `Show{date,venue,city,doors,support?,age,priceAdv,priceDoor,ticketUrl?,status}`, `Video{title,youtubeId,thumb}`, `MerchItem{name,price,sizes[],stock,image,url}`, `subscribers(email unique, created_at)`. Seed with invented small-town venues.

### Accessibility
Cream #f7f1de text on the sunset photo sits on a wood-brown overlay (#2a1a12 at 65%), which keeps the subtitle, nav and footer links at 4.6:1 or better even over the brightest sky. Rust #964c2c on #f6f2ea is 5.6:1 and is fine for links; muted excerpts use #786d63; the newsletter input uses the #9d8874 border. Script eyebrows are decorative; duplicate their meaning in readable text or `aria-label`. Carousel needs labeled slides and pause-free manual control. Newsletter input needs a visible label, not just a placeholder. Verified contrast: body text on paper background: #2f2823 on #f8f5f1 = 13.34:1; rust link on cards: #964c2c on #f6f2ea = 5.59:1; hero/nav cream text over 65% wood-brown scrim on white-worst-case photo: #f7f1de on #756a65 = 4.64:1.

### Security
Validate email with zod on the client and in the edge function; add a honeypot and rate limiting per IP; enable RLS on `subscribers` so the anon role can insert only and never select. Use a double opt-in email. External links get `rel="noopener noreferrer"`. Keep provider API keys in edge-function env.

### Performance & SEO
Compress the hero photo (AVIF, under 250 KB) and reuse it for the footer; lazy-load card images; code-split inner routes. MusicGroup and Event JSON-LD; per-page OG images. Target Lighthouse 95+.

### Guardrails
- Use original lyrics-free copy and placeholder photography; no real artist names or logos.
- Don't invent fan quotes presented as real.
- Store only email addresses, with consent.
- Keep components small and typed, never use `any`, and show errors visibly.
- Done when: the stories carousel works by touch, mouse and keyboard; the newsletter blocks duplicates and bots; show rows display doors, support and age; hero text meets contrast; the header never overlaps the carousel cards when scrolled.

Open the builderAll templatesThis palette on its own