Saltcellar

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

Antonio is a refined condensed poster sans with several weights, and Work Sans is an open, friendly body, keeping the glossy food-magazine punch.

• AntonioHeadings: hero ~117px uppercase, card titles 28px uppercase
• Work SansBody: body 16px/1.6, 12px uppercase dates

Who it is for

• Food bloggers and recipe writers
• Restaurant reviewers
• Food photographers
• Culinary magazines and newsletters

Layout

1. Thin sticky header: search icon left, Blog/About/Subscribe center, social icons right
2. Full-bleed hero photo fading to white at the bottom with a giant condensed uppercase title
3. 'Latest' section: 3-column grid of square images, colored category tag, uppercase condensed title, date
4. More rows / masonry continuation
5. Newsletter subscribe block
6. Footer
7. Article page: parallax hero, reading progress bar, body, share buttons
8. Full-screen search modal

Palette

Bold, appetizing, editorial, energetic, modern. A glossy food magazine with streetwear-poster typography.

• background#ffffff
• text#1a1a1a
• headline black#000000
• tag purple#9333ea
• tag blue#2563eb
• tag amber#b16105
• muted#ebebeb
• muted text#5c5c5c
• input border#939393

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

Antonio, ~117px hero uppercase with tight tracking; 28px uppercase card titles

Body

Work Sans 400 16px/1.6 (~70ch measure); dates 12px uppercase with 0.08em tracking

Condensed poster display against neutral Work Sans; color comes from category tags and photos

Spacing and imagery

Full-width with 32px gutters, 3 equal columns ~64px gap, square images, 0 radius, generous 80px row spacing

Rich, saturated food and lifestyle photography (sushi, coffee, kitchens, pasta) cropped square; hero lifestyle photo with white gradient fade.

Components

• Icon-only search trigger
• Centered text nav
• Social icon row
• Full-bleed hero with gradient fade
• Giant condensed title
• Category color tag
• Article card
• Masonry grid
• Newsletter form
• Reading progress bar
• Share buttons
• Search modal with live results
• Skip link

Interactions

• Hero parallax on scroll
• Card image zoom on hover
• Search modal opens with shortcut and filters live
• Reading progress bar fills while scrolling
• Share buttons copy link with toast
• Newsletter submit states

Data

• Article{slug, title, category, date, cover, excerpt, body_md, author, reading_time}
• Category{name, color}
• 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 **Saltcellar**, a bold food-culture magazine blog covering recipes, techniques, restaurants and drinks. The home page opens on a full-bleed photo with a poster-size condensed title, then a clean three-column grid of color-tagged stories. The job: make food writing feel like a glossy print magazine and grow a newsletter list.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Articles from local MDX with frontmatter; Fuse.js for client-side search in a dialog; Framer Motion for hero parallax and reading progress; react-hook-form + zod for subscribe. Backend only for subscribe (Supabase table + Edge Function or a newsletter provider).

### Pages & layout
1. **Home** – slim sticky header: search icon left, Blog/About/Subscribe centered, social icons right. Full-bleed hero photo (≈85vh) fading to white at the bottom with a 110px+ condensed uppercase title overlapping the fade. "Latest" section: 3-column grid of square images; below each a small colored category tag, 2-line uppercase condensed title and date. Load more, newsletter band, footer.
2. **Category** pages – same grid filtered.
3. **Article** – parallax hero, top reading progress bar, category tag, title, byline/date/reading time, prose body with recipe card component (ingredients, steps), share buttons, related articles.
4. **Search modal** – full-screen dialog with input and live results.
5. **About**, **Subscribe**.

### Design system
`--background: #ffffff`, `--foreground: #1a1a1a`, `--headline: #000000`, `--muted: #ebebeb`, `--border: #e0e0e0` (decorative), `--input-border: #939393`, `--muted-foreground: #5c5c5c`. Category tag colors (text white): Technique #2563eb, Design #9333ea, Culture #b16105, Cuisine #dc2626, Health #12883e, Drinks #07819e (extend to ~12). Fonts: Antonio (display only, ≥ 24px, fallback Impact/Arial Narrow/sans-serif) + Work Sans (400/500). Scale 12/14/16/20/28/48/117. Radius 0. No shadows. Motion 300ms ease; image hover scale 1.04 within overflow-hidden.

### Components & interactions
Header, SearchDialog (empty/typing/results/no results), Hero (parallax, reduced-motion static), CategoryTag, ArticleCard (hover zoom, focus outline), Grid, RecipeCard, ReadingProgress, ShareBar (copy link toast, native share on mobile), SubscribeForm (states), SkipLink, Footer.

### Data & state
Typed article index from MDX frontmatter; categories map name → color. Search index built at load. Seed 15 original articles (e.g. fermentation, kitchen layout, coffee brewing) with AI-generated or CC0 food photos.

### Accessibility
Tag colors chosen to hold white text at ≥ 4.5:1 (use the hues listed above, darkened where needed, never lighter). Uppercase condensed titles are only for headings; keep them ≥ 24px. Hero title must stay over the white fade area (≥ 85% white where the title sits) for contrast. Search dialog traps focus, Esc closes, results are a listbox. Progress bar is decorative (`aria-hidden`). Every photo gets descriptive alt text. Skip link to main. Verified contrast: body text #1a1a1a on #ffffff = 17.4:1; muted date/meta text #5c5c5c on #ffffff = 6.6:1; white #ffffff on #2563eb = 5.1:1; white #ffffff on #b16105 = 4.5:1; white #ffffff on #12883e = 4.5:1.

### Security
Proportionate: zod-validated email, honeypot and rate limit on subscribe; double opt-in. Sanitize MDX/HTML output. Share links built with `encodeURIComponent`; external links `rel="noopener noreferrer"`. No keys in the client.

### Performance & SEO
Hero image preloaded with responsive sizes; grid images lazy with fixed 1:1 aspect ratio. Pre-render all routes. Article schema (and Recipe schema where relevant), meta/OG tags, sitemap, RSS. Lighthouse 90+.

### Guardrails
- Original articles and placeholder imagery; no restaurant or brand logos.
- No invented chef quotes or fake reader reviews.
- Store only subscriber emails with an unsubscribe path.
- Typed small components, no `any`, visible errors.
- Done when: the hero and grid match the described layout on desktop and collapse to one column on mobile, category colors pass contrast, search finds articles by title and tag, the progress bar tracks reading, and subscribe works end to end.

Open the builderAll templatesThis palette on its own