Clearing House Weekly

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

Archivo keeps the no-nonsense heavy business voice, and Asap is a softer humanist body like Ranade, readable over long analysis.

• ArchivoHeadings: nameplate 900, headlines 700 at 36-44px
• AsapBody: body 16px, 12px bold uppercase kickers

Who it is for

• Industry analysts launching niche publications
• Financial media startups
• Associations with member research
• Agencies building publication sites

Layout

1. Three-tier header: utility row (search, Home, Newsletters; Sign In and green pill Subscribe), centered heavy nameplate between green rules, category nav (Market Analysis, Industry News, Technology, Venture Capital, Regulation)
2. Lead story: green uppercase kicker, large grotesk headline, dek, author and read time left; rounded photo center
3. Latest News sidebar: heading with View All, list of kicker + headline items under a green rule
4. Three-up story cards with rounded images
5. Green newsletter band: 'briefing' headline, subscriber line, email + Subscribe button
6. Four-column footer: Content, Company, Community, Legal link groups
7. Additional pages: article detail, research reports, events, job board, contributors, membership pricing

Palette

Authoritative, sharp, businesslike, current, confident. It feels like a terminal-grade trade briefing with a crisp green signature.

• background#ffffff
• text#171717
• primary (money green)#027a0b
• surface/footer#f7f7f7
• border#e6e6e6
• muted text#666666

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

Archivo 900 nameplate and 700 headlines (36-44px, -0.9px tracking)

Body

Ranade 16px; kickers 12px bold uppercase in green with wide tracking (Ranade is not on Google Fonts; a vibld project loads Asap)

A heavy grotesk gives a no-nonsense business voice; the softer humanist body keeps long analysis readable.

Spacing and imagery

Structured 12-col grid, ~1216px container, 5/5/2-ish lead split with sidebar, 12px image radius, pill buttons, generous section spacing.

Trading floors, fintech app screens, boardrooms and bank architecture in rounded frames; no illustration.

Components

• Three-tier header
• Nameplate between rules
• Category nav
• Lead story block
• Kicker labels
• Latest News sidebar
• Story card grid
• Newsletter band
• Membership pricing tiers
• Research report cards
• Event listings
• Job board list
• Contributor profile
• Four-column footer

Interactions

• Article card hover (image zoom, headline underline)
• Skeleton loading states
• Newsletter submit states
• Membership tier selection
• Job and event filtering
• Mobile drawer navigation (Vaul)
• Toasts (Sonner)
• Dark mode toggle

Data

• Article{slug, category, kicker, title, dek, body, authorId, readMinutes, image, publishedAt}
• Contributor{id, name, title, bio, avatar}
• Report{slug, title, summary, pages, price, memberOnly}
• Event{title, date, location, type, url}
• Job{title, company, location, type, postedAt}
• MembershipTier{name, price, interval, features[]}

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 **Clearing House Weekly**, a trade publication covering fictional developments in payments, banking technology and venture funding. Readers are finance professionals who want a quick morning briefing plus deeper research. The site must feel authoritative, organize coverage across five desks, and funnel readers to a free newsletter and a paid membership.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Tabs, Card, Badge, Skeleton, Dialog), lucide-react, Vaul for the mobile nav drawer, Sonner for toasts, Framer Motion for subtle hovers, react-hook-form + zod for newsletter and job/event submission forms, React Router for ~16 routes. Content in typed files; a small serverless endpoint (or Supabase table with insert-only RLS) for newsletter signups. Membership checkout links out to a hosted payment page.

### Pages & layout
1. **Home** – utility row (search, Home, Newsletters; Sign in, green pill Subscribe); centered heavy nameplate between two green rules; desk nav. Lead block: kicker, big headline, dek, author · read time on the left, rounded photo beside it; "Latest news" sidebar with kicker + headline items and View all. Three-up story cards. Green newsletter band ("the briefing ..."). Four-column footer (Content, Company, Community, Legal).
2. **Desk pages** (5) – lead + list + pagination.
3. **Article** – kicker, headline, dek, contributor card, read time, body with pull quotes and a data callout, related stories.
4. **Research reports** – cards with page count and member-only badge. **Events** – upcoming list with type filter. **Job board** – filterable list. **Contributors** – grid and profile pages. **Membership** – three tiers with feature comparison. **Newsletters**, **About**, **Contact**.

