Ashgrove Herald

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 heritage newspaper is the right home for Playfair Display's black caps; Source Sans 3 and Lora italics are unchanged. "Playfair" in the text means Playfair Display.

• Playfair DisplayHeadings: nameplate 900 caps, headlines 700, italic section titles
• Source Sans 3Body: body 16px, 12px uppercase labels
• LoraAccent: italic bylines

Who it is for

• Independent journalists
• Agencies building news sites
• Bloggers upgrading to a publication
• Multi-topic magazines

Layout

1. Utility bar: date left, HOME / POLITICS / OPINION / CONTACTS right
2. Centered nameplate: italic 'The' above widely letter-spaced serif caps
3. Uppercase letter-spaced nav with search icon
4. Volume/issue line right-aligned
5. Lead story: large photo with overlaid date | category and white serif headline (2/3); Daily Feed list in italic serif heading with 'In' category labels, view more and prev/next arrows (1/3)
6. Featured News three-column masonry of image cards with serif headlines, italic bylines, excerpts and READ MORE... links
7. Newsletter signup, footer with repeat nameplate
8. Article, category, gallery, author, contact and search pages

Palette

Classic, dignified, polished, editorial, timeless. It channels a heritage newspaper redesigned for the web.

• background#ffffff
• text#000000
• primary/accent (red)#d91f1f
• surface#f5f5f5
• border#e6e6e6
• muted text#5c5c5c

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

Playfair Display 900 uppercase nameplate with wide 7px tracking; 700 serif headlines; italic Playfair Display for section titles

Body

Source Sans 3 16px; Lora italics for bylines; 12px letter-spaced uppercase labels

Didone headlines with wide-tracked caps project heritage; a clean humanist sans keeps excerpts light.

Spacing and imagery

Airy newspaper grid, ~1250px, 2/3 + 1/3 top split, 3-column masonry, square corners, hairline rules.

Large full-color editorial photography (sports, food, classrooms, landscapes) with text overlays on the lead; uncropped masonry thumbnails.

Components

• Utility bar
• Letter-spaced serif nameplate
• Uppercase nav with search
• Issue/volume line
• Overlay lead story
• Daily Feed carousel list
• Featured news masonry card
• Multi-author byline
• Read more link
• Newsletter form
• Search overlay
• Breadcrumbs
• Social share buttons
• Image gallery

Interactions

• Daily Feed prev/next paging
• Search overlay open/close
• Paginated article feeds
• Gallery carousel
• Dark mode toggle
• Hover underline on headlines
• Mobile drawer nav
• Newsletter toast

Data

• Article{slug, title, excerpt, body, categories[], authorId, publishedAt, image, featured}
• Author{id, name, bio, avatar}
• Category{slug, name, color}
• Issue{volume, number, month}

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 **Ashgrove Herald**, a multi-topic news and magazine site for a fictional independent publisher. Readers expect the gravitas of a long-established paper: an image-led lead story, a quick daily feed and a deep bench of features across politics, tech, sport, fashion and food. The job is to make a small team look like a full newsroom.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Dialog, Sheet, Breadcrumb, Pagination, Toggle), lucide-react, Embla Carousel for the Daily Feed pager and galleries, Sonner for toasts, Vaul for mobile nav, react-hook-form + zod for newsletter/contact, React Router, `next-themes`-style theme provider for dark mode. Content from typed files; no backend beyond a form endpoint.

### Pages & layout
1. **Home** – utility bar (date, a few links); nameplate with a small italic article word above wide-tracked serif caps; letter-spaced uppercase nav + search icon; right-aligned "Volume · No. · Month" line. Top row 8/4: lead story as a large photo with bottom gradient, date | category and big white serif headline; right column "Daily Feed" in italic serif with three items ("In Lifestyle, Technology"), "View more posts" and prev/next arrow buttons that page the feed. "Featured News" three-column masonry: image, serif headline, italic byline, excerpt, READ MORE…. Newsletter signup. Footer with repeat nameplate and social links.
2. **Category** pages with color-coded labels and pagination. **Article** – breadcrumbs, category, headline, byline with avatar, share bar, body, gallery, related articles. **Author** pages for five contributors. **Search** results. **Contact**, **About**, 404.

