Sparring Room

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

Schibsted Grotesk was drawn for editorial media, so oversized headings on warm paper read like a serious training publication.

• Schibsted GroteskHeadings: hero 72px, section titles 60px, 600, -0.02em
• Schibsted GroteskBody: body 16px, spaced uppercase micro-labels

Who it is for

• Sales leaders coaching objection handling
• Enablement and onboarding teams
• Founders rehearsing a pitch
• CS leaders practising renewal saves

Layout

1. Top nav: waveform icon + wordmark left, centered Features / How it works / FAQ, 'Sign in' and black 'Get started' button right
2. Centered hero: very large 72px two-line headline, short subcopy, blue CTA with soft glow
3. Live practice-call mock card: left transcript pane with 'LIVE CALL' pulse label, scenario tag, chat bubbles; right lavender panel with big live score and category breakdown
4. Pull quote
5. Features 3x2 grid of white cards with pale-blue icon tiles
6. 'Three steps' how-it-works with eyebrow label
7. Capabilities section
8. FAQ accordion
9. Closing CTA and footer
10. App: practice home with scenario library + filters, call screen (3D/voice visual), scorecard, leaderboard, scenario builder, knowledge base, admin reports

Palette

Confident, editorial, calm, performance-focused, premium. A warm paper background and oversized type make it feel like a serious training product rather than a game.

• background (warm off-white)#f8f4ed
• card#ffffff
• text / primary buttons#1c1c1c
• accent blue#2d5fff
• secondary sand#eeeadd
• score panel lavender#eef0fb
• live pink dot#da1859

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

Schibsted Grotesk 600, 72px hero / 60px section titles, -0.02em tracking

Body

Schibsted Grotesk 400 16px; uppercase letter-spaced micro-labels (LIVE SCORE)

Single-family Schibsted Grotesk; drama from very large sizes, tight tracking and spaced small caps labels. 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

Wide ~1100px container, big hero whitespace, 3-column feature grid with 20px gaps, 8px radius on buttons and cards with soft shadow, thin rules between sections.

No photography on the landing; the hero is a UI mock of a transcript and scorecard. In-app a 3D animated orb/visualiser (React Three Fiber) reacts to voice; persona headshots.

Components

• Center-link navbar
• Glowing primary CTA
• Live transcript + score mock
• Feature card grid
• Scenario library cards with role/topic filters
• Difficulty selector (easy/standard/hard)
• Voice call screen with mic controls and audio-reactive visual
• Live scorecard with category bars
• Post-call report with transcript and coaching note
• Leaderboard table
• AI scenario builder form
• Knowledge base editor
• Admin reporting dashboard
• Share deep-link button

Interactions

• Start/stop call with mic permission prompt
• Live transcript streaming
• Score counting up per category
• Audio-reactive 3D orb
• Filter scenarios by role/topic
• Generate scenario from description with loading state
• Copy deep link toast
• Leaderboard rank change animation

Data

• Workspace{id, company_name, claimed_by}
• UserRole{user_id, role: admin|rep}
• Scenario{id, title, role, topic, persona{name,title,company,voice_id,avatar}, opening_line, brief, difficulty_overlays, rubric[], slug}
• KnowledgeDoc{id, title, body}
• Session{id, user_id, scenario_id, difficulty, transcript[], scores{category:value}, total, coaching_note, created_at}
• LeaderboardEntry (view){scenario_id, user_id, best_score}

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 **Sparring Room**, a call-practice platform for go-to-market teams. Reps pick a scenario (discovery, pricing pushback, renewal save), talk out loud to an AI buyer persona, and finish with a numeric scorecard plus a coaching note. Admins create scenarios from a short description, store company knowledge the buyer can reference, and review usage and leaderboards.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Web Speech API for default speech in/out with an optional text-to-speech provider behind an Edge Function; React Three Fiber for an audio-reactive orb on the call screen; Framer Motion for score and card animation; Recharts for admin reports; TanStack Query; react-hook-form + zod for the scenario builder. Supabase: Auth (email + Google), Postgres, Edge Functions for the buyer dialogue, scoring and scenario generation (all LLM calls server-side).

