Lookback

Who it is for

• Engineering teams
• Product and design squads
• Teams running postmortems
• Remote and cross-time-zone teams

Layout

1. Rounded light-grey hero card: heart logo + wordmark, 56px two-line headline, grey subcopy, black 'Start a retro' button; right a hand-drawn black-ink illustration of three people with speech bubbles (heart, neutral face, thumbs down)
2. 'How it works' label + 'Three steps' heading; three cards with pastel tops (yellow, blue, mint) and icon chips
3. Dark full-width features section in two columns with outlined icon squares (real-time collaboration, custom formats, AI summaries, auto-grouping…)
4. Centered closing CTA with black button
5. Footer with small wordmark
6. Sticky white nav with grey 'Sign in' on scroll
7. App: team/project list, retro board (columns or detailed questions), timeline view, AI summary panel, action items

Palette

Friendly, candid, lightweight, human, modern. Monochrome UI softened by doodle illustrations and pastel accents.

• background#ffffff
• hero card grey#f5f5f5
• text / primary#171717
• dark section#1a1a1a
• pastel yellow#fde68a
• pastel blue#bfdbfe
• pastel mint#a7f3d0

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

Grotesk (Camera Plain-like) 700, 56px, -0.04em tracking (Grotesk is not on Google Fonts; a vibld project loads Hanken Grotesk)

Body

Same family 400 at 16px, grey secondary (Grotesk is not on Google Fonts; a vibld project loads Hanken Grotesk)

Tight, heavy grotesk headlines with a single family throughout; illustration adds the warmth. 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

~976px contained layout, 16px radius hero card, 3-column step cards with pastel headers, 8px buttons, calm generous rhythm.

Hand-drawn black line illustration of people giving feedback; pastel colour blocks; outlined icons. No photos.

Components

• Hero card with illustration
• Pastel-topped step cards
• Dark feature grid with icon squares
• Retro board columns (Start/Stop/Continue)
• Detailed format question editor
• Feedback card with upvote and comment count
• Comment thread
• Top-three highlights/concerns ranking
• Collision-aware horizontal timeline
• AI summary panel (themes, sentiment, takeaway)
• Auto-grouped clusters
• Action item list with owner and due date
• Team/project switcher
• Share link

Interactions

• Add feedback asynchronously
• Upvote and comment on cards
• Real-time updates as teammates contribute
• Rank top three items
• Timeline entries expand and edit inline; date range controls
• One-click AI summary and auto-grouping
• Convert insight to action item
• Mark actions done across retros

Data

• Team{id, name}
• Membership{team_id, user_id, role: facilitator|member}
• Project{id, team_id, name}
• Retro{id, project_id, title, format: detailed|ssc, questions[], start, end, status}
• Entry{id, retro_id, author_id, column|question_id, body, date?, votes_count}
• Vote{entry_id, user_id}
• Comment{entry_id, author_id, body}
• Ranking{retro_id, user_id, kind: highlight|concern, entry_ids[3]}
• Summary{retro_id, themes[], sentiment, takeaway, generated_at}
• ActionItem{id, retro_id, title, owner_id, due, done}

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 **Lookback**, an asynchronous retrospective tool for engineering and product teams. A facilitator opens a retro in a detailed format (custom questions, timeline, top-three rankings) or a quick Start/Stop/Continue board; teammates contribute when convenient, upvote and comment; AI clusters similar feedback, names themes and sentiment, and the team turns results into owned action items that carry forward.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. TanStack Query, react-hook-form + zod for retro setup and entries, dnd-kit for ranking top-three items and reordering questions, Framer Motion for card entrances and grouping animations, date-fns for the timeline. Supabase: Auth (Google + email), Postgres, Realtime for live entries/votes, Edge Functions for AI summary, sentiment and grouping.

### Pages & layout
1. **Landing**: rounded light-grey hero card with a small heart logo, heavy two-line headline, subcopy, black CTA, and a hand-drawn ink illustration of people with speech bubbles; "How it works" with three cards topped by pastel yellow, blue and mint panels; a dark two-column features section with outlined icon squares; centered CTA; footer. Nav becomes sticky on scroll.
2. **Home**: team and project switcher; retro list with status (collecting, reviewing, closed), participant count, open actions.
3. **Create retro**: format choice, title, date range, question editor (detailed format).
4. **Board (Start/Stop/Continue)**: three columns of cards with vote and comment counts; add card inline.
5. **Detailed retro**: per-question responses, horizontal timeline of events with overlap-aware stacking, top-three highlights and concerns ranking.
6. **Insights**: AI summary (themes with counts, sentiment gauge, takeaway), grouped clusters, "Create action" buttons.
7. **Actions**: list across retros with owner, due date, status.

### Design system
Light with dark feature bands. Tokens: `--background: #ffffff`, `--foreground: #171717`, `--primary: #171717`, `--primary-foreground: #ffffff`, `--muted: #f5f5f5`, `--border: #e6e6e6`, `--inverse: #1a1a1a`; pastels `--p-yellow: #fde68a`, `--p-blue: #bfdbfe`, `--p-mint: #a7f3d0`, `--p-pink: #fbcfe8` for columns and themes. Font: a tight grotesk such as Inter Tight or Schibsted Grotesk, 700 headings at -0.04em, 400 body. Scale 13/16/20/30/56. Radius 8px buttons, 12px cards, 16px hero card. Motion 200ms; grouped cards animate into clusters (400ms). Add `--muted-foreground: #666666` for grey secondary copy, `--inverse-muted: #a3a3a3` for grey text on dark bands, and `--input-border: #939393`.

### Components & interactions
Entry card: default, own (editable), voted, anonymous mode (author hidden). Upvote toggles instantly. Comments thread in a popover. Timeline: drag range handles, click to expand an entry, edit inline. AI actions show progress steps, then results with "regenerate"; errors offer retry. Ranking uses drag or up/down buttons, max three. Empty board states encourage the first card.

### Data & state
Team, Membership(role), Project, Retro(format, questions JSON, status), Entry, Vote (unique), Comment, Ranking, Summary, ActionItem. Realtime per retro channel. Seed a sample team with two past retros and open actions, all fictional.

### Accessibility
Pastel colours carry no meaning alone; columns have text headers. Vote buttons use `aria-pressed` and counts. Timeline has a list alternative. Illustration gets concise alt text. Ranking has keyboard controls. Reduced motion skips grouping animation. Dark sections keep grey text ≥4.5:1. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #171717 on #ffffff = 17.93:1; muted text #666666 on #f5f5f5 = 5.27:1; white text #ffffff on #171717 = 17.93:1; white text #ffffff on #1a1a1a = 17.4:1.

### Security
RLS by team membership; only facilitators edit retro settings, close retros and run AI summaries; members add/edit their own entries and votes. Anonymous mode hides author IDs in API responses (use a view), not just the UI. AI Edge Functions verify JWT, cap input size, strip names before sending text to the model, and keep keys server-side. Sanitize entries and comments. Rate-limit entry creation.

### Performance & SEO
Paginate retros; batch vote updates. Lazy-load insights and timeline. Serve the illustration as optimised SVG. Landing meta/OG; app `noindex`.

### Guardrails
- Original illustration and copy; fictional teams.
- Treat feedback as sensitive; no exporting to third parties without consent.
- Typed components, no `any`, visible errors.
- Done when: two users add and upvote cards live; anonymous mode hides authors server-side; AI summary returns themes and sentiment; an insight becomes an action item that appears on the Actions page; members can't close retros.

Open the builderAll templatesThis palette on its own