### Design system
- Tokens: `--background: #ffffff`, `--foreground: #000000`, `--primary: #d91f1f` (a deep red that passes for small text), `--secondary: #f5f5f5`, `--border: #e6e6e6` (decorative), `--input-border: #767676`, `--muted-foreground: #5c5c5c`, `--radius: 0`. Dark: `#0e0e0e` / `#f1f1f1`, primary `#ff5a5a`.
- Fonts: Playfair Display (900 nameplate, 700 headlines, italic section titles), Lora italic for bylines, Source Sans 3 for body and labels. Scale: 12 (labels, uppercase +0.12em) / 14 / 16 / 20 / 24 / 32 / 44 / 56.
- Spacing: 8px base, 32px gutters, 1px rules; masonry via CSS columns with 32px gap.
- Motion: feed page slide 300ms ease-out; underline grow 150ms; theme switch without flash.

### Components & interactions
Nameplate, nav (active bold, hover, focus), search overlay (typing, results, none), lead overlay card, feed list with pager (arrows disabled at bounds), masonry card (with/without image), byline, read-more link, pagination, share buttons (copy link confirmation), gallery carousel, newsletter (errors/success), theme toggle (persisted), skeleton placeholders.

### Data & state
`Article{slug,title,excerpt,body,categorySlugs[],authorId,publishedAt,image{src,alt,credit},isFeatured,isLead}`, `Author{id,name,bio,avatar}`, `Category{slug,name,color}`, `Issue{volume,number,label}`. Feed page index and theme in local state/localStorage. Seed 30 fictional articles and five invented authors; avoid real teams, museums or companies in headlines.

### Accessibility
Red is `#d91f1f` everywhere (5.0:1 on white, 4.6:1 on `#f5f5f5`; white button labels 5.0:1); dark mode uses `#ff5a5a` on `#0e0e0e` (6.3:1). The white headline over the lead photo sits on a gradient scrim reaching `rgb(0 0 0 / .7)` (worst case over white = `#4d4d4d`, 8.4:1). Inputs use `--input-border: #767676`; `#e6e6e6` hairlines are decorative. Wide-tracked caps nameplate gets a plain accessible name. Daily Feed pager buttons have labels ("Previous stories") and the list region announces updates politely. Masonry order must match reading order (use CSS columns carefully or a JS layout that preserves DOM order). Visible focus outlines; skip link; reduced motion disables slide transitions.
Verified contrast: body text on white #000000 on #ffffff = 21.0:1; muted text on white #5c5c5c on #ffffff = 6.69:1; red label/link text on white #d91f1f on #ffffff = 5.04:1; red text on surface #d91f1f on #f5f5f5 = 4.62:1; white label on red button #ffffff on #d91f1f = 5.04:1; white headline on lead photo scrim #ffffff on #4d4d4d = 8.45:1.

### Security
Proportionate for static: zod validation and honeypot on forms, rate-limited endpoint, no secrets in the client, DOMPurify for any HTML bodies, share links built with `encodeURIComponent`, and `rel="noopener noreferrer"` on external links.

### Performance & SEO
Prerender routes; NewsArticle and BreadcrumbList JSON-LD; author pages with Person schema; OG images; sitemap and RSS. Preload the lead image, lazy-load masonry images with fixed aspect ratios to avoid layout shift. Lighthouse 90+.

### Guardrails
- Original headlines, copy and placeholder photos; no real publications, athletes, clubs or brand logos.
- No fabricated quotes from real people.
- Small typed components, no `any`, visible errors.
- Done when: lead, feed pager and masonry render from data; category/author/search routes work; dark mode persists without flashes; red text passes AA; Lighthouse accessibility 95+.

Open the builderAll templatesThis palette on its own