69 screens your product already needs.
Each template is a full screen built only from kit parts, with real copy and the states teams usually forget. Every one lists what it adapts to and exactly which blocks and components it contains, so you or your AI can swap a part without redrawing the screen.
AI & assistants 6
Chat, workspaces, debriefs and generation studios, with the reasoning, citations and states AI products need.
Empty AI assistant: workspace sidebar, model picker, welcome with starting tasks, composer, projects.
Adapt for: Home of any AI assistant or copilot.
- 3 states
Chat history, header, user question with context, reasoning steps, rich answer with citations and table.
Adapt for: Any chat-with-AI screen; states: answered, generating, model picker open.
Record header, sections rail, transcript with AI signals, audio player, AI ready bar, scorecard.
Adapt for: Review of any recording/transcript: sales calls, user interviews, support calls.
People overview with an embedded handbook assistant opened from the corner launcher.
Adapt for: Dashboard with an embedded help/assistant widget.
Collapsed sidebar · run history · results grid (done, generating, failed) · aspect options · prompt composer.
Adapt for: Any text-to-image or AI creative tool.
Player + shot settings (aspect, duration, motion, camera, loop) · storyboard of shots (done, generating, queued, add) · video prompt composer.
Adapt for: Text-to-video / storyboard tools.
Dashboards & analytics 7
Overviews, budgets, surveys and report builders with charts drawn to scale.
Bento overview: page header, AI summary, KPI strip, three bento rows, attention table.
Adapt for: Any analytics or ops overview: sales, support, vendor risk, product usage, finance.
- 2 states
Workspace sidebar · page header · KPI sparklines · row: stream ribbon + segmented donut · row: highlight bars + tile scale · row: heat grid + dumbbell. Light and Dark frames.
Adapt for: Executive / product / revenue analytics built from signature charts (Light + Dark).
Budget KPIs, view switcher + compare toggle, treemap, forecast meters, budget table with status.
Adapt for: Spend/budget/quota management with treemap and table.
Greeting, KPIs, approvals, utilisation chart, team today, week, quick links.
Adapt for: Personal home/dashboard for any role.
Gauge + distribution, by-team table with deltas, AI themes, verbatims.
Adapt for: Survey, NPS/CSAT and feedback analytics.
Field list, shelf of chips, grouped bar chart, visual settings, result table.
Adapt for: Report/chart builder or pivot explorer.
Degraded banner, status tiles, events chart, live event stream with failing payload.
Adapt for: Ops/sync/health monitor with event stream and payloads.
People & HR 11
Payroll, hiring, reviews, directories and leave, with the states HR tools live in.
Run history: KPI strip, dropdown filters, rich table with live status + duration, footer pagination.
Adapt for: Any run/job/transaction listing with status + duration: payouts, deployments, syncs, orders.
Profile hub: section nav with rings, KPIs, info cards, get-started, documents, to-dos, activity.
Adapt for: Any record hub with progress per section: customer, account, vendor, student profile.
6-of-15 progress, collapsible checklist groups, guided walkthrough rail, summary, activity.
Adapt for: Any checklist-driven handover: account handoff, project closeout, compliance review.
Full-page step form with step indicator, form card and summary rail with AI check.
Adapt for: Any full-page create wizard with a summary rail (4 labelled steps).
Competency cards with rating + evidence, calibrated rating, rail with self review, goals, peer comments.
Adapt for: Any scored review/assessment form: vendor review, QA scorecard, grant review.
Two-row header, enrolment banner, carousel, tabs and grid of selectable media cards.
Adapt for: Any catalogue or marketplace of plans/products/courses with cover art.
Facet rail, query input with AI, sort, applied chips, rich result rows, pagination.
Adapt for: Any faceted search results page (people, records, documents).
Rail + panel sidebar, filter bar with team tabs, grid of person cards.
Adapt for: Any directory of people or members as cards.
Collapsed sidebar, record header, view switcher, stage columns of candidate cards.
Adapt for: Any kanban pipeline: deals, tickets, requests, content.
People × days lanes with leave bars, range calendar, coverage meters.
Adapt for: Any resource/schedule calendar: bookings, shifts, campaigns, capacity.
Canvas org chart (minimap, zoom) next to a team details panel with members table.
Adapt for: Any hierarchy on a canvas: org chart, account hierarchy, dependency map.
Approvals, support & workflow 6
Inboxes, cases, diffs, notifications and builders for work that moves between people.
Request list + detail pane with approve/decline, calendar, facts, warning, thread.
Adapt for: Any list–detail approval/request inbox.
Issue-style case: thread with events and replies, composer, metadata rail with SLA.
Adapt for: Any ticket/case/issue detail with a thread.
PR-style review: per-file diffs with inline comment, approvals and impact rail, AI review.
Adapt for: Any document/config change review with diffs.
Vertical filters, date-grouped notification feed, channel preferences.
Adapt for: Notifications feed + preferences for any product.
Palette, dotted canvas with branching flow, inspector for the selected AI step.
Adapt for: Any automation / rule / pipeline builder with nodes and an inspector.
Hero search, AI answer with citation, topic cards, popular articles, contact callout.
Adapt for: Help centre / knowledge base with AI answer.
Admin & settings 7
Company settings, security, roles, audit, billing and integrations.
Save bar, settings nav, annotated sections (form, structured list, switch group), footer help.
Adapt for: Workspace / project / org settings with sections and a save bar. NOTE: its settings nav is plain frames — for a new settings page use nav-item instances or tab-menu Style=Vertical.
Profile with inline edit, security rows, active sessions, danger zone.
Adapt for: Personal account, profile, security, sessions, danger zone. NOTE: danger zone is a plain frame you can clone.
Roles list, role summary, grouped permission matrix of checkboxes.
Adapt for: Any RBAC / access matrix.
Filter bar, event table with selected row, detail panel with JSON payload.
Adapt for: Any event/audit/activity log with a payload detail panel.
Usage meters, billing toggle, plan cards, invoices.
Adapt for: Billing, usage and plan selection for any SaaS.
Dark hero with search, category tabs, integration card grid, request callout.
Adapt for: Integrations / apps / plugin marketplace.
Workspace sidebar · page header · availability block · booking link + meeting types rail · save bar.
Adapt for: Working hours, booking rules and scheduling-link settings.
Data, files & documents 7
Imports, datasets, libraries, viewers, e-sign and editors.
- 5 states
Five-step people import: upload, map fields, map values, review, done.
Adapt for: Any data import wizard (contacts, products, transactions) — 5 frames.
Breadcrumb + version, count tabs, numbered data table, file info, attachments, activity.
Adapt for: Detail view of a file/dataset/table with data preview, versions and activity.
Repo-style policy library: tabs, version bar, latest change, file rows, README, About rail.
Adapt for: Repository-style library of docs/policies/templates with versions.
Document toolbar · page thumbnails · stacked pages with highlight + pin · panel: tabs, AI summary, clauses to review (risk status), comment.
Adapt for: Contracts, policies, reports, PDFs with AI summary and review.
Stepper rail · document reference · prefilled fields · drawn signature · consent · one primary.
Adapt for: Final sign step in onboarding, contracts, consent.
Fixed format toolbar · 640 text column of editor blocks (H1, meta, paragraphs, selection with floating toolbar + AI writing menu, list, to-do, quote, callout, comment) · block handle · outline + comments rail.
Adapt for: Docs, wikis, specs, knowledge base articles, release notes, proposals.
Collapsed sidebar · ticket thread (title, status, messages) · editor field in Focus with a person chip and an @ query opening the mention list.
Adapt for: Support tickets, approvals, code review threads, CRM notes — any thread with a reply box.
Scheduling 9
Week, month, agenda, resource, timeline and shift views, plus booking and meeting flows.
Side panel (mini calendar + calendar sources) · toolbar · 7-day time grid 8am–7pm (72px/hour) with events, now line and a drag-to-create range with quick-create popover.
Adapt for: Any week calendar: personal/team calendars, content calendars, class timetables, clinic diaries.
Toolbar · resource headers as columns · time grid with hatched blocked time, double booking and now line · docked event details panel.
Adapt for: One day across shared resources: rooms, courts, chairs, vehicles, machines, studios.
Toolbar · weekday header · 5-week grid with up to 3 event chips per day, "+N more", today disc, selected day popover.
Adapt for: Month overview: events, content calendar, release calendar, bookings at a glance.
Toolbar · day-grouped agenda cards (time, colour bar, meta, guests, RSVP, Join on the live one) · rail with mini calendar and time-by-calendar breakdown.
Adapt for: Upcoming list of meetings, appointments, deliveries or tasks with RSVP/status.
Toolbar · filter row · people column × hour scale with bars, stacked overlaps, hatched leave, vertical now line and team-load bars.
Adapt for: Horizontal per-resource timeline: dispatch, field service, project staffing, equipment.
Header with week nav, draft status, Copy last week, Publish · rota grid: people × days with shift chips/slots, open-shift row, coverage per day, totals.
Adapt for: Weekly rota for hourly teams: retail, hospitality, clinics, support desks, warehouses.
- 2 states
Pick a time: host card · month calendar · slot list + Next. Compact: host line, date strip, morning/afternoon slots, Confirm.
Adapt for: Public booking / scheduling link: demos, appointments, interviews, consultations.
Week calendar under a scrim + centred create-meeting dialog.
Adapt for: Create event / calendar invite over a calendar.
- 3 states
Three frames (Light · Signal, Dark · Signal, Light · Teal): event-block 6 colours × 8 states plus chips, slots, sources and now line.
Adapt for: Reference: every scheduling colour × state in Light, Dark and Teal.
Maps & logistics 3
Locators, routes, territories and listings on a token-driven basemap.
Collapsed sidebar · 420 list panel (title, search, chips, location rows) · map with basemap, pins, category markers, clusters, radius zone, you-are-here, place card above the selected pin, search-this-area, controls, legend, scale.
Adapt for: Locators: stores, sites, assets, offices, clinics, technicians — list ↔ map.
Dark mode. Full-bleed map with floating route panel (KPIs mono, route options, numbered stops with status, Add stop / Dispatch), active + alternative routes, territory polygon, zone being drawn, layer switcher, drawing toolbar.
Adapt for: Delivery, dispatch, field service, fleet and territory planning.
Top header · filter row · 2-column listing cards (selected outlined) · map with price markers (selected/visited), cluster and a listing mini card.
Adapt for: Marketplaces with places: rentals, venues, coworking, inventory by location.
Media 5
Libraries, uploads, viewers, video review and moodboards.
Collapsed sidebar · folders panel (counts, storage meter) · header with Generate + Upload · type chips · inverse selection bar · 4-column media-tile grid · details panel (preview, mono metadata, tags, AI alt text).
Adapt for: Any asset / file / DAM library with folders, filters, bulk actions and details.
Media library under a scrim + upload dialog: drag-over dropzone, uploading (mono progress), uploaded, failed (retry), queued.
Adapt for: Upload flows over any listing: attachments, imports, media.
Dark. Top bar (View / Annotate / Compare, Approve) · stage with image, annotation pins and marked region, nav arrows, zoom pill · filmstrip · comments panel with threads and mono metadata.
Adapt for: Proofing, photo review, creative approvals, inspection photos (dark).
Top bar · tool rail · settings panel · player · timeline toolbar (mono timecode, zoom) · ruler, tracks (comments, video, text, audio, music), playhead, comment markers, open comment thread.
Adapt for: Video / audio editing, review and approval with timestamped comments.
Dot canvas · floating top bars · grouped media nodes and notes · selected item with handles · connector · comment marker · AI "more like this" · canvas toolbar, zoom, minimap.
Adapt for: Moodboards, whiteboards, research boards, storyboards.
Onboarding & system pages 3
Setup wizards, result pages and 403, 404 and 500 screens.
- 9 states
Nine onboarding layouts, each with a different section type and rail position.
Adapt for: Setup and onboarding for any SaaS — 9 layouts; pick by step count and section type (see layouts).
- 2 states
Success and failure outcome pages with summary card.
Adapt for: Success / failure outcome after any job or submission.
- 3 states
Forbidden, not found and server error pages.
Adapt for: 403 / 404 / 500 pages.
Tablet & phone 5
The same patterns re-flowed: record cards, bottom sheets, tab bars and app bars.
- 2 states
768: collapsed sidebar, header, 4 KPI tiles, full-width column chart, record cards 2 up. 390: app bar Root, period pills, 2×2 KPI tiles, column chart at 358, record cards, bottom tab bar.
Adapt for: Any dashboard that must work on tablet and phone.
- 3 states
768: search + filters, record cards 2 up (one selected). 390 list: Large-title app bar, search, chips, record cards, tab bar. 390 detail: Detail app bar, mono hero amount, key/value card, line items, sticky Reject / Approve.
Adapt for: Any table/list + record detail on tablet and phone (invoices, tickets, candidates, assets).
- 2 states
Day view (app bar, 7-day date strip, 64px hours, events, now line, tab bar) and New event as a Full bottom sheet over a scrim.
Adapt for: Scheduling on phone: day view, create/edit event sheets.
Full-bleed map, floating search + filter, chip row, pins (one selected), Half bottom sheet of location rows above the tab bar.
Adapt for: Store/depot locators, field service, delivery tracking on phone.
- 2 states
Document editor (Detail app bar, full-width editor blocks, Compact toolbar docked with Ask AI) and reply composer (thread, full-width mention list, editor field).
Adapt for: Docs, notes, comments and replies on phone.
No templates match.
Clone, rewrite, switch modes.
- Clone the frame into your own page. Originals stay untouched, so updates to the kit never fight your edits.
- Rewrite the copy for your domain. The structure carries over: an approvals inbox works for invoices, leave requests or code reviews.
- Switch modes on the frame. Light or Dark, Signal or Teal (or your brand), and Compact, Comfortable or Dense. Nothing needs redrawing.
- Swap parts by property, not by detaching. Every template lists its parts, and every part's variants are in the catalogue.