Trailmap

Who it is for

• Product managers
• Startup founders
• Engineering leads planning quarters
• Cross-functional stakeholders

Layout

1. Rounded hero card with a soft watercolor birch-forest illustration; inside it a nav (logo + wordmark, 'Sign in', green 'Get started free')
2. Centered hero copy on the illustration: bold two-line headline, short subcopy, green 'Start for free' button
3. Product mock overlapping the hero bottom: sidebar of roadmaps (Q1 Product launch, Mobile redesign, API v2) and a quarter timeline (Q1-Q4) with cards showing colored top bar, title and status dot
4. Sticky dark-green rounded nav appears on scroll
5. Three features (drag and drop, collaboration, see what's stuck)
6. Beige testimonial panel with italic quote and avatar
7. Dotted wavy connector lines between sections
8. Closing CTA and footer
9. App: roadmap canvas, list view, inspector drawer, workspace settings, analytics

Palette

Calm, optimistic, natural, organized, gentle. The watercolor forest path suggests a journey ahead, softening a planning tool.

• background (warm off-white)#fafaf7
• card#ffffff
• text#171717
• primary forest green#0a714e
• nav dark green#021c14
• secondary beige#edede3
• in-progress orange#d97706

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

Figtree 700, 48px with -1.2px tracking; 30px section titles

Body

Figtree 400 16px; italic Figtree for the testimonial

A single friendly geometric sans, letting the illustration carry personality. Accessibility: body copy 16px or larger at 1.5+ line height with a ~70ch max measure; no text below 12px; weights under 400 only at 32px+; uppercase reserved for short labels with 0.05em+ tracking.

Spacing and imagery

~1024px contained hero card with 16px radius, overlapping product mock, 12px radius cards, pill buttons, large vertical rhythm with decorative dotted connectors.

A soft watercolor illustration of birch trees along a winding path in autumn tones; a small avatar in the testimonial; UI mock of roadmap cards.

Components

• Illustrated hero card
• Floating/sticky dark nav
• Roadmap sidebar list
• Quarter timeline header
• Roadmap card with status bar and dot
• List view table
• Inspector side panel
• Status and priority selects
• Inline comments thread
• Workspace switcher and member invites
• Analytics charts (status, priority, completion)
• Keyboard shortcut help dialog

Interactions

• Drag cards along the timeline and between lanes
• Click card to open inspector
• Keyboard shortcuts (N new, / search, ? help)
• Switch canvas/list view
• Sort list by status/priority/date
• Invite by email with role
• Add and delete comments
• Optimistic saves with toast on failure

Data

• Workspace{id, name}
• Membership{workspace_id, user_id, role: admin|member|viewer}
• Roadmap{id, workspace_id, name}
• Item{id, roadmap_id, title, description, owner_id, status: planned|in_progress|completed, priority: low|medium|high, start_date, end_date, lane, position}
• Comment{id, item_id, author_id, body, created_at}

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 **Trailmap**, a visual roadmap planner for product teams. PMs and founders place initiatives on a quarter timeline, set status and priority, assign owners, and discuss items in context. Stakeholders get one shared view that stays current, replacing the spreadsheet-plus-slides routine.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Sheet, Select, Dialog, Tabs), lucide-react. dnd-kit for dragging cards on the timeline, TanStack Query + TanStack Table for list view, react-hook-form + zod for the inspector, date-fns for quarter maths, Recharts for analytics, a small hotkeys hook. Supabase: Auth (email + Google), Postgres, Realtime so collaborators see moves live, and an Edge Function for email invites.

### Pages & layout
1. **Landing**: a rounded hero card filled with a soft painted landscape (trees and a winding path, warm autumn palette) containing the nav, a two-line headline, short subcopy and a green CTA; a product mock overlaps the card's bottom edge showing a sidebar of roadmaps and a Q1-Q4 timeline with cards. On scroll, the nav becomes a dark green floating bar. Then three feature blocks, a beige quote panel (clearly an example), dotted connector lines between sections, a closing CTA and footer.
2. **Canvas**: sidebar (workspace switcher, roadmaps list, New roadmap); header with view toggle (Canvas/List), filters (status, priority, owner) and "+ Item"; timeline with quarter columns and swimlanes; cards with a coloured top bar by status, title, status dot label, owner avatar.
3. **Inspector**: right Sheet with title, description, status, priority, dates, owner and comments.
4. **List view**: sortable table.
5. **Analytics**: status donut, priority bars, completion by quarter.
6. **Settings**: members, roles, invites.

### Design system
Light. Tokens: `--background: #fafaf7`, `--card: #ffffff`, `--foreground: #171717`, `--primary: #0a714e`, `--primary-foreground: #fafaf7`, `--secondary: #edede3`, `--muted: #f0f0ea`, `--border: #e3e3d9`, `--nav: #021c14`; status colours completed `#16a34a`, in progress `#d97706`, planned `#8c95a2`. Font: Figtree 400/500/600/700; scale 12/14/16/20/30/48. Radius 12px cards, 16px hero card, pills for buttons. Shadow `0 1px 3px rgb(23 23 23 / .08)`, lifted `0 8px 20px rgb(23 23 23 / .12)` while dragging. Motion 200ms ease-out; drop settles with a spring. Add `--muted-foreground: #5c5c55`, `--input-border: #979772`, and `--hero-backdrop: rgb(250 250 247 / .85)` behind hero copy on the illustration. Status dots always sit next to a text label.

### Components & interactions
Cards: default, hover, focused, dragging, read-only (viewer). Inspector fields save on blur with a subtle "saved" indicator; failed saves revert and toast. Shortcut dialog lists keys. Empty roadmap state explains how to add the first item. Comments: author can delete own; loading skeleton; empty "Start the discussion".

### Data & state
Workspace, Membership(role), Roadmap, Item(status, priority, start/end dates, lane, position), Comment. Canvas position derives from dates; dragging horizontally updates dates, vertically updates lane. TanStack Query caches with Realtime invalidation; filters in URL. Seed one workspace with three roadmaps and ~15 fictional initiatives.

### Accessibility
dnd-kit keyboard sensor with announcements, plus date fields in the inspector as a non-drag alternative. Status shown as text + colour. Timeline has a list-view equivalent. Hero illustration gets short alt text; headline over the illustration sits on `--hero-backdrop`, verified at 4.5:1 or better. Shortcuts avoid conflicts with screen-reader keys and can be disabled. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #171717 on #fafaf7 = 17.14:1; muted text #5c5c55 on #fafaf7 = 6.44:1; button text #fafaf7 on #0a714e = 5.76:1; primary link text #0a714e on #fafaf7 = 5.76:1.

### Security
RLS by workspace membership: viewers read only; members create/edit items and comments; admins manage members and roles (roles stored in the membership table and checked server-side). Comment bodies are plain text or sanitized markdown (DOMPurify). Invites use single-use expiring tokens sent from an Edge Function. Validate item fields with zod and database constraints (end ≥ start).

### Performance & SEO
Virtualise lanes with many items; memoise card positions. Lazy-load analytics. Compress the hero illustration (AVIF/WebP) with explicit dimensions. Landing meta/OG; app `noindex`.

### Guardrails
- Original copy and an original or generated illustration; no copied artwork.
- Label sample quotes as examples; no real company names.
- Typed components, no `any`, visible errors.
- Done when: items drag across quarters and persist; a second browser sees the move live; inspector edits save; viewers cannot edit; list view sorts; analytics reflect statuses.

Open the builderAll templatesThis palette on its own