Shortlist

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

Familjen Grotesk is a quirky grotesk that, unlike Space Grotesk, has real italics for the editorial second line; Rethink Sans keeps the body warm and neutral.

• Familjen GroteskHeadings: hero 60px 700 with italic second line, section titles 30px
• Rethink SansBody: body 16px, grey secondary

Who it is for

• In-house recruiters with several open roles
• HR generalists
• Founders making first hires
• Hiring managers wanting visibility

Layout

1. Floating white rounded nav bar: black circular monogram + wordmark left, 'Docs' link and black pill 'Sign in' right
2. Rounded-corner photo hero card (team reviewing CVs, blue-tinted overlay) with white headline where the second line is italic, subcopy and cream pill 'Start now'
3. 'How it works' three white rounded step cards
4. 'Frequently asked' single white card holding a chevron accordion
5. Centered one-line footer
6. App: sidebar with Pipeline board, Requisitions, Candidates, Analytics, Copilot, Import/Export, Settings; onboarding wizard

Palette

Warm, approachable, human, modern, uncluttered. Cream paper tones and rounded cards make a recruiting tool feel friendly rather than corporate.

• background (warm cream)#f7f4ed
• card#ffffff
• text / dark buttons#1b1b1b
• primary blue#315fff
• accent pink#ffa6f9
• border (ink 12%)#e0ddd6

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

Familjen Grotesk 700, 60px hero with -1.5px tracking and an italic second line; 30px section titles

Body

Rethink Sans 400 at 16px, grey secondary

Quirky grotesk display with a neutral Rethink Sans body; italics add editorial flair to an otherwise plain system. 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

Contained ~1100px layout with rounded 16-24px corners everywhere, 3-column step cards with 16px gaps, soft diffuse shadows, generous section spacing.

One photographic hero of people reviewing résumés and a laptop dashboard, washed with a navy/blue gradient; no other imagery; charts in-app.

Components

• Floating rounded navbar
• Photo hero card with gradient overlay
• Step cards
• Accordion inside card
• Six-column Kanban board
• Candidate card (name, role, source, rating)
• Stage picker (mobile)
• Requisition form and list with status
• Candidate profile with stage history timeline
• Funnel bar chart, source pie, time-in-stage bars
• AI copilot chat panel
• CSV import with column mapping
• Onboarding 3-step wizard
• Theme toggle

Interactions

• Drag candidates between columns (desktop)
• Stage picker on mobile
• Filter board by requisition or source
• Stage change auto-logs history
• Star rating on profile
• Copilot streaming answers with usage limit notice
• CSV preview and column mapping
• Light/dark toggle in app

Data

• Requisition{id, owner_id, title, department, hiring_manager, status: open|on_hold|filled|closed, target_start, notes}
• Candidate{id, owner_id, requisition_id, name, email, phone, source, stage, rating, notes}
• StageHistory{candidate_id, from_stage, to_stage, changed_at}
• CopilotUsage{user_id, date, count}
• Profile{user_id, name, company, onboarded}

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 **Shortlist**, a simple applicant tracker for teams hiring without an enterprise ATS. Recruiters open requisitions, add candidates, and move them through Applied → Screen → Interview → Offer → Hired (or Rejected) on a Kanban board. Every move is logged, analytics show where candidates stall, and an assistant answers plain-language questions about the user's own pipeline.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. dnd-kit for the board, TanStack Query, react-hook-form + zod for requisition and candidate forms, Recharts for funnel/source/time-in-stage, Papa Parse for CSV, date-fns. Supabase: Auth (email + Google), Postgres with a trigger that writes stage history, and an Edge Function that answers copilot questions using only the caller's rows and enforces a daily quota.

