Warmlist

Who it is for

• Small sales teams working multi-stage deals
• Founders running investor or partner outreach
• SDRs qualifying inbound leads
• Agencies tracking prospects

Layout

1. Transparent top bar over plum gradient: board icon + wordmark left, a text demo link and a white pill sign-up button right; turns translucent plum on scroll
2. Centered hero: line icon, huge bold wordmark headline, two-line subcopy, pill CTA + text link
3. Browser-frame product mock of the Kanban board overlapping hero bottom
4. Three numbered step cards (add, drag, see) on white with soft shadows
5. Large centered pull-quote testimonial with name and role
6. Closing call-to-action section
7. App: Kanban pipeline board, grouped list view, table view, company detail page

Palette

confident, focused, warm, modern, uncluttered. A bold plum brand wrapper around a crisp, neutral working tool.

• primary plum#5b0047
• hero gradient end (raspberry)#8a1d4f
• background#ffffff
• text#0a0a0a
• muted surface#f5f5f5
• muted text#6b6b6b
• stage/deal chip yellow#fef3c7

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

Display

Inter Bold 86px hero, -2.15px tracking; H2 Inter SemiBold 48px

Body

Inter 16px with slight negative tracking (-0.011em)

Single-family Inter system; hierarchy comes from size and weight rather than contrast of typefaces.

Spacing and imagery

Generous marketing sections (~120px vertical), 1000-1150px container, cards with 12px radius and large diffuse shadows; in-app density is compact with 8px gaps.

No photography; the hero shows a realistic browser-framed product mock of the board with colored initials avatars, deal-size chips and star ratings.

Components

• Scroll-aware translucent header
• Hero with icon, headline and dual CTA
• Browser-chrome product frame
• Numbered step cards
• Pull-quote testimonial
• Kanban column with count and add button
• Lead card with avatar initials, deal-size chip, star rating, stage dot
• View switcher (board/list/table)
• Filter bar (status, type, funding round) and sort
• Company detail page with highlight card grid
• Notes feed and task checklist
• Accent color swatch picker

Interactions

• Drag cards between eleven stage columns with keyboard support
• Inline edit of status, funding round and connection strength on cards
• Toggle board/list/table views
• Star rating click to set priority
• Filter and sort updates instantly
• Header background fades in on scroll
• Runtime accent swatches recolor buttons and active states
• Tasks toggle done/undone with strike-through

Data

• Company{id, owner_id, name, logo_initials, website, type, funding_round, deal_size_band, stage, rating 1-5, connection_strength, created_at}
• Note{id, company_id, author_id, body, created_at}
• Task{id, company_id, title, due_on, done}
• Activity{id, company_id, kind, payload, 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 **Warmlist**, a focused lead-tracking tool for small teams who have outgrown a spreadsheet. Users add a company, drag it through stages from first touch to won or lost, and keep notes and follow-up tasks attached to the card.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix) and lucide-react. Use dnd-kit for the board with keyboard sensors, TanStack Query for data, TanStack Table for the table view, react-hook-form + zod for the company form, and date-fns for task due dates. Start local-first (IndexedDB via a small repository layer), then add an optional Supabase adapter: Auth (email + OAuth) and Postgres for companies, notes and tasks.

### Pages & layout
1. **Landing**: transparent header over a deep plum-to-raspberry gradient that becomes translucent on scroll. Centered hero with a line icon, very large headline, short subcopy, a white pill CTA and a text-link CTA. A browser-framed board mock overlaps the hero's bottom edge.
2. **How it works**: three numbered white cards with soft shadows.
3. **Quote band**: one large centered quote, clearly labelled as illustrative.
4. **Closing CTA** and footer.
5. **App / Pipeline**: toolbar (view switcher, sort, filter, add) and horizontally scrolling columns: Lead, Contacted, Engaged, Meeting, Demo, Proposal, Negotiation, Contract, Won, Disqualified, Lost.
6. **List view** grouped by stage; **Table view** with sortable columns.
7. **Company page**: header, highlight cards (deal size, round, strength, rating), activity feed, notes and tasks.

