Gatherbox

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

Host Grotesk is already the design's quirky grotesk, so the Space Grotesk fallback is folded into it.

• Host GroteskHeadings: boxed words 48-64px 500 at -6%
• Host GroteskBody: body 16-18px, 12px uppercase labels

Who it is for

• Community and meetup organizers
• Conference and workshop teams
• Local attendees looking for things to do
• Creators selling event tickets

Layout

1. Boxed top-left nav: smiley logo tile, DISCOVER / CREATE EVENT / SIGN IN in bordered cells
2. Rotating pink scalloped 'BROWSE' badge with down arrow at top right
3. Hero headline built from bordered word boxes ('Discover' 'events' 'near' 'you') with one word in a pink pill
4. Centered one-line intro
5. Auto-scrolling edge-to-edge carousel of event poster tiles with date/time stamp boxes, title and venue
6. 'Browsing events in [Country]' selector
7. Calendar picker left, event results list right (with 'No events found' empty state)
8. Full-screen event detail page with countdown and register CTA; creator dashboard and admin dashboard

Palette

Playful, bold, zine-like, energetic, minimal. It feels like a gig poster wall translated into a clean web grid.

• background#ffffff
• text/ink#020618
• accent (hot pink)#f25ce8
• muted text#5f646c
• border#020618
• poster dark#000000

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

Host Grotesk 500, 48-64px with tight -6% tracking, set inside bordered boxes

Body

Host Grotesk 16-18px; 12px uppercase labels (+0.06em) for nav and date stamps

One quirky grotesk used at extremes of size; the boxed words make type itself the graphic.

Spacing and imagery

Loose, poster-like composition; 1px black borders on nav cells, word boxes and stamps; 0 radius except the pink pill; full-bleed carousel.

User-uploaded event posters and covers of any style, shown full-bleed in tall tiles with white date stamps overlaid.

Components

• Bordered nav cells
• Spinning text badge
• Boxed-word hero headline
• Auto-scrolling event carousel
• Date/time stamp chips
• Location selector
• Calendar date picker
• Event results list with empty state
• Full-screen event page
• Countdown timer
• Registration button/form
• Creator event editor
• Admin dashboard table

Interactions

• Continuous auto-scroll carousel pausing on hover
• Rotating badge animation
• Calendar day selection filters events
• Location change refilters
• Live countdown to start
• Instant registration with confirmation
• Real-time attendee count updates
• Role-based access to admin views

Data

• Event{id, title, slug, cover_url, starts_at, ends_at, venue, city, country, is_online, category, capacity, creator_id, status}
• Registration{id, event_id, user_id, status, created_at}
• Profile{id, display_name, avatar_url, role}
• Category{slug, name}

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 **Gatherbox**, an event discovery and hosting platform with a bold poster aesthetic. Attendees browse upcoming events by location and date, open a full-screen event page and register in one click; organizers create and manage their events; admins moderate. The job: make finding and joining local or online events feel fun and fast.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Calendar, Popover, Select, Dialog, Table, Toast), lucide-react, React Router, TanStack Query, react-hook-form + zod for event creation, date-fns for dates and countdowns, Embla Carousel (autoplay plugin) for the marquee carousel. **Supabase**: Postgres (events, registrations, profiles), Auth (email/OAuth), Storage (event covers), Realtime (attendee counts), and an Edge Function for registration with capacity checks. Optional Maps embed for venues.

### Pages & layout
1. **Discover** – top-left nav made of bordered cells (logo tile, Discover, Create event, Sign in). Spinning scalloped "Browse" badge with an arrow at top right that scrolls to results. Hero headline composed of word boxes with one word in a hot-pink pill; short intro. Full-width auto-scrolling poster carousel (date and time stamps in small bordered boxes, title and venue overlay). "Browsing events in [country]" selector, calendar on the left and results list on the right, with an empty state.
2. **Event page** – full-screen cover, title, date/time, venue or online link after registration, description, countdown, capacity bar, register button.
3. **Create/Edit event** – form with cover upload and preview.
4. **My events** (creator) – list with status, registrations count, edit/cancel.
5. **Admin** – table of all events with approve/hide actions and user roles.