### Pages & layout
1. **Landing** (light only): floating rounded white nav with monogram; a rounded photo hero card with a blue gradient overlay, white headline with an italic second line, cream pill CTA; three step cards; FAQ accordion inside one white card; one-line footer.
2. **Onboarding**: three steps (your details, company, sample data vs. clean start).
3. **Pipeline**: six columns with counts; cards show name, role, source chip and star rating; filter bar for requisition and source; on small screens a stacked list with a stage select.
4. **Requisitions**: list with status badges; detail shows attached candidates.
5. **Candidates**: searchable roster table.
6. **Candidate profile**: contact, source, rating, notes, stage control, history timeline, delete.
7. **Analytics**: KPI cards (open roles, candidates, hires, conversion), funnel bars, source donut, average days per stage.
8. **Copilot**: chat panel with suggested questions.
9. **Data**: CSV import with preview and column mapping; export buttons.

### Design system
Warm light landing; app supports light and dark. Tokens: `--background: #f7f4ed`, `--card: #ffffff`, `--foreground: #1b1b1b`, `--primary: #315fff`, `--accent: #ffa6f9`, `--border: rgb(27 27 27 / .12)`, `--muted: rgb(27 27 27 / .06)`. Dark: background `#141414`, card `#1e1e1e`. Fonts: Familjen Grotesk 600/700 (use italic for emphasis words), Rethink Sans 400/500 body. Scale 14/16/20/30/60. Radius 16px cards, 24px hero card, pills for buttons. Soft shadow `0 8px 24px rgb(27 27 27 / .06)`. Motion 200ms; card drop uses a spring. Add `--muted-foreground: #5c5a55`, `--input-border: #8f8a80`, and `--hero-scrim: rgb(20 30 70 / .75)` over the hero photo. Dark mode: `--foreground: #ededed`, `--muted-foreground: #a3a3a3`, `--primary: #6f8fff` (text on it `#141414`).

### Components & interactions
Kanban card states: idle, hover lift, dragging (tilt + shadow), drop target highlight, disabled while saving. Stage select for mobile. Empty column placeholder. Copilot shows typing indicator, streamed answer, "limit reached" state. Import wizard validates required columns before enabling Import. Error toasts with retry on failed moves (roll back optimistic update).

### Data & state
Requisition, Candidate(stage enum, source enum, rating 1-5), StageHistory, CopilotUsage, Profile. Time-in-stage is computed from history rows. Board state via TanStack Query with optimistic updates; filters in URL. Seed three roles and ~25 fictional candidates with varied sources and dates.

### Accessibility
dnd-kit keyboard sensor with screen-reader announcements ("Moved Priya Nair to Interview"), plus the stage select as a non-drag alternative. Charts accompanied by summary tables. White hero text sits on the `--hero-scrim` overlay, verified at 4.5:1 or better over the brightest photo areas. Star rating implemented as a radio group. Accordion buttons expose `aria-expanded`. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #1b1b1b on #f7f4ed = 15.68:1; muted text #5c5a55 on #f7f4ed = 6.27:1; white text #ffffff on #315fff = 4.99:1; primary link text #315fff on #f7f4ed = 4.54:1.

### Security
RLS on every table: `owner_id = auth.uid()`; history rows are insert-only via trigger and not updatable by clients. The copilot function authenticates the JWT, queries with the user's context (never the service role for reads), strips PII from prompts where possible, and caps requests per day. Validate forms and CSV rows with zod; limit imports to 2 MB. Escape CSV exports against formula injection. Only the anon key in the client.

### Performance & SEO
Virtualise long columns; code-split analytics and copilot. Landing meta/OG tags, compressed hero photo with explicit size; app `noindex`.

### Guardrails
- Original copy and fictional candidates only; no real people or job-board logos.
- Don't store sensitive data (no salary history, no protected characteristics).
- Typed components, no `any`, visible errors.
- Done when: candidates drag between stages and history records each move; mobile stage picker works; analytics reflect seed data; CSV import maps columns; copilot answers from the user's data and respects the daily limit; users can't read each other's pipelines.

Open the builderAll templatesThis palette on its own