DevHarbor Live

Who it is for

• Tech conference organizers
• Developer relations teams
• Agencies building event hubs
• Companies hosting product launch events

Layout

1. Header: wordmark with boxed 'CONF' tag, SPEAKERS / SESSIONS / WORKSHOPS links, LOGIN right
2. Announcement strip with NEW badge and 'Read more' link
3. Featured keynote card: rounded photo with light wash, small label, large teal headline with a gold slash accent, monospace speaker credits, gold circular play button
4. Centered event title, subtitle and demo/what's new CTAs
5. Sessions table: title, speaker avatar(s) with company, video thumbnail and duration
6. Speaker directory grid, workshops, three-tier sponsor grid, photo gallery, blog/announcements
7. Enterprise page with five-field lead form; footer with privacy policy and event terms

Palette

Confident, techy, calm, polished, warm. A deep teal stage with gold highlights like a well-lit keynote hall.

• background (deep teal)#2e6060
• text (cream)#f5f3ef
• primary (gold)#d6a95c
• card#294c4c
• secondary#3f6969
• border#496e6e
• muted accent#d5bc90

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

Bold system/rounded sans (Baloo-style) 48-60px headlines (the system face is not on Google Fonts; a vibld project loads Inter)

Body

System sans 18px; JetBrains Mono uppercase for credits, durations and labels (the system face is not on Google Fonts; a vibld project loads Inter)

Friendly heavy display with monospace metadata signals 'developer event' without feeling cold.

Spacing and imagery

Full-width rows with hairline dividers, 1232px container, 12px radius on media cards, rounded video thumbnails, generous hero padding.

Conference crowd and stage photos, small talk thumbnails with rounded corners, circular speaker avatars, gold play affordances.

Components

• Header with tag-style wordmark
• Announcement bar with NEW badge
• Featured keynote video card
• Gold play button
• Sessions table with thumbnails and durations
• Speaker avatar stack
• Speaker cards
• Workshop list
• Sponsor tier grid
• Photo gallery
• Blog post cards
• Enterprise lead form
• Session detail page
• Sticky mobile menu

Interactions

• Play keynote in modal/inline
• Row hover highlight in sessions table
• Speaker card hover reveal bio
• Gallery hover effects
• Lead form validation and success
• Sticky nav with mobile menu
• Framer Motion entrance animations

Data

• Session{slug, title, speakerIds[], videoUrl, thumbnail, duration, track, description}
• Speaker{id, name, role, company, avatar, bio}
• Workshop{title, date, level}
• Sponsor{name, tier, logo}
• Post{slug, title, excerpt, date}
• Lead{firstName, lastName, email, company, 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 **DevHarbor Live**, a conference hub for a fictional developer conference whose talks are streamed and archived. Visitors come to watch the keynote, browse the session library, learn about speakers and sponsors, and (for companies) request an enterprise demo. The site should feel like a premium streaming library in a warm teal-and-gold palette.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Table, Dialog, Card, Badge, Form, Sheet), lucide-react, Framer Motion for entrance animations, Embla Carousel for the photo gallery, react-hook-form + zod for the lead form, React Router for ~13 routes. Video embeds via a privacy-friendly player (lite embed). Lead form posts to a serverless function; otherwise static.

### Pages & layout
1. **Home** – header: wordmark with a small boxed tag, three uppercase links, Login right. Announcement strip with a gold "New" badge and a "Read more →" link. Featured keynote card: wide rounded photo with a pale gradient, tiny label, large two-line headline in deep teal, a diagonal gold stroke accent, monospace speaker credits, round gold play button. Centered event title, one-line subtitle, "See what's new" and "Book a demo" buttons. Sessions table: title | speaker avatar(s), name, company | thumbnail + duration. Speaker highlights, sponsor tiers, gallery, latest posts.
2. **Sessions** (filter by track) and **Session detail** (player, description, speakers, related). **Speakers** directory and profiles. **Workshops**. **Sponsors**. **Blog** list/post. **Enterprise** landing with benefits and five-field lead form. **Privacy**, **Event terms**, 404.

