Jotworks

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

Google Sans Flex is already unique in the catalog, and its rounded, flexible weights make the bold, friendly consumer voice.

• Google Sans FlexHeadings: hero 128px 800, CTA heading ~64px
• Google Sans FlexBody: body 16px, testimonials

Who it is for

• Product and project teams
• Remote teams writing async updates
• Agencies sharing notes with clients
• Meeting note-takers

Layout

1. Orange gradient hero: white wordmark left, outline 'View demo' and white 'Get started' buttons right
2. Giant 128px white extra-bold title, 400-weight tagline, white + outline buttons
3. Overlapping app mock: left sidebar (New note, Search, Pinned / Today / Previous 7 days note lists with times), editor header with note title, collaborator avatar stack, Share and Comments; document with title, date and attendees, Agenda and Decisions sections
4. Logo wall
5. Testimonial cards with round avatars, names and roles
6. Orange CTA band with outline + white buttons
7. Footer
8. App: note drawer, editor with slash menu, comments sidebar, chat panel, share dialog, /demo

Palette

Bold, warm, energetic, collaborative, approachable. A deep, warm orange brand that makes team writing feel lively.

• background#ffffff
• text#1e1d28
• hero orange#c2410c
• hero orange light#c05700
• sidebar surface#f7f7fa
• cursor green#12883e
• cursor magenta#c026d3

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

Google Sans Flex 800, 128px hero; ~64px CTA heading

Body

Google Sans Flex 400 16px with generous line-height in testimonials

A rounded, flexible grotesk at extreme weights gives a bold, friendly, consumer-grade voice. 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

Edge-to-edge hero with 24px side gutters; app mock nearly full width with 12px radius; testimonial cards in 3 columns with thin borders and lots of padding; pill-ish 8-12px radius buttons.

Full product UI mock with coloured collaborator avatars; circular portrait photos in testimonials; placeholder company wordmarks.

Components

• Gradient hero with giant title
• Outline and solid white buttons
• Note sidebar with sections (Pinned, Today, Previous 7 Days)
• Search field
• Collaborator avatar stack
• Share dialog with roles and guest toggle
• Rich-text editor with slash menu
• Live cursors with name labels
• Inline comment threads with reactions and resolve
• Slide-in chat panel with unread badge
• Folder and tag filters
• Testimonial cards
• Logo wall

Interactions

• Real-time co-editing with coloured cursors
• Type / to open command menu
• Select text to comment; resolve threads
• Chat typing indicator and reactions
• Pin notes
• Filter by folder/tag, sort by date/title
• Guest link toggle
• Public demo editor without sign-up

Data

• Workspace{id, name}
• Member{workspace_id, user_id, role}
• Folder{id, workspace_id, name}
• Note{id, workspace_id, folder_id, title, ydoc_state, pinned, updated_at, created_by}
• NoteTag{note_id, tag}
• NoteShare{note_id, user_id|email, role: editor|viewer}
• GuestLink{note_id, token, role, enabled}
• CommentThread{id, note_id, anchor, resolved}
• Comment{thread_id, author_id, body, reactions}
• ChatMessage{note_id, author_id, body, reply_to, created_at}

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 **Jotworks**, a collaborative notes workspace for small teams. People write meeting notes, specs and standups together in real time, see each other's cursors, use a slash menu for structure, comment on selected text, chat beside a note, and share notes with guests via link. A public demo lets visitors try the editor without an account.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Tiptap with the Collaboration and CollaborationCursor extensions over Yjs; a Yjs provider on Supabase Realtime (or a Hocuspocus server) for sync; TanStack Query for lists; dnd-kit for moving notes between folders; react-hook-form + zod for share and settings; Recharts optional for a workspace activity view. Supabase: Auth, Postgres (notes, comments, chat, shares), Realtime (presence, chat), Storage for images.