### Pages & layout
1. **Landing**: nav with centered anchors; huge two-line headline; blue glowing CTA; a mock "live practice call" card with transcript bubbles on the left and a lavender score panel on the right; pull quote; 3x2 feature grid; three-step section with an uppercase eyebrow; FAQ; CTA; footer.
2. **Setup wizard** (first admin): claim workspace, company name, paste knowledge.
3. **Practice home**: scenario cards with role and topic filters, difficulty badges, best score.
4. **Call screen**: persona header (name, title, fictional company, avatar), central orb, live transcript, mute/end controls, running score.
5. **Report**: category bars, total, coaching note, transcript, "try again at harder difficulty".
6. **Leaderboard** per scenario.
7. **Admin**: scenario builder (describe → generated persona, opening line, brief, rubric; editable before save), knowledge base, reports, role management.

### Design system
Light, warm. Tokens: `--background: #f8f4ed`, `--card: #ffffff`, `--foreground: #1c1c1c`, `--primary: #1c1c1c`, `--primary-foreground: #faf8f5`, `--accent: #2d5fff`, `--secondary: #eeeadd`, `--border: rgb(28 28 28 / .28)`, `--live: #da1859`. Font: Schibsted Grotesk 400/500/600; scale 12 (uppercase labels, 0.2em tracking)/14/16/20/32/60/72. Radius 8px, 12px for large mocks. Shadows soft and warm; CTA gets a blue glow `0 8px 30px rgb(76 118 255 / .35)`. Motion: 250ms ease-out; score numbers tween over 600ms. Add `--muted-foreground: #5c5a55` and `--input-border: #8a867e` (the 28% border is for dividers).

### Components & interactions
Call controls: idle, connecting (spinner), live (pulsing dot), muted, ended, error (mic denied with instructions). Scenario card hover lift. Builder "Generate" shows skeleton fields, then editable results. Leaderboard highlights the current user. Empty states: no sessions yet, no scenarios for filter.

### Data & state
Workspace, UserRole(admin|rep), Scenario(persona JSON, rubric JSON, difficulty overlays, slug), KnowledgeDoc, Session(transcript JSON, scores JSON, total, coaching_note). Leaderboard is a SQL view of best score per user per scenario. Seed ~12 scenarios across AE, CSM and SA roles with fictional personas and companies.

### Accessibility
Provide a text-chat mode for anyone who can't use voice; live transcript is an `aria-live="polite"` region. Orb is decorative (`aria-hidden`) and stops animating under reduced motion. Score bars include numeric labels. Mic button has clear pressed state and label. The accent `#2d5fff` passes 4.5:1 with white text and as text on the warm background; the live dot `#da1859` doubles as label text. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #1c1c1c on #f8f4ed = 15.54:1; button text #faf8f5 on #1c1c1c = 16.08:1; muted text #5c5a55 on #f8f4ed = 6.28:1; white text #ffffff on #2d5fff = 5.01:1.

### Security
Roles in a separate table checked by a security-definer function; RLS: reps read scenarios and their own sessions, admins manage scenarios, knowledge and roles; leaderboard view exposes display name and score only. All model and TTS keys stay in Edge Function secrets; functions verify JWT, validate input with zod, cap transcript length and rate-limit per user. Treat knowledge docs as untrusted text in prompts (delimit them; never let them change system rules). Don't store raw audio unless the user opts in.

### Performance & SEO
Lazy-load the Three.js code only on the call route. Stream dialogue responses. Landing meta/OG tags; app `noindex`.

### Guardrails
- Original copy; fictional personas and companies; no real headshots of real people.
- No fabricated customer quotes presented as real.
- Typed components, no `any`, visible errors.
- Done when: a rep completes a voice or text session and receives a saved scorecard; difficulty changes persona behaviour; admin generates and edits a scenario; leaderboard updates; reps cannot access admin routes server-side.

Open the builderAll templatesThis palette on its own