Shortlister

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

A white-label base that each company rebrands needs the most neutral sans possible, and Noto Sans also covers almost any language a customer might add.

• Noto SansHeadings: product name and headings 20-28px bold
• Noto SansBody: body 16px, dense tables 13px

Who it is for

• Small businesses moving past founder-led hiring
• Startups formalizing their first pipeline
• Agencies hiring for client projects
• Multi-location service companies

Layout

1. Centered auth card on pale blue-grey canvas: black dot logo + bold product name, short subtitle, email and password fields on tinted inputs, full-width navy 'Sign In' button, 'OR' divider, light 'Try Demo' button, sign-up link
2. App: sidebar with dashboard, jobs, candidates, pipeline board, interviews, offers, team, settings (branding)
3. Public careers portal: job list and application form

Palette

neutral, professional, minimal, dependable, unbranded. A clean white-label base meant to take on each company's identity.

• background#ebf1f7
• card#ffffff
• text#0a1018
• primary navy#132139
• input fill#eaf0f7
• muted text#5d6b81
• border#dbe3ec

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

System UI/Noto Sans Bold 20px product name (the system face is not on Google Fonts; a vibld project loads Noto Sans)

Body

Noto Sans 16px body, 13px dense tables

A neutral, utilitarian type system suits a white-label tool that companies rebrand.

Spacing and imagery

Compact 450px card with 24px padding and a soft shadow; 40px controls; 6px radius; a pale canvas with a lot of empty space.

No imagery on auth; candidate avatars, company logo upload and charts inside the app.

Components

• Auth card with demo entry
• Jobs list and job editor with custom questions
• Public careers page and application form
• Resume upload with parsed skills
• Candidate profile with skill match
• Drag-and-drop pipeline board with bulk select
• Multi-dimensional rating widget
• Interview scheduler with panel and meeting link
• Scorecard form
• Offer builder with approval chain
• E-signature offer acceptance
• Team and job-level permissions
• Notifications
• Branding settings

Interactions

• Drag candidates across stages; bulk move and reject
• Resume parse fills skills and experience
• Rate across hard skills, soft skills, experience and culture add
• Schedule interviews and assign interviewers
• Submit scorecards; see aggregated recommendations
• Route offers to approvers with comments
• Candidate signs offer via link
• Real-time notifications on stage changes

Data

• Company{id, name, logo_path, brand_color}
• Job{id, company_id, title, department, location, employment_type, description, status, questions[]}
• Candidate{id, company_id, name, email, phone, resume_path, parsed_skills[], source}
• Application{id, job_id, candidate_id, stage_id, answers jsonb, ratings{hard, soft, experience, culture}, created_at}
• Stage{id, job_id, name, position}
• Interview{id, application_id, starts_at, duration, meeting_url, panel_user_ids[]}
• Scorecard{id, interview_id, reviewer_id, criteria jsonb, recommendation}
• Offer{id, application_id, salary, start_date, status, approvals[], signed_at, signature_path}
• JobMember{job_id, user_id, role hiring_manager|interviewer|recruiter}

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 **Shortlister**, an applicant tracking system for small companies making their first structured hires. Recruiters publish jobs to a branded careers page, candidates apply, and the team moves applicants through a visual pipeline, interviews with structured scorecards, and sends approved offers that candidates sign online.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Dialog, Sheet, Tabs, Select, Calendar, Slider) and lucide-react. Use dnd-kit for the pipeline, TanStack Query and Table, react-hook-form + zod (dynamic custom questions), Recharts for hiring metrics, date-fns and `signature_pad`. Supabase provides:
- Auth: email, and a demo account.
- Postgres for all entities.
- Storage: private buckets for resumes and signatures, a public one for logos.
- Realtime notifications.
- Edge Functions for resume parsing (PDF/DOCX text extraction plus an LLM or rules for skills), public application intake and offer-signing links.