### Design system
- Tokens: `--background: #ffffff`, `--foreground: #171717`, `--primary: #027a0b`, `--primary-foreground: #ffffff`, `--secondary: #f5f5f5`, `--border: #e6e6e6` (decorative), `--input-border: #767676`, `--muted-foreground: #666666`, `--radius: 0.625rem`. Dark mode: `#0d0f0d` background, `#ededed` text, primary `#34c43e`, primary-foreground `#0d0f0d`.
- Fonts: Archivo (700/900) for nameplate and headlines, Ranade or Asap for body. Scale: 12 (kicker, uppercase, +0.08em) / 14 / 16 / 18 / 24 / 36 / 44.
- Spacing: 8px base, 32px gutters, 1px rules and 2px green rules for emphasis; images 12px radius; pill buttons.
- Motion: 200ms image scale 1.03 on hover; skeleton shimmer; drawer spring.

### Components & interactions
Header tiers (sticky condensed version after scroll), Subscribe pill (hover/focus/loading), kicker, story card (lead/sidebar/grid variants, skeleton), newsletter band form (inline error, success toast, already subscribed), tier cards (highlighted recommended plan, disabled when current plan), report card (member badge), event/job filters (empty state), contributor card, footer link groups.

### Data & state
`Article{slug,desk,kicker,title,dek,body,contributorId,readMinutes,image,publishedAt}`, `Contributor{id,name,title,bio,avatar}`, `Report{slug,title,summary,pages,memberOnly}`, `Event{id,title,date,city,type}`, `Job{id,title,employer,location,type,postedAt}`, `Tier{name,price,interval,features[]}`. Filters in URL params. Seed 25 fictional articles, invented contributors and companies, and illustrative (clearly fictional) market figures.

### Accessibility
The money-green primary is set to `#027a0b` so kickers, links and white button labels all pass (5.5:1 on white, 5.2:1 on the `#f7f7f7` footer); the newsletter band uses the same green so white body text reaches 5.5:1. Dark-mode labels on the `#34c43e` primary are `#0d0f0d` (8.4:1). Inputs use `--input-border: #767676`; `#e6e6e6` rules are decorative. Tables in reports and tier comparison use real `<table>` markup with headers. Skeletons carry `aria-busy`. Drawer is a labeled dialog. Every image gets alt text; decorative rules are CSS.
Verified contrast: body text on white #171717 on #ffffff = 17.93:1; muted text on white #666666 on #ffffff = 5.74:1; muted text on footer surface #666666 on #f7f7f7 = 5.36:1; green kicker and link text on white #027a0b on #ffffff = 5.54:1; green link text on footer surface #027a0b on #f7f7f7 = 5.17:1; white label on green button and newsletter band #ffffff on #027a0b = 5.54:1.

### Security
Mostly static: zod-validate forms client-side and again at the endpoint, honeypot + rate limiting, insert-only RLS if Supabase stores signups, no secrets in the client, hosted checkout for memberships (no card fields). Job and event submissions are moderated before publishing and rendered as plain text; sanitize any rich text with DOMPurify. External links use `rel="noopener noreferrer"`.

### Performance & SEO
NewsArticle JSON-LD, Event and JobPosting structured data on their pages, OG images, sitemap and RSS. Prerender article routes, lazy-load images below the lead, subset fonts. Lighthouse 90+.

### Guardrails
- Fictional companies, people and numbers; no real banks, funds, logos or trademarks.
- Don't present sample subscriber counts or market data as real.
- Store only email for newsletter signups.
- Small typed components, no `any`, visible error handling.
- Done when: all desk, article, reports, events, jobs, contributors and membership routes render; filters work with empty states; green text meets AA; newsletter form handles success, duplicate and error; dark mode is consistent.

Open the builderAll templatesThis palette on its own