Payoutly

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 Sans is crisp and businesslike but slightly warmer than Inter, a good fit for a finance tool meant to feel approachable to sales teams.

• Instrument SansHeadings: hero 56-60px semibold, H2 36px
• Instrument SansBody: body 16px, teal eyebrows, tabular figures

Who it is for

• Sales ops managers
• Finance teams preparing payouts
• Founders running comp without dedicated software
• Sales leaders designing accelerators

Layout

1. Hero over a dark-tinted office handshake photo: centered logo, two-line headline (second line in pale mint), subcopy, white square primary CTA and an outlined secondary CTA, three trust badges with icons
2. Browser-framed dashboard mock overlapping the hero edge: four KPI cards with colored icon tiles and deltas
3. Sticky white top bar on scroll: logo left, Features / How it works centered, a log-in link and a teal CTA right
4. Feature grid
5. Three centered how-it-works cards with colored number tiles (teal, violet, amber)
6. Dark navy closing section with an icon and CTA
7. App: dashboard, deals table, comp plan builder, quota tiers, reps and rep profile, import/export, audit log, AI chat

Palette

trustworthy, crisp, professional, reassuring, efficient. A finance-grade tool that still feels approachable to sales teams.

• background#f6f8fa
• text navy#002333
• primary teal#0f7b7d
• secondary mint#deefe7
• accent violet#7857f5
• accent amber#f59e0b
• dark section navy#002333

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 Sans SemiBold 60px, -1.5px tracking; H2 36px

Body

Instrument Sans 16px slate; small uppercase teal eyebrows with tracking

Single-family Instrument Sans keeps it businesslike; the mint second line and teal eyebrows add warmth.

Spacing and imagery

1000px content width, square-cornered buttons (0 radius), cards with light borders and subtle shadows, 48px colored number tiles, about 120px sections.

A dark-overlaid stock photo of a business handshake in the hero; pastel icon tiles on KPI cards; charts in the app.

Components

• Photo hero with overlay
• Trust badges row
• Browser-frame KPI mock
• Sticky top bar
• Feature cards
• Numbered step cards with colored tiles
• Dark CTA section
• KPI cards with deltas
• Deals data table
• Comp plan builder (tiers and brackets)
• Quota tier editor with multipliers
• Rep profile with attainment progress
• CSV import/export
• Audit log and AI chat panel

Interactions

• Commission recalculates the moment a deal is saved
• Tier matching by deal size and attainment multiplier
• Edit plans with immediate effect and history logged
• Filter dashboard by rep, team and period
• Bulk CSV import with validation
• Export payout report
• Ask the AI about deals and payouts
• Header turns solid on scroll

Data

