Plinth

Who it is for

• Architecture photographers
• Architects and studios documenting projects
• Design and urbanism writers
• Interior and lifestyle bloggers

Layout

1. Minimal header: wordmark left, 'Menu' with hamburger right (opens full menu with About, FAQ, Contact, legal, socials)
2. Split feature hero: tall rounded pastel architectural photo left, huge multi-line title + grey excerpt + 'Continue reading' right
3. Row of category-labeled story cards (Minimalist Interiors, Light and Shadow, etc.)
4. 'Opinions' section: four text-only headlines in columns
5. 'More articles' with rule, centered category filter pills (All, Wellness, Home, Travel, Food, Fashion, Lifestyle) and 3-column image card grid
6. Footer with legal pages and social links
7. Article page with galleries and rich components; About, FAQ, Contact pages

Palette

Calm, airy, refined, modern, exhibition-like. Pastel architectural photography gives it a dreamy, Scandinavian softness.

• background#fcfcfc
• text#181d25
• primary blue#4d91ff
• secondary pink#fe7cd2
• accent orange#ff811a
• muted#f3f4f6
• border#dcdfe5
• link text#0363ff
• input border#8993a7

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

Display

Satoshi 600, ~60px, tight leading, sentence case (Satoshi is not on Google Fonts; a vibld project loads Plus Jakarta Sans)

Body

Satoshi 400 16–18px, grey excerpts with tall 2x line-height (Satoshi is not on Google Fonts; a vibld project loads Plus Jakarta Sans)

One geometric sans at varied weights; uppercase tracked small labels for section headers

Spacing and imagery

Centered 1020px container, 40px gutters, 3-column grid, 12–19px radius on images, large 120px section spacing

Minimalist architectural photography -- facades, silos, curves -- shot against pastel skies in pink, lilac, blue and ochre, cropped square or tall with soft rounded corners.

Components

• Minimal header with Menu toggle
• Full-screen menu overlay
• Split feature hero
• Story card with category label
• Opinions text columns
• Section header with rule
• Category filter pills
• 3-column article grid
• Image gallery carousel
• Contact form
• Social share buttons
• Dark mode toggle

Interactions

• Menu overlay open/close
• Category pills filter grid with active pink tint
• Scroll-triggered fade/slide reveals
• Image hover gentle zoom
• Gallery carousel swipe
• Contact form validation toasts

Data

• Article{slug, title, excerpt, category, cover, gallery[], body_md, author, date, featured}
• Category{name, slug}
• Opinion{title, slug, author}
• ContactMessage{name, email, message}

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 **Plinth**, an architecture and design journal for a photographer-writer or small studio. The home page leads with one feature story in a split layout, then curated rows, short opinion pieces and a filterable archive. The job: present buildings and interiors as calm visual stories and keep readers browsing.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Content in local MDX; Embla for article galleries; Vaul for the mobile menu drawer; Framer Motion (or IntersectionObserver + CSS) for scroll reveals; react-hook-form + zod for contact; Sonner toasts. Backend only for the contact form (Edge Function or form service).

### Pages & layout
1. **Home** – header with wordmark left and "Menu ☰" right opening a full-screen overlay (primary pages, legal links, socials). Split hero: a tall rounded photo (≈ 510×620) left and, right, a 60px multi-line title, grey excerpt with generous leading, "Continue reading". Then a row of 5 small story cards with category labels; an "Opinions" band of 4 text-only headlines; "More articles" header with rule, centered filter pills, 3-column grid of square rounded images with titles below.
2. **Article** – title, meta, hero, rich body (pull quote, full-bleed image, two-up images, captioned gallery carousel), share buttons, related.
3. **About**, **FAQ** (accordion), **Contact**, **Privacy**, **Terms**.

### Design system
`--background: #fcfcfc`, `--foreground: #181d25`, `--muted: #f3f4f6`, `--muted-foreground: #69707d`, `--border: #dcdfe5`, accents `--blue: #4d91ff`, `--pink: #fe7cd2`, `--orange: #ff811a` (decorative highlights only), `--link: #0363ff` (text links and focus ring), `--pill-active: #ffe3f5` with dark text, `--input-border: #8993a7`. Font: Satoshi or General Sans (400/500/600); scale 12 (tracked caps, 1-3 words, 0.1em) / 16 / 18 / 24 / 32 / 60; body 16-18px with line-height up to 2 and ~70ch measure. Radius 12px images, 6px pills. No heavy shadows; header gains a soft shadow on scroll. Motion: reveals 500ms cubic-bezier(.2,.7,.2,1), 60ms stagger. Dark mode with #111418 base, #e8eaee text and #9ca3af muted text.

### Components & interactions
Header (scroll shadow), MenuOverlay (focus trap, Esc), FeatureHero, StoryCard, OpinionItem, SectionHeader, FilterPills (active/hover/focus), ArticleGrid (empty "No articles in this category"), Gallery (arrows, dots, keyboard), PullQuote, ShareButtons, FaqAccordion, ContactForm (states), ThemeToggle.

### Data & state
Typed MDX frontmatter: title, slug, category, cover, excerpt, date, featured, gallery. Filter state in URL (`?category=home`). Seed ~16 original articles about fictional buildings and cities with CC0-style pastel architecture photos.

### Accessibility
Grey excerpt text must be ≥ 4.5:1 on #fcfcfc (#69707d or darker = 4.8:1). Pink active pill uses dark text on a light pink tint. Filter pills are a radio-like group with `aria-pressed`; grid updates announced. Gallery has labeled prev/next and pauses nothing automatically. Reveal animations disabled under reduced motion. Menu overlay is a modal dialog with focus trap. Meaningful alt text describing each building. Verified contrast: body text #181d25 on #fcfcfc = 16.4:1; grey excerpt text #69707d on #fcfcfc = 4.8:1; grey excerpt text #69707d on #f3f4f6 = 4.5:1; link text #0363ff on #fcfcfc = 4.8:1; dark text #181d25 on #ffe3f5 = 14.1:1.

### Security
Proportionate: contact form with zod validation client and server, honeypot, rate limit; no secrets in client. Sanitize MDX output. External social links `rel="noopener noreferrer"`. Legal pages accurate about what is collected.

### Performance & SEO
Responsive images (`srcset`, AVIF/WebP), lazy loading, explicit aspect ratios. Pre-render routes; Article schema, OG images per post, sitemap, RSS. Lighthouse 95+.

### Guardrails
- Original writing; placeholder photos; no real studio logos or invented quotes from real architects.
- No fake testimonials.
- Contact data kept minimal.
- Typed small components, no `any`, visible errors.
- Done when: the split hero stacks on mobile, filter pills update the grid and URL, the menu overlay is keyboard-safe, galleries work with arrows and swipe, and all pages pass axe checks.

Open the builderAll templatesThis palette on its own