Driftwood Press

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

Lexend Zetta is a very wide geometric sans that stands in for Clash Display on the night-black masthead, over plain Archivo text.

• Lexend ZettaHeadings: masthead ~184px 600, card titles 26px bold
• ArchivoBody: intro 20px, body, 12px uppercase dates

Who it is for

• Travel and lifestyle journalists
• Photographers publishing photo essays
• Small digital magazines
• Personal brand storytellers

Layout

1. Header: bold wordmark left, About the Author / Get in touch / Newsletter links right
2. Masthead: ~180px wide display wordmark centered with one-paragraph mission in grey
3. Two-column grid of large square-ish images, each followed by uppercase date and bold title
4. Continuing grid with pagination or load more
5. Author page, contact, newsletter
6. Story page with visual story blocks

Palette

Bold, cinematic, minimal, confident, nocturnal. A photography-led magazine on a near-black stage.

• background#020407
• text#fafafa
• muted text#9ca3af
• card placeholder#141820
• border#1f242c
• accent#e5e5e5
• input border#57657b

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

Clash Display 600, ~184px masthead with -3% tracking; 26px bold card titles (Clash Display is not on Google Fonts; a vibld project loads Lexend Zetta)

Body

Archivo 400 20px grey intro (line-height 1.6), 12px uppercase dates with 0.08em tracking

Wide geometric display for masthead and titles over plain Archivo body

Spacing and imagery

1110px container, 2 columns with ~96px gutter, large 500px images, 100px row spacing; square corners

Vivid studio and lifestyle photography -- portraits, jewelry, hats, streetwear -- shown large, unframed and square-cropped on black.

Components

• Masthead wordmark
• Top text nav
• Two-column story grid
• Story card with date and title
• Load more / pagination
• Author bio page
• Contact form
• Newsletter form
• Visual story blocks (full-bleed, pairs, captions)
• Dark mode by default

Interactions

• Image hover slight scale
• Title underline on hover
• Fade-in on scroll
• Newsletter submit states
• Contact validation

Data

• Story{slug, title, date, cover, category, blocks[{type, content}], author}
• Author{name, bio, portrait}
• 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 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 **Driftwood Press**, a dark, photography-first travel and lifestyle magazine. A huge wordmark opens the page and large images carry each story. Readers browse a two-column grid, read visual stories built from flexible blocks, learn about the author, and subscribe. The job: let images lead while keeping the reading experience clean.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. MDX with custom block components (full-bleed image, image pair, caption, quote, map embed placeholder); Framer Motion or IntersectionObserver for fades; react-hook-form + zod for newsletter/contact. Backend only for forms.

### Pages & layout
1. **Home** – header: bold wordmark left, three text links right. Masthead: centered wide display word (~180px desktop, clamps down on mobile) and a two-line grey mission statement. Grid: 2 columns with a wide gutter; each card is a large square image, uppercase date and bold 26px title. "Load more" at the end.
2. **Story** – title, date, category, dek, then block-based body: full-bleed photos, side-by-side pairs, captions, pull quotes, text sections at 680px width.
3. **About the author** – portrait, bio, favorite places.
4. **Get in touch** – contact form.
5. **Newsletter** – signup page.

### Design system
Dark by default. `--background: #020407`, `--foreground: #fafafa`, `--muted-foreground: #9ca3af`, `--card: #141820`, `--border: #1f242c` (decorative), `--input-border: #57657b`. Optional light theme (#fafafa bg, #111827 text, #4b5563 muted). Fonts: Clash Display or "Lexend Zetta" 600 (display/titles), Archivo 400/500 (body). Scale 12 (uppercase dates) / 16 / 20 / 26 / 48 / clamp(72px, 14vw, 184px); story text sections 18px/1.7, fallbacks system-ui for display and body. Radius 0. No shadows. Motion: 400ms fade-up, image hover scale 1.03 over 500ms.

### Components & interactions
Header, Masthead, StoryGrid, StoryCard (image skeleton placeholder in `--card` color while loading, error fallback with title only), LoadMore (loading/end), StoryBlocks (FullBleed, Pair, Caption, Quote, TextSection), AuthorBio, ContactForm and NewsletterForm (idle/loading/success/error), Footer.

### Data & state
Stories as MDX with frontmatter (title, slug, date, cover, category, dek). Pagination client-side over a typed index. Seed 12 original stories about fictional places and people, using generated or CC0 photography; make sure every cover resolves (no empty image tiles).

### Accessibility
White on #020407 is ~20:1; grey #9ca3af is 8.1:1 on the background and 7.0:1 on card placeholders. The oversized masthead is an `h1` with a readable accessible name and must not overflow horizontally (clamp). Images need descriptive alt text; decorative duplicates empty alt. Visible focus rings (2px white outline with offset). Fades disabled with reduced motion. Links distinguishable by underline on hover and focus. Verified contrast: body text #fafafa on #020407 = 19.6:1; muted grey text #9ca3af on #020407 = 8.0:1; muted grey text #9ca3af on #141820 = 7.0:1; input border #57657b on #020407 = 3.4:1; light theme: muted text #4b5563 on #fafafa = 7.2:1.

### Security
Proportionate: forms validated with zod client and server, honeypot, rate limiting; no keys in client; sanitize MDX; embedded maps or videos only from allowlisted hosts; external links `rel="noopener noreferrer"`.

### Performance & SEO
Large images: responsive AVIF/WebP, `sizes` for 2-column layout, lazy-load below the fold, fixed aspect ratios. Pre-render routes; per-story meta/OG using the cover; sitemap; RSS. Lighthouse 90+ (image-heavy).

### Guardrails
- Original stories; generated/CC0 photos; no brand logos, no real journalist names.
- No invented testimonials.
- Store only newsletter emails and contact messages briefly.
- Typed small components, no `any`, visible fallback when an image fails.
- Done when: the masthead scales without overflow from 320px to 1440px, the grid collapses to one column on mobile, every card image loads or shows a graceful fallback, story blocks render from MDX, and forms work.

Open the builderAll templatesThis palette on its own