Shipyard

Who it is for

• Engineering managers running sprints
• Product owners owning backlog and sign-off
• QA leads writing UAT plans
• Startup delivery teams

Layout

1. Transparent nav over a dark hero: bar-glyph logo + wordmark left, 'Log in' text and white pill 'Get started' right
2. Full-bleed hero photo of a developer at monitors at night, heavily darkened; giant 112px white two-line headline in title case, grey subline, white pill + text buttons
3. Stats strip on black: three large numbers with uppercase captions
4. Light grey three-step section: three outlined cards with large faded numerals 01-03
5. 'Features' indigo eyebrow + big headline; 3x2 outlined feature cards (Kanban, sprint planning, backlog, burndown, velocity, AI suggestions)
6. Closing CTA and footer
7. App: board, backlog, epics, sprint planning, story detail panel, UAT plans, roadmap, analytics, team/roles

Palette

Bold, focused, technical, confident, modern. A late-night engineering atmosphere up top resolving into clean, bright product sections.

• background#ffffff
• hero dark#0a0a0f
• text#16171d
• primary indigo#5048e5
• section grey#f9fafb
• border#e2e4e9
• muted text#6b7280

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 600, 112px hero with -4.48px tracking, title case; 48px section heads 700

Body

Inter 400 16px; uppercase tracked captions for stats; JetBrains Mono for ticket keys

Inter at extreme scale gives a bold keynote feel; mono for IDs adds engineering credibility. 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

1100px container, big hero, 3-column cards with 24px gaps, 12-16px radius, pill buttons, generous section padding (~120px).

Dark, blurred, bokeh photo of a developer workspace behind the hero; otherwise no imagery beyond UI and charts.

Components

• Transparent nav over photo
• Giant hero headline
• Stats strip
• Numbered step cards
• Eyebrow label
• Feature card grid
• Kanban board with swimlane filters
• Backlog grouped by epic
• Epic cards with colour and progress
• Sprint planning with capacity bars
• Story detail side panel (subtasks, comments, activity, attachments)
• UAT test plan and case table with pass/fail/blocked
• Sign-off action
• Quarterly roadmap timeline

Interactions

• Drag stories across columns
• Filter board by assignee, epic, type
• Drag from backlog into sprint with capacity warnings
• AI expand description and generate acceptance criteria
• Upload attachments with previews
• Record test outcomes; sign-off locks plan
• Activity history auto-logs changes
• Role-gated actions

Data

• Project{id, name}
• Member{project_id, user_id, role: admin|product_owner|developer|qa|viewer}
• Epic{id, project_id, title, color, quarter, start, end}
• Story{id, project_id, epic_id, sprint_id, key, title, description, acceptance_criteria, type, priority: P0|P1|P2, points, status, assignee_id, position}
• Subtask{story_id, title, done}
• Sprint{id, project_id, name, start, end, goal, state}
• Capacity{sprint_id, user_id, available_days}
• StoryEvent{story_id, actor_id, field, from, to, at}
• Attachment{story_id, path, mime, size}
• TestPlan{id, sprint_id|epic_id, title, signed_off_by, signed_off_at}
• TestCase{plan_id, steps, expected, outcome: pass|fail|blocked, notes}

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 **Shipyard**, an agile delivery workspace for small-to-mid engineering teams. It covers the full loop: shape epics and a prioritised backlog, plan sprints against real capacity, work a Kanban board day to day, verify releases with UAT test plans and formal sign-off, and report velocity and burndown. Five roles (admin, product owner, developer, QA, viewer) are enforced server-side.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. dnd-kit for board and sprint planning, TanStack Query + TanStack Table, react-hook-form + zod for stories and test cases, Recharts for velocity/burndown/cycle-time/throughput, date-fns, Framer Motion for subtle transitions. Supabase: Auth, Postgres with RLS and triggers for activity logs, Storage (private) for attachments, Edge Functions for AI description/acceptance-criteria drafting.

