Rootline Commons

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

Nunito keeps the rounded, neighbourly headline, and Signika is a soft, low-contrast humanist body that feels like a café noticeboard.

• NunitoHeadings: hero 72px 700, slight negative tracking
• SignikaBody: body 16px, 14px uppercase buttons at +0.15em

Who it is for

• Community gardens and local nonprofits
• Neighborhood organizers
• Small venues announcing events
• Groups on a tight budget

Layout

1. Announcement screen: full-bleed photo background with dark overlay; small wordmark top-left, social icon top-right
2. Left column: tracked uppercase date/time line, huge bold title, descriptive paragraph
3. Right column: address, email, phone, social link and white 'RSVP TODAY' button
4. Full site: sticky navigation header, full-width hero banners, event list with category badges, event detail pages with back links, program showcase pages, team member profiles, contact form, social footer

Palette

Warm, welcoming, earthy, calm, local. It feels like a neighborly invitation pinned on a café noticeboard.

• background#ffffff
• text#282c34
• primary (forest green)#2a4f17
• secondary (olive)#657d36
• accent (sage)#98af6a
• muted#f3f5f7
• hero overlay text#ffffff

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

Nunito 700, 72px hero title with slight negative tracking

Body

System sans 16px; uppercase 14px buttons with wide 2.1px tracking (the system face is not on Google Fonts; a vibld project loads Signika)

A rounded humanist display keeps things warm and approachable; wide-tracked caps add a touch of formality.

Spacing and imagery

Hero is one viewport; two-column composition with generous margins (~110px); square buttons; 4px radius elsewhere.

Full-bleed, softly darkened lifestyle photography (gardens, volunteers, market stalls and workshop interiors).

Components

• Full-bleed hero with overlay
• Date/time eyebrow
• Event title and description
• Contact block (address, email, phone)
• RSVP button
• Social link
• Sticky header
• Event cards with category badges
• Event detail page with back link
• Program cards
• Team profile cards
• Contact form

Interactions

• RSVP button opens form or mailto
• Hover transitions on cards and buttons
• Sticky header on scroll
• Mobile drawer navigation
• Contact form submit toast
• Back navigation from detail pages

Data

• Event{slug, title, date, startTime, endTime, category, description, location, image}
• Program{slug, title, summary, schedule, image}
• TeamMember{name, role, bio, photo}
• ContactMessage{name, email, message}
• RSVP{name, email, guests}

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 **Rootline Commons**, a website for a fictional neighborhood garden collective that runs workshops, volunteer days and seasonal events. Visitors are local residents deciding whether to attend, volunteer or join. The site needs a striking full-screen event announcement (usable on its own as a one-page invite) plus a compact ten-page site for events, programs, team and contact.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Card, Badge, Dialog, Sheet, Form, Input, Textarea), lucide-react, React Router, react-hook-form + zod for RSVP and contact, Sonner for toasts, Vaul for the mobile menu, Embla Carousel for a photo strip. No database required; forms post to a serverless function or form service. Optionally Supabase with an `rsvps` table if organizers want a head count.

### Pages & layout
1. **Event invite (home hero)** – full-bleed photo with a dark gradient overlay; small wordmark top-left and social icon top-right; left column: letter-spaced date and time line, very large bold title, a short paragraph; right column: address, email, phone, social link and a solid white "RSVP" button that opens the RSVP dialog.
2. **Home continued** – mission strip, upcoming events grid (category badge: Workshop, Volunteer, Harvest, Family), programs preview, photo strip, newsletter.
3. **Events** list with category filter; **Event detail** with back link, time, location, what to bring, RSVP.
4. **Programs** list and detail (e.g., youth gardening, composting, seed library).
5. **Team** – profile cards. **About**, **Get involved**, **Contact** (form + map link), 404.

### Design system
- Tokens: `--background: #ffffff`, `--foreground: #282c34`, `--primary: #2a4f17`, `--secondary: #657d36`, `--accent: #98af6a`, `--muted: #f3f5f7`, `--border: #e5e7eb` (decorative), `--input-border: #6b7280`, `--radius: 0.25rem`; hero overlay `linear-gradient(90deg, rgb(20 24 16 / .75), rgb(20 24 16 / .65))`.
- Fonts: Nunito (700/800 display) and Signika for body. Scale: 12 / 14 (buttons, uppercase +0.15em) / 16 / 18 / 24 / 36 / 56 / 72.
- Spacing: 8px base; hero padding 112px horizontal on desktop; section spacing 96px; cards with 1px border and a gentle hover shadow.
- Motion: 200ms hover transitions; hero text fades up 500ms on load; header background fades in after scroll.

### Components & interactions
Hero (with and without photo loaded, fallback solid green), RSVP dialog (name, email, number of guests; validation; submitting; success with calendar-file download; error), event card (hover, focus, past-event muted state), category badge, filter chips (active, empty result), team card, contact form (errors, success toast), mobile menu drawer, back link.

### Data & state
`Event{slug,title,startsAt,endsAt,category,summary,body,location,image{src,alt}}`, `Program{slug,title,summary,schedule,image}`, `TeamMember{name,role,bio,photo}`, `Rsvp{eventSlug,name,email,guests}`. Content in typed files; filters in URL. Seed eight fictional events, four programs and six volunteers with placeholder photos; addresses and phone numbers should be clearly fictional (e.g., 555 numbers).

### Accessibility
White text over photos sits on an overlay of at least `rgb(20 24 16 / .65)`, so even over a white pixel the backdrop is `#666964` (5.6:1). Forest green `#2a4f17` on white is 9.4:1 (also the label colour on the white RSVP button); olive `#657d36` passes as text at 4.6:1; sage `#98af6a` is decorative on light backgrounds and used as the focus ring only on the dark overlay (7.4:1). Inputs use `--input-border: #6b7280` (4.8:1). The hero `h1` is the event title; the date line is a `<time>` element. Buttons have visible focus rings (2px sage outline with offset on dark, green on light). Dialogs trap focus. Category meaning is written, not color only. Respect reduced motion.
Verified contrast: body text on white #282c34 on #ffffff = 14.0:1; white label on forest-green primary #ffffff on #2a4f17 = 9.42:1; green label on white RSVP button #2a4f17 on #ffffff = 9.42:1; olive secondary text on white #657d36 on #ffffff = 4.63:1; white hero text on overlay #ffffff on #666964 = 5.57:1.

### Security
Keep it proportionate: zod validation client-side and in the function, honeypot field and rate limiting on RSVP and contact, no API keys in client code, email addresses shown via `mailto:` rather than scraped lists, `rel="noopener noreferrer"` on social links. If Supabase stores RSVPs, RLS allows anon insert only and organizers read via authenticated role.

### Performance & SEO
Preload and compress the hero image (AVIF/WebP, width-appropriate), lazy-load others. Event JSON-LD per event page, Organization schema, OG image per event. Lighthouse 95+.

### Guardrails
- Fictional organization, people and contact details; no real businesses or logos.
- No invented testimonials as real quotes.
- Store only the RSVP fields you need.
- Small typed components, no `any`, visible errors.
- Done when: the hero invite works standalone at `/invite/:slug`; RSVP validates and confirms; events filter by category; hero text passes contrast over the photo; Lighthouse accessibility 95+.

Open the builderAll templatesThis palette on its own