Inkstand Courier

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

Blackletter nameplate, a true Bodoni for headlines and a slab body reproduce the traditional broadsheet hierarchy.

• UnifrakturMaguntiaHeadings: nameplate only, 72px
• Libre BodoniHeadings: headlines and uppercase section heads 700
• Roboto SlabBody: body and meta 16px

Who it is for

• Independent publishers and journalists
• Local and niche news outlets
• Agencies building media sites
• Bloggers wanting a newspaper aesthetic

Layout

1. Top utility bar: date left, HOME / POLITICS / OPINION / CONTACTS links right
2. Centered blackletter masthead
3. Ruled main nav in small bold uppercase with search icon
4. Four-up headline ticker row with red category kickers
5. Two-column lead: BREAKING NEWS large grayscale photo + story left, DAILY FEED list (kicker, headline, dek) right
6. Article list with date, category and byline meta, separated by rules
7. FEATURED STORIES heading with red rule and a 3-up grayscale image grid
8. Newsletter signup block, related articles sidebar on article pages
9. Footer with social links; cookie notice bar in orange

Palette

Traditional, authoritative, warm, nostalgic, print-like. It evokes a morning paper on cream stock with red ink kickers.

• background (newsprint cream)#fffbe5
• text#000000
• primary (burnt orange)#b55a0f
• kicker red#d0021b
• secondary (straw)#f8d57c
• accent (blue)#436d9d
• border/dek brown#8a5a2b

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

UnifrakturMaguntia blackletter masthead 72px; Libre Bodoni 700 uppercase section heads (30px, +0.75px tracking) and headline serif

Body

Roboto Slab 16px, deks in warm brown

Blackletter for nameplate, didone for headlines, slab for body replicates a traditional broadsheet hierarchy.

Spacing and imagery

Full-width 1250px container with 16px gutters, hairline rules between rows, 2/3 + 1/3 lead split, 3-col features; square corners.

News photography rendered in grayscale that shifts to color on hover; large lead image, 3-up feature thumbnails.

Components

• Utility date bar
• Blackletter masthead
• Uppercase ruled nav with search
• Headline ticker row
• Category kicker labels
• Lead story block
• Daily feed list
• Article meta line (date · category · byline)
• Featured stories grid
• Newsletter signup
• Related articles sidebar
• Image carousel gallery
• Cookie consent bar

Interactions

• Grayscale-to-color image hover
• Progressive 'load more' articles
• Search toggle
• Responsive collapsing nav into a drawer
• Carousel gallery navigation
• Cookie accept dismissal
• Newsletter submit feedback

Data

• Article{slug, title, dek, body, category, author, publishedAt, image, featured, breaking}
• Category{slug, name}
• Author{name, bio}
• 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 **Inkstand Courier**, a newspaper-style editorial website for a fictional independent daily. Readers are people who like the ritual of a print front page. The site must organize ~35 articles into six sections, surface a breaking lead and a running daily feed, and invite newsletter signups, all with a convincing broadsheet look.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Sheet, Dialog, Input, Button), lucide-react, React Router for ~18 routes. Embla Carousel for the photo gallery post type, react-hook-form + zod for newsletter and contact forms, Sonner for toasts. Content as typed MDX or JSON files; no database. A serverless function only if the newsletter needs to post somewhere.

### Pages & layout
1. **Home** – utility bar (today's date, a few links); centered blackletter nameplate; ruled uppercase nav with search icon; four-up headline strip with red kickers; lead row: "Breaking News" with a large photo, headline and dek on the left (2/3), "Daily Feed" list on the right (1/3); a ruled list of recent stories with date · category · byline; "Featured Stories" with a red rule and three image cards; newsletter band; footer.
2. **Section pages** (Politics, Technology, Sports, Fashion, Food, Opinion) – section header, lead story, paginated list with "Load more".
3. **Article** – kicker, headline, dek, byline and date, hero image with caption, body with pull quotes, related-articles sidebar, share links.
4. **Post-type demos** – gallery post, video post, quote post. **Contact**, **About**, 404.

### Design system
- Tokens: `--background: #fffbe5`, `--foreground: #000000`, `--primary: #b55a0f`, `--kicker: #b0001a`, `--secondary: #f8d57c`, `--accent: #436d9d`, `--border: #d2c2ac` (decorative rules), `--input-border: #8a5a2b`, `--muted-foreground: #7a4f25`.
- Fonts: UnifrakturMaguntia (nameplate only), Libre Bodoni 700 (headlines, uppercase section heads with +0.03em tracking), Roboto Slab (body, meta). Scale: 12 (kicker, uppercase +0.1em) / 13 / 16 / 20 / 24 / 30 / 44 / 72.
- Layout: 12-col grid, 1248px max, 16px gutters, 1px rules between items, square corners, no shadows.
- Motion: image filter grayscale(100%) to 0 over 400ms ease; nav drawer 250ms.

### Components & interactions
Nameplate, nav (active section underline, focus), search dialog (empty, results, no results), kicker label, story card variants (lead, list, thumbnail, text-only), byline meta, load more (idle/loading/end of list), newsletter (validation, success, error), related list, gallery carousel (arrows, keyboard, counter), cookie notice (accept persists), skeletons while content loads.

### Data & state
`Article{slug,title,dek,body,category,authorId,publishedAt,image{src,alt,caption},isBreaking,isFeatured,type:'standard'|'gallery'|'video'|'quote'}`, `Author{id,name,bio}`, `Category{slug,name}`. Load from content files; derive feeds by date. Seed 35 fictional articles with neutral topics and invented reporter names; use placeholder photos.

### Accessibility
Black on cream is ~20:1; the kicker red `#b0001a` on cream is 7.05:1; the burnt-orange primary is darkened to `#b55a0f` so it passes as text on cream (4.55:1) and with white labels on the cookie bar and buttons (4.74:1). The newsletter input uses `--input-border: #8a5a2b` (5.6:1) because the `#d2c2ac` rule color is decorative. Blackletter is decorative: give the nameplate a plain-text accessible name and never use it for body text. One `h1` per page, logical heading order, `<article>`, `<nav>`, `<main>` landmarks. Grayscale images still need meaningful alt text; captions use `<figcaption>`. Visible focus outlines in blue `#436d9d`.
Verified contrast: body text on cream #000000 on #fffbe5 = 20.18:1; kicker red token on cream #b0001a on #fffbe5 = 7.05:1; kicker red #d0021b on #fffbe5 = 5.45:1; muted dek text on cream #7a4f25 on #fffbe5 = 6.79:1; brown dek/meta on cream #8a5a2b on #fffbe5 = 5.64:1; burnt-orange primary text on cream #b55a0f on #fffbe5 = 4.55:1.

### Security
Proportionate for a static site: zod validation on newsletter/contact, honeypot plus server-side rate limiting if posted, no secrets in client code, sanitize any HTML article bodies with DOMPurify, and `rel="noopener noreferrer"` on social links. Cookie notice should not load trackers before consent.

### Performance & SEO
Pre-render article routes or use SSG; NewsArticle JSON-LD, canonical URLs, OG images per article, RSS feed, sitemap. Lazy-load images below the lead, subset the blackletter font to the nameplate glyphs. Lighthouse 90+.

### Guardrails
- Original articles and placeholder imagery; no real publications, logos or journalists.
- No fabricated quotes attributed to real people.
- Small typed components, no `any`, visible errors.
- Done when: home, six sections, article and post-type routes all render; load more paginates to an end state; grayscale hover is disabled with reduced motion; newsletter validates; each article has correct meta and JSON-LD.

Open the builderAll templatesThis palette on its own