Blockwise

Who it is for

• Community journalists
• Neighborhood newsletter writers
• Civic groups and local businesses
• Residents following local news

Layout

1. Sticky header: two-tone wordmark left, neighborhood selector pill centered, search, notification bell with dot, teal Subscribe button right
2. Short panoramic city banner with 'What's happening in [Neighborhood]' headline
3. Main two-column grid: lead story card (full-bleed photo, dark gradient, category pill, headline, dek, byline, time, area) left; weather widget with 5-day forecast right
4. Latest Stories: two-column card grid with photo, colored category pill, time, headline, excerpt, author and neighborhood
5. Sidebar: Upcoming Events list (colored dot, title, schedule, location, RSVP count) and Trending topics
6. Article page with reading progress bar, scroll-spy table of contents and related stories grid
7. Footer: wordmark, News / Events / Weather / Subscribe links, copyright

Palette

Friendly, bright, civic, approachable, tidy. It feels like a modern community bulletin board rather than a hard-news outlet.

• background#ffffff
• text#0a0a0a
• primary (teal)#30b0c7
• surface#f5f5f5
• border#e5e5e5
• category: business amber#f59e0b
• category: education violet#8b5cf6

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

Outfit 700 for headlines and wordmark (30px lead headline, 20px cards), slight negative tracking

Body

Switzer 16px, muted gray excerpts (Switzer is not on Google Fonts; a vibld project loads Inter)

Geometric rounded display face feels neighborly; the neutral grotesk keeps long reads comfortable.

Spacing and imagery

Comfortable; ~1230px container, 24px gutters, 2/3 + 1/3 split, 16px card radius, soft 1px borders, pill chips.

Real-life local photography (aerials, markets, storefronts, civic buildings) cropped into rounded cards; a gradient weather card; small weather emoji-style icons.

Components

• Neighborhood selector dropdown
• Notification bell with unread dot
• Panoramic banner
• Lead story overlay card
• Weather widget with forecast
• Story card with colored category pill
• Upcoming events list
• Trending topics list
• Reading progress bar
• Scroll-spy table of contents
• Related stories grid
• Subscribe email CTA

Interactions

• Switching neighborhood refilters stories, events and weather
• Card hover lift and image zoom
• Reading progress bar on scroll
• Scroll-spy highlighting of article sections
• Event date picker filter
• Framer Motion entrance fades
• Subscribe form success state

Data

• Neighborhood{slug, name, bannerImage}
• Story{slug, title, dek, body, category, author, neighborhood, publishedAt, image}
• Event{title, schedule, startsAt, location, attendees, neighborhood, color}
• WeatherSnapshot{temp, feelsLike, condition, humidity, wind, forecast[{day, high, low, icon}]}
• Category{slug, name, color}

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 **Blockwise**, a hyperlocal news site for a fictional mid-sized city with five neighborhoods. Residents choose their neighborhood and immediately see the lead local story, latest stories, the weather, upcoming events and what's trending. The job: make civic and community updates easy to skim and pleasant to read.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Select, Popover, Card, Badge, Calendar, Sheet), lucide-react, Framer Motion for entrance fades, React Day Picker for event date filtering, date-fns for "2h ago" times, React Router. Content from typed JSON; weather from a mocked service module (optionally a serverless proxy to a weather API). No database needed.

### Pages & layout
1. **Home** – sticky header: two-tone wordmark, centered neighborhood selector pill with a map-pin icon, search, bell with unread dot, teal Subscribe button. Short panoramic banner: "What's happening in {Neighborhood}". Grid 8/4: lead story card (photo, bottom gradient, category pill, big headline, dek, byline · time · area) and a gradient weather card (temp, feels like, condition, humidity, wind, 5-day row). "Latest stories" two-column cards; right rail with Upcoming Events and Trending. Footer.
2. **Article** – top reading progress bar, category, headline, meta, hero image, body with h2 sections, sticky scroll-spy table of contents on desktop, related stories grid.
3. **Events** – calendar filter and list. **Category** pages. **Subscribe** page.

