Renewcast

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

Montserrat gives the bold, confident geometric headline, and Nunito Sans is soft and rounded, keeping the clinical claim friendly.

• MontserratHeadings: hero 60px 700 (all caps only when 4 words or fewer), section titles 600
• Nunito SansBody: body 16px

Who it is for

• Customer success managers
• Account managers owning renewals
• CS leaders reporting risk
• Founders managing customers directly

Layout

1. Floating glass pill nav: teal logo badge + wordmark left, 'Docs' link and teal 'Sign in' button right
2. Full-bleed photo hero (team reviewing a dashboard) with dark overlay: outlined badge chip, massive headline (uppercase only if four words or fewer, otherwise sentence case), subcopy, teal 'Start now' button
3. 'How it works' 4 rounded cards with teal line icons (Add accounts, Score health, Spot risk, Act early)
4. 'Frequently asked' accordion of rounded pill rows
5. Small footer with copyright and links
6. App: portfolio dashboard KPIs, accounts list with filters, account detail with status history, renewal timeline, analytics charts, CSV import/export

Palette

Confident, calm, clinical, modern, trustworthy. A teal-accented SaaS feel that pairs bold short headline claims with gentle, rounded UI.

• background#f3f5f6
• card#ffffff
• text#060e15
• primary teal#007d7d
• accent mint#caf1f0
• border#d0e2e5
• hero overlay#1a1f24

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

Montserrat 700, 60px hero with -1.8px tracking (uppercase only for a headline of four words or fewer); section titles Montserrat 600 sentence case 30px

Body

Nunito Sans 400 at 16px

Bold geometric headings (short all-caps hero only) against a soft rounded body sans -- confident but friendly. 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

Centered narrow content (~1030px), 4-up card row with 16px gaps, 0.9rem radius cards and accordion rows, soft white-on-grey cards with very subtle shadow; moderate density.

One large darkened office photograph in the hero showing people around a dashboard monitor; otherwise only thin teal line icons. In-app: donut gauge, bar and trend charts.

Components

• Glass floating navbar
• Badge chip with shield icon
• Photo hero with overlay
• Step cards with teal icons
• FAQ accordion rows
• KPI stat cards (total ARR, ARR at risk, renewals 30d)
• Health score badge / gauge
• Status pill (Healthy / At Risk / Critical)
• Accounts data table with filters and search
• Renewal timeline grouped 30/60/90
• Status history timeline
• CSV import wizard with preview
• Analytics charts (distribution, segment)

Interactions

• Accordion expand with +/- toggle
• Filter by status, segment, CSM with live counts
• Editing score auto-recomputes status
• Status transitions logged automatically
• CSV upload -> parsed preview -> confirm import
• CSV export of current view
• Hover tooltips on charts
• Sample-data mode for exploring before import

Data

