Pacemoor

A mock-up of the screen, drawn from its layout, palette and typefaces. A build follows the full prompt below.

Start from this screenRead the build prompt

Typefaces

The catalog's own faces. A screen composed into a template is drawn in that template's typefaces.

• InterHeadings: Inter 700, 28px/1.2 title; stat values 22px 600 tabular
• InterBody: Inter 400 16px/1.5 (15px in step rows)

Patterns

• dark persistent sidebar with light main
• AI assistant block pinned in sidebar
• saved smart-views list in sidebar
• back-link breadcrumb above title
• Overview / Edit / Report / Runs tabs
• horizontally scrolling stat cards row
• numbered step timeline with day labels and channel icons
• per-step assignee count

States it is designed for

• active sequence with data
• paused sequence (banner with resume)
• new sequence with zero enrolments (stat dashes + 'Enrol leads' CTA)
• no tasks assigned to current user (info line)
• high bounce (red value + warning icon + tooltip)
• loading skeleton stats and rows
• permission: reps can view, only managers edit

Who it is for

• sales managers
• SDR/BDR teams
• revenue operations

Layout

1. dark sidebar (~240px): user menu with avatar and org name; AI assistant card with Chat (shortcut hint) and Voice agents; primary nav (Inbox with count badge, Opportunities, Leads, Contacts, Activities, Workflows active, Conversations, Reports); 'Smart views' list with show-all link
2. top bar: wide search, phone dropdown, help
3. header: '← Workflows' back link, 28px sequence title, overflow menu; tab row
4. stat cards row (6 cards, horizontally scrollable): value (large) + label with icon; bounce in red with warning icon
5. info line (e.g. no calls assigned to you)
6. 'Steps' heading and numbered list: circle index, day label, channel icon, step name, assignee count
7. mobile: sidebar becomes bottom nav + drawer; stat row scrolls with snap

Palette

Businesslike and energetic; dark chrome frames a bright analytical canvas.

• sidebar#1a1a1a
• sidebar text#e8e8e8
• sidebar muted#a3a3a3
• main background#ffffff
• primary text#111111
• secondary text#5f6368
• stat value blue#1d4ed8
• bounce red#c5221f
• call icon green#188038
• card border#dcdfe3
• active nav fill#333333

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

Inter 700, 28px/1.2 title; stat values 22px 600 tabular

Body

Inter 400 16px/1.5 (15px in step rows)

Day labels 12px uppercase 600, 0.06em tracking; sidebar 15px 500.

Spacing and imagery

Medium density: stat cards 128×72px, 8px radius, 1px border; step rows 44px, 8px radius, 8px gap; numbered circles 24px.

Small coloured channel icons (person, envelope, phone, message) and a photo avatar in the sidebar; no illustrations.

Components

• DarkSidebar (UserMenu, AssistantCard, NavList, SmartViews)
• SearchBar
• BackLink
• SequenceTabs
• StatCard row
• InfoLine
• StepList (StepRow with index, day, channel icon, name, assignee count)

Interactions

• clicking a stat card filters the enrolled-leads table on the Report tab
• step row hover reveals edit and preview actions
• Edit tab turns the list into a draggable editor (dnd-kit)
• assignee count opens a popover of assignees
• Cmd/Ctrl+J opens the assistant chat
• stat row scrolls with arrow buttons on overflow

Data

• Sequence{id, org_id, name, status (active|paused|draft), goal_event}
• SequenceStep{id, sequence_id, position, day_offset, channel (task|email|call|sms), name, template_id}
• Enrollment{id, sequence_id, lead_id, status (active|completed|goal_met|bounced|exited), enrolled_at}
• StepAssignment{step_id, user_id, open_count}
• SequenceStats{sequence_id, active, enrolled, completed, goal_rate, avg_days_to_goal, bounce_rate}

Guardrails

Experience

• Order stats from volume to quality: active, enrolled, completed, goal %, time to goal, bounce %.
• Colour only the stats that need attention (bounce) and pair colour with an icon.
• Show day offsets on every step so the cadence rhythm is visible.
• Keep channel icons consistent with the rest of the CRM.
• Tell the current user plainly when nothing is assigned to them.

Accessibility

• Stat cards are a list; each exposes 'value label' as text, not just visual.
• Step list is an ordered list with day and channel read out ('Day 2, Call, Call number 2, 1 assignee').
• Sidebar nav uses aria-current and meets 4.5:1 for text on dark.
• Horizontal stat scroll is reachable by keyboard and has visible buttons.
• Keyboard shortcut is discoverable in a tooltip and can be disabled.

Security

• RLS: sequences, steps and enrollments scoped to the org; only managers edit steps.
• Stats computed by a server view; clients cannot write stats.
• Validate step templates server-side; strip scripts from email bodies.
• Audit sequence edits (who changed which step, when).

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 an entry'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 entries)
- 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.

### SaaS screen baseline
- Design every screen for its full set of states: first-run empty, loading skeleton, partial data, error with retry, permission-denied, and success feedback. Each entry lists the states its screen needs.
- Keep destructive actions (delete, revoke, downgrade, remove member) behind a confirmation that names the object, and prefer undo over a second dialog where the action is reversible.
- Enforce authorisation on the server for every action a screen exposes. Hiding a button is not access control; check the role again in the API or RLS policy.
- Never show secrets (API keys, tokens) in full after creation. Show them once, then mask them, and offer rotate and revoke.
- Keep the app shell (navigation, workspace switcher, account menu) consistent across screens, and preserve filters, sort and scroll position when the user navigates back.

