Eventgrain

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

Instrument Serif keeps the gentle editorial headlines and figures, and the slightly quirky Karla grotesk makes the UI warmer than Inter, which suits the garden framing.

• Instrument SerifHeadings: hero 96px, H2 60px and KPI figures
• KarlaBody: UI and body 16px, buttons 14px medium

Who it is for

• Founders tracking revenue and churn
• Product managers reviewing funnels and events
• Small teams replacing spreadsheet dashboards
• Engineers debugging event tracking

Layout

1. Floating rounded nav pill: logo mark + serif wordmark left, three anchor links centered, terracotta sign-up pill right
2. Full-bleed illustrated landscape hero (sunset hills, wildflowers) with large serif headline, tagline and two CTAs
3. Logo strip of invented company names
4. Three feature cards section
5. Dashboard preview in a window frame: four KPI cards, multi-line chart, events-by-type and top-users bar charts
6. Testimonials
7. Two-tier pricing
8. Closing CTA and footer
9. App: sidebar shell with Overview, Analytics, Users, Events, Reports, Settings

Palette

gentle, warm, editorial, optimistic, unhurried. Analytics framed as tending a garden rather than staring at a cockpit.

• background cream#fcfaf8
• text warm charcoal#2c2926
• primary terracotta#b05838
• secondary sage#6f9b7d
• card#f6f3ee
• muted/accent sand#eee9e2
• chart gold#bb8821

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

Instrument Serif Regular 96px hero, 60px H2, slight negative tracking; also used for KPI numbers

Body

Karla 16px; buttons Karla 14px medium

Elegant condensed serif for headlines and figures against neutral Karla UI creates an editorial, gentle tone.

Spacing and imagery

Wide sections, ~1150px container, rounded window frame ~24px radius, KPI cards ~16px radius, pills 20px radius; comfortable padding.

Painterly illustrated landscape (hills, sunset, poppies) as hero and faded section backdrops; data shown with warm-toned Recharts lines and bars.

Components

• Floating pill navbar
• Illustrated hero with serif headline
• Logo cloud
• Feature cards
• Window-frame dashboard preview
• KPI card with delta
• Multi-series line chart with dual axis
• Horizontal bar charts
• Pricing cards
• Collapsible sidebar
• Users data table with search/filter/pagination
• Event stream with expandable JSON
• Reports list with CSV export
• Theme toggle

Interactions

• Chart type switch (area/line/bar)
• Global date range 7/14/30/90 days
• Sidebar collapse with Cmd+B
• Table sort, search, status filter, pagination
• Expand event row to inspect properties
• CSV import and export with progress
• Light/dark/system theme
• Password strength meter on sign-up
• Nav becomes compact on scroll

Data

• Event{id, project_id, user_ref, type, occurred_at, properties jsonb}
• TrackedUser{id, project_id, name, email, status, first_seen, last_seen, revenue}
• DailyMetric{project_id, day, revenue, users, sessions, conversions}
• Report{id, project_id, template, params, status, created_at, file_path}
• Profile{id, name, theme, plan}

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 **Eventgrain**, a friendly product-analytics dashboard for founders and small product teams. They load their own event data, then watch revenue, users, conversion and churn, inspect raw events, and export reports. Wrap it in a warm, editorial marketing site.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix) and lucide-react. Use Recharts for KPI sparklines and the area/line/bar charts, TanStack Query for data, TanStack Table for users and events, react-resizable-panels for the event inspector, react-hook-form + zod for auth and settings, date-fns for ranges, and Papa Parse for CSV import. Use Supabase for Auth (email + Google), Postgres for events and metrics, Storage for exported CSVs, and an Edge Function that validates and bulk-inserts imports.