### Design system
- Tokens: `--background: #ffffff`, `--foreground: #020618`, `--accent: #f25ce8`, `--muted-foreground: #5f646c`, `--border: #020618`, `--radius: 0` (pill exception `9999px`).
- Font: Host Grotesk 400/500. Scale: 12 (uppercase labels, +0.06em) / 14 / 16 / 18 / 24 / 40 / 64 with -0.06em tracking on display.
- Spacing: 8px base; bordered boxes with 1px ink lines; carousel tiles 40vw × 60vh on desktop.
- Motion: badge rotation 20s linear infinite; carousel 40px/s continuous; hover invert on nav cells 120ms.

### Components & interactions
Nav cells (hover invert, active filled), badge (pauses under reduced motion), word-box headline, carousel (pause on hover/focus, manual arrows), date stamp, location select, calendar (days with events marked, selected, today), event row (hover), empty state with "Create one" link, register button (idle/loading/registered/full/waitlist/closed), countdown (live, started, ended), cover uploader (drag, preview, size/type error), admin table (sort, filter, confirm dialog for destructive actions).

### Data & state
`events(id,slug,title,description,cover_path,starts_at,ends_at,timezone,venue,city,country,is_online,online_url,category,capacity,creator_id,status)`, `registrations(id,event_id,user_id,status,created_at, unique(event_id,user_id))`, `profiles(id,display_name,avatar_url,role)`. Server state via TanStack Query; filters in URL. Seed 12 fictional events across cities and categories with generated poster art.

### Accessibility
Ink on white is 20:1; ink text on the hot-pink `#f25ce8` pill is 7.2:1, but pink is never used as text on white (about 2.9:1). Muted text `#5f646c` is 6:1. Date stamps are white boxes with ink text (20:1) so they stay legible over any poster. 1px ink borders on inputs and cells give 20:1 boundaries. Carousel: pause button, `aria-roledescription`, slides reachable by keyboard; autoplay off under reduced motion. Word-box headline must read as one `h1` sentence. Calendar is keyboard navigable with announced selected date. Countdown updates are not live-announced every second. Covers need organizer-provided alt text (required field).
Verified contrast: body text on white #020618 on #ffffff = 20.16:1; muted text on white #5f646c on #ffffff = 5.96:1; ink text on hot-pink pill and badge #020618 on #f25ce8 = 7.17:1; ink text on white date stamp #020618 on #ffffff = 20.16:1; inverted nav cell text on ink #ffffff on #020618 = 20.16:1; 1px ink borders on inputs and cells #020618 on #ffffff = 20.16:1.

### Security
RLS: `events` public select where `status='published'`; insert/update/delete only by `creator_id = auth.uid()` or admin role (checked via a `has_role` security-definer function, never a client flag). `registrations` insert via Edge Function that enforces capacity and deadlines atomically; users read only their own rows; creators read registrations for their events. `online_url` only returned to registered users. Storage: covers bucket limited to images under 5 MB, path prefixed by user id. zod on client and function; rate limit registrations.

### Performance & SEO
Prerender or SSR event pages with Event JSON-LD, OG image from the cover, canonical slug URLs. Lazy-load carousel images beyond the first three; use transformed thumbnails. Lighthouse 90+.

### Guardrails
- Fictional events, organizers and placeholder posters; no real brands or company logos.
- No fake attendee counts presented as real.
- Collect only what registration needs.
- Small typed components, no `any`, visible error and empty states.
- Done when: discover filters by location and date; registration respects capacity and shows state; creators can only edit their own events; admin can hide an event; the carousel can be paused by keyboard.

Open the builderAll templatesThis palette on its own