Mosaicle

A mock-up of the screen, drawn from its layout, palette and typefaces. A build follows the full prompt below.

Start from this screenRead the build prompt

Typefaces

The catalog's own faces. A screen composed into a template is drawn in that template's typefaces.

• FigtreeHeadings: Figtree 700, 32px, tracking -0.02em for the list title; 22px 700 for task title in detail
• FigtreeBody: Figtree 400, 16px/1.5; task titles 15px 500 (dense list); meta 13px muted; nav 15px 500

Patterns

• three-column productivity layout (nav / list / detail)
• emoji-tagged list navigation with collapsible groups
• active nav edge indicator
• large page title
• dismissible tip banner
• filter chips (mine / others / upcoming / done)
• circle checkbox task rows with parent list meta
• slide-in detail pane with complete button and subtasks
• comment composer in detail footer

States it is designed for

• loading rows skeleton
• no tasks for filter (friendly empty with add button)
• task completed (undo toast)
• task with subtasks progress (0/2)
• placeholder task with no title ('...') shown muted
• comment sending / failed
• task deleted elsewhere (detail shows gone state)
• offline queued changes

Who it is for

• individuals managing work and personal lists
• small teams sharing meeting action items
• students and freelancers

Layout

1. Sidebar (~160px, light): Inbox, Today, Tasks (active with a coloured right-edge bar), Messages; 'Recent'; 'Lists' with collapsible groups (Work, Personal) and emoji-labelled lists; avatar at bottom
2. List pane (white card): filter/sort icon button, large 'Tasks' title, tip banner with open and dismiss buttons, search icon + filter chips, task rows (circle checkbox, title, meta line with list name and subtask count), selected row highlighted with right edge bar
3. Detail pane (lavender-grey card): close, 'Complete' button, assignee avatars, overflow; title, meta (date, tag, list); subtasks with circle checkboxes; footer 'Created by ... · time ago'; comment input
4. Below 1100px detail pane overlays the list; below 700px each pane is its own screen with back navigation

Palette

Soft, tidy, personal. Lavender-greys and emoji list icons make a dense list feel friendly.

• canvas#fafafc
• surface#ffffff
• detail-bg#efedf5
• text#1c1c28
• muted#62627a
• border#dbd9e3
• checkbox#86869b
• accent#e5484d
• tip-bg#ecedf5
• tip-text#4c45b8
• chip-bg#f2f1f8
• focus#4c45b8

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

Figtree 700, 32px, tracking -0.02em for the list title; 22px 700 for task title in detail

Body

Figtree 400, 16px/1.5; task titles 15px 500 (dense list); meta 13px muted; nav 15px 500

Similar to the observed rounded geometric sans.

Spacing and imagery

Comfortable-dense; 4px base; rows 52px (title + meta); list pane padding 24px; 8px gutters between floating panes; radius 12px panes, 999px chips, full circle checkboxes; no shadows, tone separation instead.

Emoji as list icons; small avatars; line icons for meta.

Components

• sidebar with emoji lists
• active edge indicator
• tip banner
• filter chips
• search toggle
• task row with circle checkbox
• meta line
• detail pane header actions
• complete button
• assignee avatars
• subtask checklist
• comment input
• created-by footer

Interactions

• Clicking a row opens detail; J/K move selection; X toggles complete; Enter opens
• Checking a task animates a strike and moves it to Done after 1.5s (undo toast)
• Filter chips are single-select and update the URL
• Drag rows to reorder or onto a sidebar list to move (dnd-kit)
• Tip banner dismiss persists
• Comment Enter sends; mentions with @

Data

• List{id, owner_id, name, emoji, group (work|personal), position}
• Task{id, list_id, parent_id, title, done bool, due_on, assignee_ids uuid[], created_by, created_at}
• Comment{id, task_id, author_id, body, created_at}

Guardrails

Experience

• Show the parent list under every task so context survives cross-list views
• Give completion an undo, not a confirm
• Keep filters one click away as chips
• Show subtask progress as a count on the row
• Let untitled drafts exist but mark them clearly
• Keep the detail pane keyboard-closable with Escape

Accessibility

• Checkboxes are real checkboxes named by the task title
• Active nav item uses aria-current plus the edge bar, not colour alone
• Filter chips are a radio group
• Detail pane is a complementary region labelled by the task title; focus moves to its heading on open
• Undo toast is reachable by keyboard before it times out (pauses on focus)
• Emoji icons are aria-hidden with list names as text

Security

• RLS: lists and tasks visible to owners and to members of shared lists only
• Comments insertable only by list members; mentions limited to members
• Validate titles and comment length; strip HTML
• Soft-delete tasks with an audit trail

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 an entry'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 entries)
- 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.