• CompPlan{id, name, effective_from, effective_to, brackets[{min, max, rate_pct}]}
• QuotaTier{id, plan_id, min_attainment_pct, multiplier}
• Rep{id, name, email, team, plan_id, quota_amount, period}
• Deal{id, rep_id, account_name, amount, close_date, type new|renewal|expansion, notes, commission_amount, applied_rate, applied_multiplier}
• AuditEvent{id, actor_id, entity, entity_id, action, before, after, 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 **Payoutly**, a commission calculator for sales teams at startups and mid-size companies. Sales ops define comp plans once, reps' deals flow in (typed or imported), and every commission and attainment figure updates immediately, so reps and finance see the same numbers.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Table, Dialog, Tabs, Select, Progress) and lucide-react. Use TanStack Query and Table, react-hook-form + zod (useFieldArray for tiers), Recharts, date-fns and Papa Parse. Supabase provides:
- Auth: email with verification.
- Postgres for plans, tiers, reps, deals and the audit log.
- A Postgres function `calc_commission(deal_id)` run by a trigger, so the database stays authoritative.
- An Edge Function for the AI assistant, using read-only, whitelisted queries.

### Pages & layout
1. **Landing**:
   - Hero over a business photo with a 75% navy overlay (`rgba(0,35,51,.75)`): logo, two-line headline with the second line in pale mint, subcopy, a white square primary CTA and an outlined secondary, and three small trust badges.
   - A browser-framed KPI mock overlapping the hero edge.
   - A sticky white nav on scroll.
   - Feature grid, three step cards with colored number tiles, a dark navy CTA section and a footer.
2. **Dashboard**: KPI cards (total commissions, deals closed, average deal size, active reps), commissions by rep, attainment leaderboard, period and team filters.
3. **Deals**: a table with add/edit, the calculated commission column and an explanation tooltip ("8% bracket × 1.25 accelerator").
4. **Comp plans**: builder with brackets and quota tiers, effective dates and a preview calculator.
5. **Reps**: list, then a profile with attainment progress, deals and payout history.
6. **Import / Export**, **Audit log**, **Assistant**.

### Design system
- Tokens: `--background: #f6f8fa`, `--card: #ffffff`, `--foreground: #002333`, `--primary: #0f7b7d`, `--secondary: #deefe7`, `--muted: #e8edf1`, `--border: #d4dae0` (decorative), `--input-border: #7b8da0`, `--ring: #0f7b7d`.
- Accents for icon tiles: violet `#7857f5` and teal with white numerals, amber `#f59e0b` with navy numerals.
- Dark section: `#002333`.
- Font: Instrument Sans. Hero 56-60px semibold at -0.025em, H2 36px, eyebrows 12px uppercase with 0.12em tracking, body 16px at line-height 1.5, tabular figures; nothing below 12px.
- Spacing on a 4px base; radius 0 on buttons, 8px on cards and tiles.
- Shadows: `0 1px 3px rgb(0 35 51 / .08)`.
- Motion: 150ms.

### Components & interactions
KpiCard, CommissionTable (sortable, sticky totals, empty state), DealForm (validation, saving state, shows the computed commission once the server returns), PlanBuilder (add or remove brackets, overlap and gap validation, preview), TierEditor, AttainmentBar (percentage text as well as the bar), RepProfile, CsvImport (mapping, row errors, dry run), ExportButton (payout CSV per period), AuditTimeline (before/after diff), AssistantPanel (suggestions, streaming, cannot-answer state). Handle loading, empty and error states throughout.

### Data & state
Tables: `comp_plans`, `plan_brackets(plan_id, min_amount, max_amount, rate_bps)`, `quota_tiers(plan_id, min_attainment_bps, multiplier_bps)`, `reps(id, user_id?, team, plan_id, quota_cents, period)`, `deals(id, rep_id, amount_cents, close_date, type, commission_cents, rate_bps, multiplier_bps)` and `audit_events`. Store money as integer cents and rates as basis points to avoid float errors. Attainment is closed-won in the period divided by quota.

### Accessibility
The teal primary is `#0f7b7d`, so white button labels and 12px teal eyebrows pass AA. The 75% navy overlay keeps the pale-mint headline at 6.1:1 even over the brightest part of the photo. Tables get captions and header scopes. Show attainment as text as well as a bar. Dialogs trap focus. Every icon tile carries a text label nearby.
Verified contrast: body: #002333 on #f6f8fa = 15.3:1; white on primary: #ffffff on #0f7b7d = 5.1:1; teal eyebrow: #0f7b7d on #f6f8fa = 4.8:1; mint on overlay: #deefe7 on #405a66 = 6.1:1.

### Security
RLS by role:
- Reps see only their own deals and payouts.
- Managers see their team.
- Sales ops and finance manage plans and all deals.
- Admins manage roles.
Keep roles in a separate table and check them with a security-definer function. Commission values are computed only in the database, and the client can't write `commission_cents`. Log every insert, update and delete to `audit_events` with a trigger. Validate CSV rows with zod in an Edge Function and neutralize formula injection on export. The AI function uses the caller's JWT, rate-limits and never writes. Keep secrets server-side.

### Performance & SEO
Index `(rep_id, close_date)`. Recalculate only affected deals when a plan changes, in a background function. Landing page: meta/OG tags and an optimized hero image; noindex the app.

### Guardrails
- Write fresh copy; use royalty-free photography and fictional companies and reps.
- Don't show fabricated customer logos.
- Keep components small and typed; no `any`. Show calculation errors visibly.
- Done when: (1) the commission for a new deal matches a hand-worked example including the accelerator; (2) plan edits are audited; (3) reps cannot see peers' payouts; (4) CSV import and export round-trip; (5) the dashboard filters by rep, team and period.

Open the builderAll templatesThis palette on its own