### Pages & layout
1. **Landing**: transparent nav over a darkened night-time workspace photo; giant white two-line headline; subline; white pill and text CTAs; black stats strip with big numbers and uppercase captions (label as illustrative); grey "three steps" section with large faded numerals; indigo eyebrow and a 3×2 feature grid; CTA; footer.
2. **Board**: columns Backlog, To do, In progress, In review, Done; filters for assignee, epic, type; cards with key (mono), title, type icon, priority, points, avatar.
3. **Backlog**: grouped by epic plus "No epic"; inline priority and points editing.
4. **Epics**: colour, target quarter, date range, progress bar.
5. **Sprint planning**: backlog left, sprint right; committed points vs capacity per person with warnings.
6. **Story panel**: wide side sheet with fields, subtasks, comments, activity history, attachments, related stories, AI buttons.
7. **UAT**: plans scoped to sprint or epic; case table (steps, expected, outcome, notes); sign-off.
8. **Roadmap**: epics on a quarterly timeline.
9. **Analytics** and **Team** (roles, invites).

### Design system
Light app, dark marketing hero. Tokens: `--background: #ffffff`, `--foreground: #16171d`, `--primary: #5048e5`, `--primary-foreground: #ffffff`, `--muted: #f3f4f6`, `--accent: #eeeff2`, `--border: #e2e4e9`; priority P0 `#dc2626`, P1 `#b16105`, P2 `#6b7280`; outcomes pass `#12883e`, fail `#dc2626`, blocked `#b16105`. Fonts: Inter 400-700 (display up to 112px, -0.04em), JetBrains Mono for keys and points. Radius 8px controls, 12px cards; pills on marketing buttons. Motion 150-200ms; drag lift shadow. Add `--muted-foreground: #6b7280`, `--input-border: #8c94a8`, and `--hero-scrim: rgb(10 10 15 / .72)` over the hero photo; hero subline `#a1a1aa`.

### Components & interactions
Cards: idle, hover, dragging, drop target, read-only for viewers. Capacity bar turns amber at 90% and red over 100%. AI buttons: loading, insert/discard, error retry. Sign-off disabled until all cases have outcomes and none fail (or with an explicit override note by admin). Empty states for board, backlog and plans. Attachments show upload progress and type/size errors.

### Data & state
Project, Member(role), Epic, Story(key, priority, points, status, position), Subtask, Sprint, Capacity, StoryEvent (written by trigger), Attachment, TestPlan, TestCase. Burndown derives from StoryEvent status changes. Filters in URL. Seed one project with three epics, two sprints and ~40 fictional stories.

### Accessibility
Board and sprint planning support keyboard drag via dnd-kit plus a "Move to…" menu. Priority and outcomes use text labels. Charts include data tables. The white hero headline sits on `--hero-scrim`, verified at 4.5:1 or better over the brightest photo areas. Side sheet traps focus and restores it. Mono keys readable at 13px with sufficient contrast. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #16171d on #ffffff = 17.88:1; muted text #6b7280 on #f9fafb = 4.63:1; white text #ffffff on #5048e5 = 6.18:1; indigo eyebrow text #5048e5 on #ffffff = 6.18:1.

### Security
Roles in the member table checked by security-definer functions. RLS: viewers read; developers edit stories assigned or unassigned; product owners manage backlog, sprints and sign-off; QA manages test plans and outcomes; admins manage members. Sign-off only by product owner/admin, enforced in a function. Attachments private with signed URLs, type allow-list, ≤20 MB. AI calls server-side with secrets in env, input length caps and rate limits. Sanitize markdown descriptions.

### Performance & SEO
Paginate backlog; index status, sprint and epic. Optimistic drag updates with rollback. Compress the hero photo. Landing meta/OG; app `noindex`.

### Guardrails
- Original copy; placeholder photography; mark stats as sample.
- Typed components, no `any`, visible errors.
- Don't store unnecessary personal data on members.
- Done when: stories move across the board and history records it; sprint planning warns on over-capacity; a UAT plan can be completed and signed off only by the right role; burndown reflects status changes; viewers cannot edit.

Open the builderAll templatesThis palette on its own