### Design system
- Tokens: `--background: #2e6060`, `--foreground: #f5f3ef`, `--primary: #d6a95c`, `--primary-foreground: #142929`, `--card: #294c4c`, `--secondary: #3f6969`, `--muted: #334d4d`, `--border: #496e6e` (decorative), `--input-border: #89b0b0`, `--accent: #d5bc90`, `--radius: 0.75rem`.
- Fonts: Baloo 2 or Nunito (700) for display, Inter for body, JetBrains Mono for metadata (uppercase, +0.08em). Scale: 12 / 14 / 16 / 18 / 24 / 36 / 48 / 60.
- Spacing: 8px base; table rows 80px tall with 1px borders; sections 96px.
- Motion: entrance fade/rise 400ms staggered; row hover background 150ms; play button scale 1.06 on hover.

### Components & interactions
Announcement strip (dismissible, persisted), keynote card (poster → player on click; loading; error fallback link), sessions table (hover row, keyboard focusable rows linking to detail, responsive collapse to cards, empty filter state), avatar stack (+N), duration chip, speaker card (hover reveals short bio), sponsor tier grid, gallery (arrows, swipe), blog card, lead form (first name, last name, work email, company, message; validation; submitting; success; error), mobile menu sheet.

### Data & state
`Session{slug,title,track,speakerIds[],videoId,thumbnail,durationSec,description}`, `Speaker{id,name,role,company,avatar,bio}`, `Workshop{slug,title,date,level}`, `Sponsor{name,tier,logo,url}`, `Post{slug,title,excerpt,date,body}`, `Lead{firstName,lastName,email,company,message}`. Typed content files; filters in URL. Seed 16 fictional talks and speakers from invented companies; generate thumbnails.

### Accessibility
Cream on teal is 6.4:1 (8.5:1 on cards, 5.5:1 on the secondary surface). Gold `#d6a95c` on teal is 3.3:1, so it is used for the play button and large accents only; buttons and badges use `#142929` text on gold (7.0:1). The muted accent `#d5bc90` is for text on cards (5.1:1) or 24px+ on teal. The keynote headline is teal `#2e6060` on a `#f5f3ef` wash (6.4:1). Lead-form inputs use `--input-border: #89b0b0`; `#496e6e` dividers are decorative. Play buttons need labels ("Play keynote"). Video has captions and a transcript link. Table semantics preserved on desktop. Reduced motion disables entrance animations.
Verified contrast: body text on teal background #f5f3ef on #2e6060 = 6.41:1; body text on card #f5f3ef on #294c4c = 8.49:1; body text on secondary surface #f5f3ef on #3f6969 = 5.51:1; dark label on gold primary button and badges #142929 on #d6a95c = 7.03:1; teal keynote headline on pale wash #2e6060 on #f5f3ef = 6.41:1.

### Security
Proportionate: lead form validated with zod client-side and in the function, honeypot, rate limiting, work-email check, no secrets in client code. Video embeds via `youtube-nocookie`-style domains or a lite facade to avoid third-party cookies before interaction. Blog Markdown sanitized with DOMPurify. Sponsor links `rel="noopener noreferrer sponsored"`.

### Performance & SEO
VideoObject JSON-LD on session pages, Event JSON-LD on home, OG images per talk, sitemap. Lite video facades, lazy thumbnails with fixed aspect ratios, route splitting. Lighthouse 90+.

### Guardrails
- Fictional conference, speakers, companies and sponsor marks; no real company names or logos.
- No fabricated attendee quotes.
- Collect only needed lead fields.
- Small typed components, no `any`, visible errors.
- Done when: keynote plays from the facade; sessions table filters and links to detail pages; speaker and sponsor pages render; lead form validates end to end; gold/teal contrast rules are applied.

Open the builderAll templatesThis palette on its own