• Account{id, owner_id, name, arr, plan, csm, segment, renewal_date, health_score, status (derived), usage_level, tickets_30, tickets_90, nps, csat, last_contact, notes}
• StatusChange{account_id, from_status, to_status, changed_at}
• ImportJob{id, owner_id, filename, row_count, 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 **Renewcast**, a portfolio dashboard for customer success teams. Every account carries a 0-100 health score; status (Healthy 70+, At Risk 40-69, Critical under 40) is derived from it automatically and every change is logged. CSMs prepare renewals from a single account page, and leaders see how much ARR sits in each risk band and which renewals land in the next 30, 60 or 90 days.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Recharts for gauges, distributions and segment bars; TanStack Query + TanStack Table for the accounts list; Papa Parse for CSV import/export; react-hook-form + zod for account editing; date-fns for renewal windows. Supabase: Auth (email), Postgres with a trigger that derives status and writes history rows. Data is private per user.

### Pages & layout
1. **Landing**: floating translucent pill nav; full-bleed dark-overlaid team photo hero with a small outlined badge, a short headline (uppercase only if four words or fewer) and teal CTA; four "how it works" cards; FAQ accordion; slim footer.
2. **Dashboard**: KPI row (accounts, total ARR, ARR at risk, renewals due 30d), status donut, "riskiest accounts" list, upcoming renewals strip.
3. **Accounts**: searchable table with status, segment and CSM filters showing "x of y" counts; status pill and score columns; bulk export.
4. **Account detail**: header with score gauge and status; fields grid (ARR, plan, renewal, usage, tickets 30/90, NPS, CSAT, last contact); notes; status history timeline; edit drawer.
5. **Renewals**: three columns for 30/60/90 days.
6. **Analytics**: score histogram, status split with ARR, segment breakdown.
7. **Import**: download template, upload, preview parsed rows with row-level errors, confirm.

### Design system
Light. Tokens: `--background: #f3f5f6`, `--card: #ffffff`, `--foreground: #060e15`, `--primary: #007d7d`, `--primary-foreground: #fcfcfc`, `--accent: #caf1f0`, `--border: #d0e2e5`; status colours `--healthy: #15803d`, `--risk: #b45309`, `--critical: #b91c1c`. Fonts: Montserrat 600/700 for display and section headings (tracking -0.02em) and Nunito Sans 400/500/600 for body; uppercase only for a hero line of four words or fewer and for short labels with 0.06em tracking. Scale 12/14/16/20/30/60. Radius 14px for cards and accordion rows, pills for buttons. Shadow `0 1px 2px rgb(6 14 21 / .05)`. Motion 180ms ease-out. Add `--muted-foreground: #4b5b63`, `--input-border: #629ea8` for inputs and accordion row outlines, and `--hero-scrim: rgb(26 31 36 / .78)` over the hero photo.

### Components & interactions
Status pill always shows text plus colour. Score input clamps 0-100 and previews resulting status live. Tables: loading skeleton, empty state with "Import CSV" and "Load sample data" actions, error row with retry. Import wizard steps show disabled Continue until mapping is valid. Accordion rows toggle +/- with smooth height.

### Data & state
Account(owner_id, name, arr numeric, plan, csm, segment, renewal_date, health_score int, status enum generated, usage_level, tickets_30, tickets_90, nps, csat, last_contact, notes), StatusChange(account_id, from, to, changed_at). Status is computed in the database so it can never drift from the score. Filters in URL params. Seed 30 fictional companies across SMB/Mid-market/Enterprise with varied renewal dates.

### Accessibility
Never rely on colour for status; include labels and icons. Provide data tables beneath charts or via a "View as table" toggle. The white hero headline sits on the `--hero-scrim` overlay, which keeps at least 4.5:1 over the brightest photo areas. Accordion uses buttons with `aria-expanded`. Table headers are sortable buttons announcing sort order. Focus rings in teal at 3px. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #060e15 on #f3f5f6 = 17.76:1; body text #060e15 on #ffffff = 19.42:1; muted text #4b5b63 on #ffffff = 7.06:1; button text #fcfcfc on #007d7d = 4.84:1.

### Security
RLS on accounts, status_changes and import_jobs: `owner_id = auth.uid()` for all operations. Validate CSV rows with zod before insert and again with column constraints (score 0-100, ARR ≥ 0, valid dates). Cap uploads at 5 MB and 5,000 rows. Neutralise CSV formula injection on export by prefixing cells that start with `=`, `+`, `-` or `@`. Only the anon key ships to the browser.

### Performance & SEO
Paginate and index accounts by owner and renewal_date; lazy-load analytics. Hero photo served responsive and compressed with explicit dimensions. Landing meta/OG tags; app `noindex`.

### Guardrails
- Original copy; placeholder company names; no competitor or CRM logos.
- No invented customer quotes.
- Typed components, no `any`, visible errors.
- Done when: CSV import round-trips with export; changing a score updates status and adds a history row; renewal windows bucket correctly; filters show accurate counts; another user cannot see your accounts.

Open the builderAll templatesThis palette on its own