Sendoff

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 600, 20px modal headline
• InterBody: Inter 400 16px body at 1.5; 14px nav (500); 13px footer and counter

Patterns

• modal with step counter footer ("6 of 6")
• embedded video with click-to-load poster
• personalised closing headline
• navy primary "Done" button
• warm tinted sidebar with trial badge card
• top tab strip (Answers, Insights, Action items, Objectives)
• dimmed app behind modal
• chat launcher

States it is designed for

• Last step (this screen)
• Earlier steps with Back / Next and progress
• Video blocked or offline (show poster with "Watch later" link)
• Saving completion failed (toast + retry)
• Trial ending soon (card turns amber with days left)
• Trial expired (Subscribe becomes primary; features read-only)

Who it is for

• Team leads and people managers
• HR and people-ops setting up check-in rituals
• Founders of small teams

Layout

1. Left sidebar (~165px, warm beige): wordmark, nav (Dashboard, Objectives, My action items with count, My teams & rituals), workspace group, footer links, trial card with "Subscribe now", user row with settings
2. Top bar: current person chip left; tab strip center; "Private notes" toggle right
3. Main (dimmed): upcoming meeting card
4. Modal (~335px): close x, H2 headline with first name, two short paragraphs, 16:9 video block, sign-off line, footer divider with centered "6 of 6" and right "Done" button
5. Mobile: modal full-screen with sticky footer

Palette

warm, encouraging, human, low-pressure. A kind wrap-up that leaves the manager confident about the next step.

• modal and main background#ffffff
• warm sidebar tint#f3ede6
• headings and body#1d1b1a
• step counter, footer links#6b6461
• Done button, links#0b1464
• button label#ffffff
• active sidebar item / tab#ecd9c6
• trial card background#e7e5e2
• overlay rgba(0,0,0,.35) (decorative)#a5a4a2
• focus ring#0b1464

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 600, 20px modal headline

Body

Inter 400 16px body at 1.5; 14px nav (500); 13px footer and counter

Similar to the observed neutral grotesk. Section labels in the sidebar are 12px uppercase 600 with 0.06em tracking.

Spacing and imagery

Comfortable: 8px base; modal padding 20px, 12px paragraph gap; video edge-to-edge in the modal; radius 8px modal, 6px buttons and sidebar items; modal shadow 0 16px 40px rgba(0,0,0,.18).

Video poster frame with bold highlighted headline type and a presenter (use an invented, illustrated or generic stock subject); small emoji allowed in copy; outline nav icons.

Components

• Warm sidebar with nav and counts
• Trial status card with CTA
• Tab strip
• Person chip
• Wizard modal
• Click-to-load video embed with poster and play button
• Step counter
• Primary Done button
• Close icon
• Chat launcher

Interactions

• Video loads the player only after the poster is clicked (privacy + speed)
• Done closes the wizard, marks onboarding complete and routes to Dashboard with a toast
• Close x asks nothing on the last step (all settings already saved)
• Esc closes; focus trapped in modal
• Sidebar item hover darkens the tint

Data

• OnboardingProgress{user_id, step (1-6), completed_at}
• Team{id, name}
• Ritual{id, team_id, kind (checkin|one_on_one), cadence, next_at}
• Subscription{workspace_id, status (trial|active|expired), trial_ends_at}
• ActionItem{id, owner_id, title, done}

Guardrails

Experience

• Tell the user what happens next and when they will hear from the app
• Keep video optional; the step is complete without watching
• Show the step counter so the end is obvious
• Route to a useful place (Dashboard) after Done, not back to an empty page
• Trial card shows days left in plain words

Accessibility

• Video has captions and a text summary link
• Poster button labelled "Play video: tips for introducing check-ins"
• Dialog has aria-labelledby headline; counter is text, not only a progress bar
• Emoji in copy is wrapped with aria-hidden or given a label
• Focus visible on Done (2px navy ring with offset)

Security

• Load the third-party player in a sandboxed iframe with privacy-enhanced mode, only after consent click
• RLS: onboarding progress and rituals per user/workspace
• Subscription status read from server only; client cannot flip trial state

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 **Sendoff**, the last step of the setup wizard in a team check-in and one-on-one app. A modal over the dimmed app says "That's everything for now, Maya!", explains that the manager will be notified when the first answers come in, offers a short click-to-play explainer video, and ends with a navy "Done" button beside a "6 of 6" counter.