### Goal
Build **Pacemoor**, the sequence overview page of a sales CRM. A manager opens a sequence and immediately sees six key stats and the ordered list of steps with day offsets, channels and how many reps have open work on each step.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Tabs, Popover, ScrollArea, Tooltip), lucide-react, dnd-kit for the Edit tab, TanStack Query, react-hook-form + zod, date-fns. Supabase Auth, Postgres with a stats view.

### Pages & layout
1. **CRM shell**: dark sidebar, top search bar.
2. **/sequences/:id** tabs: **Overview (this screen)**, Edit (reorderable steps), Report (enrolments table filtered by stat), Runs (activity log).
3. Responsive: sidebar collapses to icons at <1280px and to a drawer <768px.

### Design system
- Colors: `--sidebar: #1a1a1a` (sidebar), `--side-fg: #e8e8e8` (sidebar text), `--side-muted: #a3a3a3` (sidebar muted), `--bg: #ffffff` (main background), `--fg: #111111` (primary text), `--muted: #5f6368` (secondary text), `--stat: #1d4ed8` (stat value blue), `--danger: #c5221f` (bounce red), `--call: #188038` (call icon green), `--border: #dcdfe3` (card border), `--side-active: #333333` (active nav fill).
- Fonts: Inter 700, 28px/1.2 title; stat values 22px 600 tabular for headings; Inter 400 16px/1.5 (15px in step rows) for body. Day labels 12px uppercase 600, 0.06em tracking; sidebar 15px 500.
- Spacing: Medium density: stat cards 128×72px, 8px radius, 1px border; step rows 44px, 8px radius, 8px gap; numbered circles 24px.
- Radius: 8px cards and rows; circles for step numbers.
- Shadows: none; borders only.
- Motion: 150ms hover; stat row smooth scroll; drag lift 1.02 scale in Edit.

### Components & interactions
DarkSidebar, AssistantCard, SmartViews, SearchBar, BackLink, SequenceTabs, StatCard, InfoLine, StepList, StepRow, AssigneePopover.

Interactions: clicking a stat card filters the enrolled-leads table on the Report tab; step row hover reveals edit and preview actions; Edit tab turns the list into a draggable editor (dnd-kit); assignee count opens a popover of assignees; Cmd/Ctrl+J opens the assistant chat; stat row scrolls with arrow buttons on overflow.

States to build: active sequence with data; paused sequence (banner with resume); new sequence with zero enrolments (stat dashes + 'Enrol leads' CTA); no tasks assigned to current user (info line); high bounce (red value + warning icon + tooltip); loading skeleton stats and rows; permission: reps can view, only managers edit.

### Data & state
Stats from `sequence_stats` view; steps ordered by position; assignment counts joined per step. Seed a sequence 'Inbound trial follow-up' with 8 steps across 6 days and invented numbers (7 active, 251 enrolled, 220 completed, 80% goal, 2d, 3% bounce).

Model: `Sequence{id, org_id, name, status (active|paused|draft), goal_event}`; `SequenceStep{id, sequence_id, position, day_offset, channel (task|email|call|sms), name, template_id}`; `Enrollment{id, sequence_id, lead_id, status (active|completed|goal_met|bounced|exited), enrolled_at}`; `StepAssignment{step_id, user_id, open_count}`; `SequenceStats{sequence_id, active, enrolled, completed, goal_rate, avg_days_to_goal, bounce_rate}`.

### Accessibility
Stat cards are a list; each exposes 'value label' as text, not just visual. Step list is an ordered list with day and channel read out ('Day 2, Call, Call number 2, 1 assignee'). Sidebar nav uses aria-current and meets 4.5:1 for text on dark. Horizontal stat scroll is reachable by keyboard and has visible buttons. Keyboard shortcut is discoverable in a tooltip and can be disabled.
Verified contrast: sidebar text: #e8e8e8 on #1a1a1a = 14.2:1; sidebar muted: #a3a3a3 on #1a1a1a = 6.9:1; active nav text: #e8e8e8 on #333333 = 10.31:1; body text: #111111 on #ffffff = 18.88:1; muted text: #5f6368 on #ffffff = 6.05:1; stat value blue: #1d4ed8 on #ffffff = 6.7:1; bounce red value: #c5221f on #ffffff = 5.8:1; call icon: #188038 on #ffffff = 5.02:1.

### Security
RLS: sequences, steps and enrollments scoped to the org; only managers edit steps. Stats computed by a server view; clients cannot write stats. Validate step templates server-side; strip scripts from email bodies. Audit sequence edits (who changed which step, when). RLS per table: `sequences`, `sequence_steps`, `enrollments`, `step_assignments` select for org members; insert/update/delete on steps for users with `manager` role; enrollments written by server jobs; stats view security-invoker.

### Performance & SEO
Fetch stats and steps in parallel; lazy-load the Edit tab (dnd-kit). CRM routes noindex.

### Guardrails
- Order stats from volume to quality: active, enrolled, completed, goal %, time to goal, bounce %.
- Colour only the stats that need attention (bounce) and pair colour with an icon.
- Show day offsets on every step so the cadence rhythm is visible.
- Keep channel icons consistent with the rest of the CRM.
- Tell the current user plainly when nothing is assigned to them.
- Write all copy fresh; use invented people, companies and numbers only. No real brands, logos, wordmarks or third-party product names anywhere in the UI or seed data.
- Do not trace or copy any existing product's layout assets, icons or illustrations; draw generic ones.
- Acceptance criteria:
  - [ ] Six stats render with correct formats
  - [ ] Steps show index, day, channel icon, name and assignee count
  - [ ] High bounce is flagged with icon and colour
  - [ ] Reps see read-only; managers can reorder in Edit
  - [ ] Keyboard users can scroll the stat row and open popovers

Open the builderAll templatesThis palette on its own