### Design system
- Colors: `--primary: #5b0047`, `--primary-2: #8a1d4f` (gradient end), `--bg: #ffffff`, `--fg: #0a0a0a`, `--muted: #f5f5f5`, `--muted-fg: #6b6b6b`, `--ring: #5b0047`, `--input-border: #8a8a8a`. Deal chips are pastel (yellow `#fef3c7`, green `#dcfce7`, lilac `#ede9fe`) with `#0a0a0a` text.
- Font: Inter only. Hero 72-88px bold at -0.025em, H2 48px semibold, body 16px at line-height 1.5, card text 13px (never below 12px), weights 400+ below 24px. Fallback stack: Inter, system-ui, sans-serif.
- Spacing on a 4px grid; marketing sections 96-128px tall; board columns 260px wide with 12px gaps.
- Radius: cards 12px, chips 6px, CTAs fully rounded.
- Shadows: marketing cards `0 20px 40px -12px rgb(0 0 0 / .15)`; board cards use a 1px border only.
- Motion: 150ms hover, 200ms spring on card drop.
- Ship light mode, plus a user-selectable accent (four swatches) stored in settings.

### Components & interactions
BoardColumn (count, add, drop-highlight state), LeadCard (hover lift, dragging ghost, focus ring, inline selects), StarRating (radio-group semantics), ViewSwitcher (segmented control), FilterBar (multi-select popovers, clear-all), CompanyForm (loading and disabled states on submit, zod errors), NotesFeed (empty state "No notes yet"), TaskList (checkbox, overdue badge), AccentPicker, Toasts for saves and errors. Every view needs empty, loading and error states.

### Data & state
`companies(id, owner_id, name, website, type, funding_round, deal_band, stage, position, rating, strength, created_at)`, `notes(id, company_id, body, created_at)`, `tasks(id, company_id, title, due_on, done)`, `activity(id, company_id, kind, meta, created_at)`. Store stage order in `position` so drops persist. Write an activity row whenever the stage changes. Keep the view mode and filters in URL params. Seed about 15 fictional companies with invented names spread across stages.

### Accessibility
Configure dnd-kit keyboard dragging (space to lift, arrows to move, space to drop) and announce moves through a live region. `#5b0047` on white is 13.7:1, and white text holds 8.9:1 even on the gradient's lightest stop, `#8a1d4f`. Stars need `aria-label`s such as "3 of 5". Columns are labelled regions. Provide a visible focus ring on cards. Disable the drop spring when reduced motion is requested.
Verified contrast: body: #0a0a0a on #ffffff = 19.8:1; muted: #6b6b6b on #ffffff = 5.3:1; white on primary: #ffffff on #5b0047 = 13.7:1; white on gradient end: #ffffff on #8a1d4f = 8.9:1.

### Security
With Supabase, apply RLS on every table: owner-only, or team membership through a `team_members` join if you add teams. Validate company fields with zod on the client and in any Edge Function. Normalize and validate website URLs (https only) and render them with `rel="noopener noreferrer"`. Render note bodies as plain text, or sanitize them with DOMPurify if you allow markdown. Keep only the anon key in the client.

### Performance & SEO
Split the landing page from the app bundle. Virtualize long columns and the table. Preload Inter with `font-display: swap`. Give the landing page meta and OG tags plus one semantic H1; noindex app routes.

### Guardrails
- Write fresh copy, fictional companies and generated initials avatars; no real logos.
- Label the quote as a sample.
- Store only business contact data you need.
- Keep components small and typed; no `any`. Show errors visibly.
- Done when: (1) cards drag by mouse and keyboard and persist order; (2) all three views reflect the same filtered data; (3) notes and tasks save per company; (4) accent choice persists; (5) RLS blocks other users' rows.

Open the builderAll templatesThis palette on its own