### Pages & layout
1. **Landing**: a floating rounded nav pill (mark + serif wordmark, three anchor links, terracotta CTA). A full-bleed illustrated landscape hero with a large serif headline set on a cream scrim panel (`rgba(252,250,248,.88)`), tagline and two pill CTAs. A logo strip of invented names, three feature cards, a window-framed dashboard preview, testimonials, two pricing cards, a closing CTA and a footer.
2. **Auth**: sign in and sign up with a password strength meter.
3. **Dashboard shell**: collapsible sidebar (Overview, Analytics, Users, Events, Reports, Settings) and a top bar with the date range and theme toggle.
4. **Overview**: four KPI cards (revenue, users, conversion, churn) with deltas and sparklines, a combined revenue/users/sessions chart, events-by-type and top-users bars.
5. **Analytics**: a chart type selector and deeper trends.
6. **Users**: searchable, sortable, paginated table with a status filter.
7. **Events**: chronological stream with type badges; selecting a row opens a JSON property panel.
8. **Reports**: quick templates, run status, CSV download.
9. **Settings**: profile, preferences, security, billing tabs.

### Design system
- Light: `--background: #fcfaf8`, `--foreground: #2c2926`, `--primary: #b05838` (terracotta), `--secondary: #6f9b7d` (sage), `--card: #f6f3ee`, `--muted: #eee9e2`, `--border: #e7e1da`, `--input-border: #9c8366`, chart gold `#bb8821`.
- Dark: warm charcoal `#1f1c1a` background, `#f3eee8` text, terracotta lifted to `#d98a6c`.
- Fonts: Instrument Serif for display and KPI figures (28px+); Karla for UI. Scale 12/14/16/20/28/40/60/88; body 16px, line-height 1.6, 70ch max.
- Spacing on a 4px base; cards 16px radius; pills fully rounded.
- Shadows: soft and warm (`0 10px 30px -10px rgb(60 40 20 / .15)`).
- Motion: 200ms ease-out, with gentle fade-up on scroll for landing sections.

### Components & interactions
KpiCard (loading skeleton, positive/negative delta colors plus an arrow icon), TrendChart (type switch, legend toggle, tooltip), DateRangeSelect (clamps to the imported data range), UsersTable (empty "No users match" state, error retry), EventRow (expandable), PropertyInspector (collapsible JSON tree), ReportCard (queued/running/done/failed badges), CsvImport (drag area, parse preview, per-row errors), ThemeToggle, Sidebar (collapsed icon mode, Cmd+B, tooltips on icons).

### Data & state
Tables: `projects(id, owner_id, name)`, `events(id, project_id, user_ref, type, occurred_at, properties jsonb)`, `tracked_users(id, project_id, name, email, status, first_seen, last_seen, revenue)`, `daily_metrics(project_id, day, revenue, users, sessions, conversions)`, `reports(id, project_id, template, params, status, file_path)`. Keep the date range and filters in the URL and server data in TanStack Query. Seed 90 days of plausible fictional metrics and users with invented names.

### Accessibility
Primary terracotta is `#b05838` so white labels pass AA; hero copy sits on a cream scrim. Use Karla below 20px. Every chart needs a data-table alternative and legends that do not rely on color alone. Use `role="navigation"` on the sidebar, keyboard-operable collapse, focus rings on the terracotta ring token, and alt text on the hero illustration (or mark it decorative).
Verified contrast: body: #2c2926 on #fcfaf8 = 13.9:1; white on primary: #ffffff on #b05838 = 4.9:1; hero on scrim: #2c2926 on #dedcda = 10.6:1; dark text: #f3eee8 on #1f1c1a = 14.7:1.

### Security
Enable RLS on every table so rows are visible only to project members through `project_members(user_id, project_id, role)`. The import Edge Function must check membership, cap file size (e.g., 10 MB), validate rows with zod, and use the service key only on the server. Signed URLs for report downloads expire quickly. Render JSON properties as text, never as HTML. Rate-limit auth attempts.

### Performance & SEO
Split the landing and app bundles. Lazy-load chart modules. Pre-aggregate `daily_metrics` instead of querying raw events for charts. Compress the hero illustration (AVIF) with a blurred placeholder. Add meta/OG tags and a single H1; target Lighthouse 90+ on the landing page.

### Guardrails
- Write fresh copy; use generated illustrations and invented logo names.
- Label testimonials as samples.
- Store only the event data you need, and document retention.
- Keep components small and typed; no `any`. Show errors visibly.
- Done when: (1) a CSV import populates the dashboard; (2) the date range drives all pages; (3) the users table filters, sorts and paginates; (4) dark mode passes contrast checks; (5) RLS isolates projects.

Open the builderAll templatesThis palette on its own