### Stack
React + TypeScript + Vite, Tailwind CSS, shadcn/ui (Dialog, Tabs, Toast) on Radix, lucide-react, TanStack Query, date-fns for trial countdowns, Supabase for auth, onboarding progress, rituals and subscription status.

### Pages & layout
1. **Sidebar** (warm beige): wordmark; nav with Dashboard, Objectives, My action items (count), My teams & rituals; a workspace group listing people; footer links (product updates, resources, help); a trial card ("Free trial, 14 days left" + Subscribe now); user row with settings.
2. **Top bar**: selected person chip; tabs (Answers, Insights, Action items, Objectives); "Private notes" toggle.
3. **Main**: upcoming one-on-one card (dimmed under the modal).
4. **Wizard modal** (340px): close icon; headline; two short paragraphs; edge-to-edge 16:9 video poster; a sign-off line; footer with a divider, centred "6 of 6" and right-aligned Done.
5. Mobile: modal fills the screen with a sticky footer.

### Design system
- Colors: `--bg: #ffffff` (modal and main background), `--sidebar: #f3ede6` (warm sidebar tint), `--fg: #1d1b1a` (headings and body), `--muted: #6b6461` (step counter, footer links), `--primary: #0b1464` (Done button, links), `--on-primary: #ffffff` (button label), `--selected: #ecd9c6` (active sidebar item / tab), `--trial-card: #e7e5e2` (trial card background), `--scrim: #a5a4a2` (overlay rgba(0,0,0,.35) (decorative)), `--focus: #0b1464` (focus ring).
- Fonts: Inter (similar to the observed grotesk): headline 20px/600; body 16px/1.5; nav 14px/500; counter and footer 13px; sidebar group labels 12px uppercase 600 with 0.06em tracking.
- Spacing: 8px scale; 20px modal padding; 12px between paragraphs.
- Radius: modal 8px; buttons and sidebar items 6px; trial card 8px.
- Shadows: modal `0 16px 40px rgba(0,0,0,.18)`.
- Motion: 180ms fade/scale on the modal; step transitions slide 12px; none under reduced motion.

### Components & interactions
Sidebar, TrialCard (normal, ending soon in amber, expired), PersonChip, TopTabs, WizardDialog (steps 1-6 with Back/Next; the last step shows Done), VideoEmbed (poster button → sandboxed iframe on click; "Watch later" link when blocked), StepCounter, Toast. Done writes `completed_at`, closes the modal, routes to Dashboard and shows "You're all set" toast. Close and Esc behave the same on the last step.

### Data & state
Tables: `onboarding_progress(user_id, step, completed_at)`, `teams`, `rituals(id, team_id, kind, cadence, next_at)`, `subscriptions(workspace_id, status, trial_ends_at)`, `action_items(id, owner_id, title, done)`. Mock one team with three people and a weekly check-in. Handle states: last step, earlier steps, video blocked/offline, completion save failed, trial ending soon, trial expired.

### Accessibility
The dialog is labelled by its headline; the counter is real text. The video poster is a button with a descriptive label; the video has captions and a linked text summary. Emoji are aria-hidden. Sidebar counts are part of the link name ("My action items, 1 open"). 2px navy focus rings with 2px offset.
Verified contrast: body text: #1d1b1a on #ffffff = 17.16:1; muted counter: #6b6461 on #ffffff = 5.80:1; nav text on warm sidebar: #1d1b1a on #f3ede6 = 14.76:1; muted text on sidebar: #6b6461 on #f3ede6 = 4.99:1; button label on navy: #ffffff on #0b1464 = 16.17:1; link on trial card: #0b1464 on #e7e5e2 = 12.87:1; focus ring: #0b1464 on #ffffff = 16.17:1; selected item text: #1d1b1a on #ecd9c6 = 12.51:1.

### Security
Load the video player only after the user clicks, inside a sandboxed iframe using a privacy-enhanced embed domain. RLS: each user reads and writes only their own onboarding row; ritual and team rows are scoped to workspace members; only managers edit rituals. Subscription status is written by a server webhook from a hosted checkout provider, never by the client.

### Performance & SEO
Poster is a compressed static image; the player script loads on demand. Prefetch Dashboard data during the last step. App routes are noindex.

### Guardrails
- Invented names, people and video subject; no real brand or platform marks.
- The step must be completable without watching the video.
- Acceptance criteria: (1) Done completes onboarding and routes to Dashboard; (2) the video loads only on click; (3) trial card states render; (4) the step counter reads correctly; (5) keyboard and screen-reader users can finish the wizard.

Open the builderAll templatesThis palette on its own