### Design system
- Tokens: `--background: #ffffff`, `--foreground: #0a0a0a`, `--primary: #30b0c7`, `--primary-foreground: #04262c`, `--secondary: #f5f5f5`, `--border: #e5e5e5` (decorative), `--input-border: #767676`, `--muted-foreground: #525252`, `--radius: 0.625rem`. Category colors: community teal, government indigo `#6366f1`, education violet `#8b5cf6`, business amber `#f59e0b`, sports green `#16a34a`; each used as a 12% tint pill with darker text.
- Fonts: Outfit (700 headings, -0.01em) and Switzer or Inter body. Scale: 12 / 14 / 16 / 18 / 20 / 24 / 30 / 40.
- Spacing 4px base, 24px gutters, cards 16px radius with 1px border and no shadow until hover (`0 8px 24px rgb(0 0 0 / .08)`).
- Motion: 200ms hover, 400ms fade-up on first view, progress bar linear.

### Components & interactions
Neighborhood select (keyboard searchable, persisted), notifications popover (empty state), search dialog, lead card, story card (default/hover/focus/loading skeleton), weather card (loading/error fallback "Weather unavailable"), events list (empty state for a quiet week), trending list with rank numbers, progress bar, TOC (active item), subscribe form (validation, success, error).

### Data & state
`Neighborhood{slug,name,banner}`, `Story{slug,title,dek,body,categorySlug,author,neighborhoodSlug,publishedAt,image{src,alt}}`, `Event{id,title,startsAt,recurrence?,location,rsvps,neighborhoodSlug,categorySlug}`, `Weather{temp,feelsLike,condition,humidity,windMph,windDir,forecast[]}`. Selected neighborhood in URL (`/n/oakridge`) and localStorage. Seed 20 fictional stories, 10 events and invented street names; no real people.

### Accessibility
Teal `#30b0c7` fails as text on white (about 2.6:1); use it only for fills with dark text (`#04262c`, over 7:1) and use `#1b7f91` for teal text links. White text on the lead photo sits on a gradient reaching `rgb(0 0 0 / .75)` behind the text (worst case over a white pixel = `#404040`, 10.4:1). Category meaning must be in the pill text, not color alone; pill text uses the 800-level shade on its 12% tint (e.g. `#155e6b` on `#e6f6f8`, 6.6:1; `#92400e` on `#fef3e2`, 6.5:1). The bell's unread dot needs a text label ("2 new notifications"). Weather icons get `aria-label`s; the forecast is a list. Progress bar is decorative (`aria-hidden`). Reduced motion removes fades and hover zoom.
Verified contrast: body text on white #0a0a0a on #ffffff = 19.8:1; muted excerpt text on white #525252 on #ffffff = 7.81:1; dark label on teal Subscribe button #04262c on #30b0c7 = 6.19:1; teal link text on white #1b7f91 on #ffffff = 4.68:1; white headline on lead-photo gradient #ffffff on #404040 = 10.37:1; community pill text on teal tint #155e6b on #e6f6f8 = 6.64:1.

### Security
Static site with light forms: zod validation for subscribe and tip forms, honeypot, server-side rate limit if posted to a function. If a weather API is used, keep its key in the serverless function, never in client code. Sanitize any rich article HTML with DOMPurify. External links `rel="noopener noreferrer"`.

### Performance & SEO
Responsive images with lazy loading; preload only the lead image. Per-article title/description, OG image, NewsArticle JSON-LD, LocalBusiness-free (no fake entities). Separate route chunks for events and articles. Lighthouse 90+.

### Guardrails
- Original stories, fictional neighborhoods and placeholder photos; no real outlets or logos.
- No fabricated quotes from real officials.
- Collect only email for subscriptions.
- Small typed components, no `any`, visible error states.
- Done when: switching neighborhood updates stories, events and banner; weather shows a graceful fallback; article progress and TOC work; category pills pass contrast; Lighthouse accessibility 95+.

Open the builderAll templatesThis palette on its own