Swimlane

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

Parkinsans is a friendly, slightly quirky geometric sans that matches the candy-pink board's upbeat mood better than a neutral face.

• ParkinsansHeadings: headline 70px 600 at -2.1px
• ParkinsansBody: card text 13-16px

Who it is for

• Small product and ops teams
• Freelancers juggling client projects
• Early-stage startups
• Small agencies

Layout

1. Top bar on a full-bleed pink background: plain wordmark left, 'Try demo' text and white pill 'Sign in' right
2. Left-aligned hero: 70px two-line headline, grey subcopy; right-aligned pill tab switcher (Drag cards / Edit inline / Open details) with pause button
3. Browser-framed live board mock: sort-by control, Board/List toggle, three columns (To Do, In Progress, Done) with counts and 'Add a card', cards showing title, priority flag+dot, assignee initials, due date, comment count, time-left chip; a dashed placeholder where a card is being dragged
4. Large centered testimonial carousel with progress pill + pause (on pink)
5. Black rounded CTA panel with white pill 'Try demo'
6. Footer
7. App: board, list view, card detail page with comments, dashboard charts, settings/members, theme toggle

Palette

Playful, bold, friendly, confident, modern. A candy-pink canvas makes a routine task board feel upbeat.

• background (pink)#f2b3de
• surface white#ffffff
• text#0a0a0a
• column grey#f4f4f5
• high priority red#ef4444
• medium amber#cc8308
• CTA black#0a0a0a

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

Parkinsans 600, 70px with -2.1px tracking

Body

Parkinsans 400 13-16px

One friendly rounded sans; big tight headline against small, neat card text. 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

Full-width ~1216px product frame, 8px radius cards and controls, pill buttons, compact card internals with icon-labelled rows, generous hero padding.

No photos; the live board mock is the hero visual; initials avatars on cards.

Components

• Pill tab demo switcher with pause
• Browser-framed board mock
• Sort-by select
• Board/List toggle
• Kanban column with count and add-card
• Task card (priority, assignee, due date, comments, time-left chip)
• Drag placeholder
• Card detail page with editable title/description
• Threaded comments
• List view table
• Dashboard charts (completion bars, priority donut, velocity line)
• Member management
• Theme toggle (light/dark/system)
• Testimonial carousel

Interactions

• Drag cards within/between columns
• Two-click inline edit for priority, assignee, due date
• Add card inline
• Toggle board/list view
• Sort manual/priority/due
• Open card detail and comment
• Auto-advancing hero demo
• Real-time updates across teammates

Data

• Board{id, team_id, name}
• Column{id, board_id, name, position}
• Card{id, column_id, title, description, priority: low|medium|high, assignee_id, due_date, position, created_at}
• Comment{id, card_id, author_id, body, parent_id}
• Member{team_id, user_id, role: owner|member}

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 **Swimlane**, a Kanban board for small teams, freelancers and agencies who want simple project tracking they own. Teams drag cards through To Do, In Progress and Done, edit priority, assignee and due date inline, open cards for discussion, switch to a sortable list, and glance at a dashboard for completion and velocity.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Popover, Select, Calendar, Tabs), lucide-react. dnd-kit (sortable) for cards and columns, TanStack Query with optimistic updates, react-hook-form + zod for card forms, Recharts for the dashboard, Framer Motion for card and demo transitions, date-fns for due-date chips. Supabase: Auth (Google + email), Postgres, Realtime to sync moves across teammates, Edge Function for invites.

### Pages & layout
1. **Landing**: full-bleed pink canvas; plain wordmark nav with "Try demo" and white pill "Sign in"; left-aligned large headline and subcopy; pill tabs (Drag, Edit inline, Open details) with pause that drive an animated board demo inside a browser frame. Then a centered quote carousel (illustrative), black rounded CTA panel, footer.
2. **Board**: toolbar (board switcher, sort select, Board/List toggle, filter by assignee/priority); columns with icon, name, count, collapse chevron and "Add a card"; cards with title, priority flag + coloured dot, assignee initials, due date, comment count and a relative chip (3d left, Today, 2d ago).
3. **List**: sortable table with the same fields.
4. **Card page**: editable title and description, sidebar fields, threaded comments.
5. **Dashboard**: completion by column (bars), priority split (donut), cards completed per week (line).
6. **Settings**: members, roles, theme (light/dark/system).
7. **/demo**: seeded board, no sign-in, changes kept locally.

### Design system
Tokens: `--brand: #f2b3de` (marketing canvas), `--background: #ffffff`, `--column: #f4f4f5`, `--foreground: #0a0a0a`, `--muted-foreground: #65656e`, `--border: #e4e4e7`, `--primary: #0a0a0a`, `--primary-foreground: #ffffff`; priority high `#ef4444`, medium `#cc8308`, low `#94949e`. Dark: background `#0b0b0c`, column `#18181b`. Font: Parkinsans 400/500/600; scale 12/13/16/20/32/70. Radius 8px cards and inputs, pills for marketing buttons, 24px CTA panel. Card shadow `0 1px 2px rgb(0 0 0 / .05)`; dragging `0 12px 24px rgb(0 0 0 / .12)`. Motion 180ms; drop spring. Priority colours are indicator dots and flags beside a text label. Add `--input-border: #93939f`. Dark: `--foreground: #fafafa`, `--muted-foreground: #a1a1aa`.

### Components & interactions
Card states: idle, hover, focused, dragging (tilt + shadow), placeholder (dashed outline), saving. Inline editors open on click as popovers and save on select; Escape cancels. Add-card input submits with Enter. Relative due chip turns red when overdue. Empty column shows a hint; empty board offers a starter set. Failed moves roll back with a toast.

### Data & state
Board, Column(position), Card(position as fractional index, priority, assignee_id, due_date), Comment(parent_id), Member(role). Realtime channel per board invalidates queries. View mode and sort in URL. Seed six cards across columns with fictional teammates.

### Accessibility
dnd-kit keyboard sensor with spoken instructions and a "Move to column" menu as an alternative. Priority uses text + colour. Pink canvas with black text passes contrast; avoid grey text on pink. Auto-rotating demo and carousel pause on focus/hover and under reduced motion. Date chips have full-date `title`/`aria-label`. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #0a0a0a on #f2b3de = 11.58:1; body text #0a0a0a on #ffffff = 19.8:1; muted text #65656e on #ffffff = 5.77:1; muted text #65656e on #f4f4f5 = 5.25:1.

### Security
RLS by team membership for boards, columns, cards and comments; only owners manage members. Comment authors can edit/delete their own. Sanitize descriptions and comments (render plain text or sanitized markdown). Invites use expiring tokens from an Edge Function. Validate all inputs with zod and DB constraints. The demo route never writes to the database.

### Performance & SEO
Fractional indexing avoids reordering whole columns; virtualise long columns. Lazy-load dashboard charts. Landing meta/OG; app `noindex`.

### Guardrails
- Original copy; fictional names; label quotes as examples and avoid real company names.
- Typed components, no `any`, visible errors.
- Don't store more member data than name, email and avatar.
- Done when: cards drag between columns and persist; a teammate sees the move live; inline edits save; list view sorts; dashboard reflects data; /demo works without sign-in.

Open the builderAll templatesThis palette on its own