### Pages & layout
1. **Landing**: full-width warm orange gradient hero with white nav (wordmark; outline "View demo" and solid white "Get started"); a gigantic extra-bold white title, 400-weight tagline, two buttons; a large app mock overlapping the hero's bottom. Logo wall of fictional companies; three testimonial cards (illustrative); orange CTA band; footer.
2. **Workspace**: left drawer (New note, search, Pinned / Today / Previous 7 days / Older groups with times, folders, tags); main editor with header (breadcrumb title, avatar stack of present users, Share, Comments, Chat).
3. **Editor**: title, meta line (date · attendees), content with headings, checklists, tables, code, images, quotes; slash menu; floating formatting bubble.
4. **Comments sidebar**: threads anchored to text, replies, emoji reactions, resolve.
5. **Chat panel**: slide-in, replies, reactions, typing indicator, unread badge.
6. **Share dialog**: invite by email as editor/viewer; guest link toggle with role.
7. **/demo**: seeded note, local-only Yjs doc.

### Design system
Tokens: `--background: #ffffff`, `--foreground: #1e1d28`, `--primary: #c2410c` (deep orange, passes with white text), `--hero-from: #c2410c`, `--hero-to: #c05700`, `--muted: #f7f7fa`, `--border: #e7e7ee`; eight cursor colours. Fonts: a rounded grotesk such as Google Sans-like "Google Sans Flex" at 800 for display, 400/500 for UI; editor body 16px/1.7. Scale 14/16/20/32/64/128. Radius 12px panels, 10px buttons. Shadows soft on the mock `0 30px 60px rgb(30 29 40 / .15)`. Motion 180ms; panels slide 250ms ease-out. The hero gradient runs deep orange `#c2410c` to `#c05700` so white text passes everywhere; add `--muted-foreground: #5f5e6c` and `--input-border: #9292b2`.

### Components & interactions
Editor states: connecting, synced, offline (edits queued, banner), read-only for viewers. Slash menu filters as you type and supports arrows/enter. Comment composer disabled when empty. Chat shows unread count on the toggle. Share dialog copies link with toast. Empty drawer invites creating a first note. Error toasts for failed saves with retry.

### Data & state
Workspace, Member, Folder, Note(ydoc_state bytea, pinned), NoteTag, NoteShare, GuestLink(token, role, enabled), CommentThread(anchor as Yjs relative position, resolved), Comment, ChatMessage. Persist Yjs updates periodically server-side; presence via Realtime channels. Seed a few notes (weekly sync, launch checklist, design review) with fictional names.

### Accessibility
The hero gradient was deepened so white text passes 4.5:1 on both stops. Editor toolbar buttons labelled with `aria-pressed`; slash menu is a listbox. Remote cursors are `aria-hidden`, but presence is announced as "3 people editing". Comments and chat panels are landmarks with headings. Reduced motion disables panel slides. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #1e1d28 on #ffffff = 16.65:1; muted text #5f5e6c on #ffffff = 6.36:1; white text #ffffff on #c2410c = 5.18:1; white hero text #ffffff on #c05700 = 4.56:1.

### Security
RLS: workspace members read notes in their workspace; per-note shares grant editor/viewer; guests access only via an Edge Function that validates the token and issues a scoped, short-lived credential for that note. Viewers can't send Yjs updates (enforce server-side in the provider). Sanitize pasted HTML and rendered comments (DOMPurify). Image uploads ≤5 MB, image types only, private bucket. Rate-limit chat and comments. The demo route never touches the database.

### Performance & SEO
Lazy-load the editor code; code-split chat and comments. Paginate note lists. Landing meta/OG and fast LCP (text hero). App `noindex`.

### Guardrails
- Original copy; fictional companies and people; illustrative testimonials labelled as such.
- Typed components, no `any`, visible errors.
- Don't retain chat or notes after deletion.
- Done when: two browsers edit the same note with live cursors; slash menu inserts blocks; comment threads anchor and resolve; guest link opens view-only without an account; viewers cannot edit; /demo works signed out.

Open the builderAll templatesThis palette on its own