### Pages & layout
1. **Auth**: a centered white card on a pale blue-grey canvas with logo and name, subtitle, email and password, a navy Sign in button, an OR divider, Try demo and a sign-up link.
2. **Dashboard**: open jobs, applicants this week, time-in-stage, upcoming interviews.
3. **Jobs**: list and editor (details, stages, custom questions, team members).
4. **Pipeline** per job: columns by stage, candidate cards (name, rating, days in stage), bulk select.
5. **Candidate profile**: resume viewer, parsed skills with a match against job requirements, answers, ratings, activity, interviews, scorecards.
6. **Interviews**: schedule dialog (time, duration, meeting link, panel) and my upcoming interviews.
7. **Offers**: builder, approval chain and status.
8. **Team & permissions** and **Branding** (logo, color, platform name).
9. **Public**: `/careers/:company` job list, a job detail page with an apply form, and an offer-signing page.

### Design system
- Tokens: `--background: #ebf1f7`, `--card: #ffffff`, `--foreground: #0a1018`, `--primary: #132139`, `--primary-foreground: #eef2f9`, `--input: #eaf0f7`, `--muted-fg: #5d6b81`, `--border: #dbe3ec` (decorative), `--input-border: #6688ae`.
- The brand color is overridable per company as a CSS variable, used by the careers page and accents.
- Font: Noto Sans. 13px dense tables (12px minimum anywhere), 16px body at line-height 1.5, 20-28px headings.
- Spacing on a 4px base; radius 6px; card shadow `0 4px 16px -6px rgb(19 33 57 / .15)`.
- Motion: 150ms, with a drag lift.

### Components & interactions
AuthCard, JobEditor (question builder: text, choice, file, yes/no; required toggle), PipelineBoard (keyboard drag, bulk bar, empty column hint), CandidateCard, RatingGroup (four sliders or radio scales with labels), SkillMatch (matched and missing chips), InterviewScheduler (conflict warning), ScorecardForm (criteria, overall recommendation, submit lock after due), OfferBuilder (approvers, comments, statuses), SignaturePage (draw or type, then confirm), NotificationBell, BrandingForm (logo upload preview). Every view has loading, empty and error states.

### Data & state
Tables as in the data model, plus `company_members(company_id, user_id, role admin|recruiter|member)` and `job_members`. Access is checked through both. Stage changes write an activity row and a notification. Seed a fictional company with three jobs and about 40 invented candidates with generated resumes.

### Accessibility
Navy on white passes easily. Placeholder and muted text use `#5d6b81` (4.7:1 on the tinted inputs), inputs get a 3:1 `--input-border`, and labels stay visible. Pipeline drag supports the keyboard and announces moves. Ratings use labelled radio groups, not unlabeled stars. The public apply form must be fully accessible: labels, error summary, file input instructions. Offer signing offers a typed alternative. Charts include tables.
Verified contrast: body: #0a1018 on #ebf1f7 = 16.8:1; button label: #eef2f9 on #132139 = 14.3:1; placeholder: #5d6b81 on #eaf0f7 = 4.7:1.

### Security
RLS:
- Company members see their company's data.
- Interviewers see only the applications for jobs they're assigned to, and cannot see offers or salary.
- Admins manage branding and members.
Public intake goes through an Edge Function with zod validation, a honeypot, rate limiting per IP, and resume limits (PDF/DOCX, 5 MB, magic-byte check) into a private bucket. Offer links are signed, single-use and expiring. Keep the parser and LLM keys server-side. Sanitize job descriptions (DOMPurify) if you allow rich text. Minimize candidate PII and provide a deletion/export path for data requests.

### Performance & SEO
Pre-render public careers pages with JobPosting structured data, meta and OG tags; noindex the internal app. Virtualize large pipelines. Index `(job_id, stage_id)`. Lazy-load the resume viewer and charts.

### Guardrails
- Write fresh copy, fictional companies and candidates; no real people's resumes.
- Don't auto-reject candidates based on AI parsing.
- Keep components small and typed; no `any`. Show errors visibly.
- Done when: (1) a public application creates a parsed candidate in the pipeline; (2) interviewers only see assigned jobs; (3) scorecards aggregate on the profile; (4) an offer passes approvals and is signed via link; (5) the pipeline is keyboard-operable.

Open the builderAll templatesThis palette on its own