### SaaS screen baseline
- Design every screen for its full set of states: first-run empty, loading skeleton, partial data, error with retry, permission-denied, and success feedback. Each entry lists the states its screen needs.
- Keep destructive actions (delete, revoke, downgrade, remove member) behind a confirmation that names the object, and prefer undo over a second dialog where the action is reversible.
- Enforce authorisation on the server for every action a screen exposes. Hiding a button is not access control; check the role again in the API or RLS policy.
- Never show secrets (API keys, tokens) in full after creation. Show them once, then mask them, and offer rotate and revoke.
- Keep the app shell (navigation, workspace switcher, account menu) consistent across screens, and preserve filters, sort and scroll position when the user navigates back.

### Goal
Build **Mosaicle**, the Tasks view of a personal and team task manager. A middle list shows every task assigned to the user across lists, filterable by chips; selecting one opens a right detail pane with subtasks, assignees, metadata and comments.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Checkbox, ToggleGroup, Tooltip, DropdownMenu, Toast), lucide-react, dnd-kit for reordering and moving, date-fns, TanStack Query, react-hook-form + zod for the comment box. Supabase Auth, Postgres and Realtime for shared lists.

### Pages & layout
1. **Shell**: sidebar (Inbox, Today, Tasks, Messages; Recent; Lists: 'Start here', Work group with 'Sprint board' and 'Client follow-ups', Personal group with 'Errands', 'Books to read', 'Fitness'; avatar).
2. **/tasks** (this screen): list pane with 'Tasks', tip banner 'Everything assigned to you, across every list', chips 'Assigned to me', 'Others', 'Upcoming', 'Done', rows like 'Send revised quote' (Client follow-ups), 'Book venue walk-through' (Sprint board) with subtask counts; detail pane for the selected task with Complete, avatars, title, meta, two subtasks, 'Created by Leo · 3h ago', 'Write a comment...'.
3. Responsive: overlay detail under 1100px; stacked screens under 700px.

### Design system
- Colors: `--canvas: #fafafc`, `--surface: #ffffff`, `--detail-bg: #efedf5`, `--text: #1c1c28`, `--muted: #62627a`, `--border: #dbd9e3`, `--checkbox: #86869b`, `--accent: #e5484d`, `--tip-bg: #ecedf5`, `--tip-text: #4c45b8`, `--chip-bg: #f2f1f8`, `--focus: #4c45b8`.
- Fonts: Figtree (similar to observed rounded geometric sans). Title 32px/700; detail title 22px/700; rows 15px/500 dense; body 16px/1.5; meta 13px.
- Spacing: 4px base; 8px pane gutters; 24px pane padding.
- Radius: panes 12px; chips full; checkboxes circle.
- Shadows: none.
- Motion: 180ms strike-through and fade on complete; 200ms detail slide; reduced motion uses instant changes.

### Components & interactions
`Sidebar` (NavItem with EdgeIndicator, ListGroup Collapsible, EmojiList), `TaskListPane` (TitleBar, TipBanner, FilterChips, SearchToggle, TaskRow), `TaskDetailPane` (CloseButton, CompleteButton, AvatarStack, TitleEditable, MetaRow, SubtaskList, CreatedFooter, CommentComposer), `UndoToast`.

### Data & state
Tables per data model plus `list_members(list_id, user_id, role)`. Filters in URL. Optimistic completes with undo; Realtime updates shared lists. Mock 10 tasks across 3 lists, one with 2 subtasks, two untitled drafts.

### Accessibility
Rows are listitems containing a checkbox and a button to open details. Keyboard shortcuts listed in a help popover. Detail pane labelled and focus-managed. Colour pairs verified.
Verified contrast: body text on white: #1c1c28 on #ffffff = 16.85:1; muted meta on white: #62627a on #ffffff = 5.92:1; text on detail pane: #1c1c28 on #efedf5 = 14.53:1; tip text on tip background: #4c45b8 on #ecedf5 = 6.31:1; chip label on chip fill: #1c1c28 on #f2f1f8 = 15.02:1; checkbox ring on white: #86869b on #ffffff = 3.56:1; active edge indicator on canvas: #e5484d on #fafafc = 3.75:1; focus ring on white: #4c45b8 on #ffffff = 7.37:1.

### Security
RLS: `lists` select where owner or member; `tasks` via list membership; `comments` insert by members only. Validate lengths (title 200, comment 2,000). Soft delete with `deleted_at` and audit trigger.

### Performance & SEO
Virtualise the task list beyond 100 rows. Prefetch detail on hover. Noindex.

### Guardrails
- Invented tasks, lists and people
- Completion is undoable
- No colour-only states
- Typed code, errors surfaced
- Acceptance criteria: (1) filters work and persist in URL; (2) completing a task shows undo and moves it to Done; (3) detail pane shows subtasks and accepts comments; (4) RLS restricts shared lists to members; (5) stacked screens at 390px.

Open the builderAll templatesThis palette on its own