Myrtlepost

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.

• Source Sans 3Headings: Source Sans 3 600, 20px for panel titles
• Source Sans 3Body: Source Sans 3 400, 15px/1.5 in dense lists (16px elsewhere); mini-calendar 14px tabular; time labels 13px

Patterns

• global icon rail
• planner sidebar with view filters and mini month
• quick-add input with Enter to save
• collapsible task buckets with counts
• slide-over day schedule pane
• current-time line
• legend dots for due vs scheduled
• top strip with workspace tabs and local clock

States it is designed for

• empty day (all buckets 0) with hint to add or drag
• loading skeleton rows
• task scheduled (appears in Scheduled and on timeline)
• overlapping blocks (side by side)
• past time dimmed
• offline (queued changes badge)
• sync conflict toast
• quick-add validation (empty)

Who it is for

• knowledge workers who time-block
• engineers and PMs using an integrated workspace
• distributed teams

Layout

1. Top strip (28px): workspace tab with badge, + new tab, right: search, video, city + time, settings
2. Icon rail (40px): logo, menu, app icons (notifications, chat, planner active, docs, people, tasks, cloud, notes, learning, packages), bottom: settings, help, avatar with presence
3. Planner sidebar (~175px): title with menu, view list (Unplanned, Planned, All), mini month with prev/next and legend, 'Public schedule' section with 'Add schedule'
4. Main: toggle-sidebar button, date title, quick-add input, collapsible bucket rows with counts
5. Right pane (~250px): 'Today's timeline' header with prev/day/next, timezone chip, all-day row, hourly timeline with red now-line and time label
6. Below 1200px right pane becomes a toggleable overlay; below 768px icon rail becomes bottom tab bar and sidebar a sheet

Palette

Focused, nocturnal, tool-like. Low-contrast chrome and bright accents for today and now.

• bg#141420
• panel#1b1a28
• raised#262536
• border#333240
• text#e8e8f0
• muted#a09fb4
• accent#3b6fe0
• accent-text#7fa3f5
• now-line#e5484d
• due-dot#e5484d
• scheduled-dot#8f8ea6
• focus#7fa3f5

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

Source Sans 3 600, 20px for panel titles

Body

Source Sans 3 400, 15px/1.5 in dense lists (16px elsewhere); mini-calendar 14px tabular; time labels 13px

Similar to the observed humanist sans. Section label 'PUBLIC SCHEDULE' 12px 600 uppercase +0.06em.

Spacing and imagery

Dense; 4px base; list rows 36px; mini-calendar cells 28px; pane gutters 1px borders; radius 6px inputs and chips, 8px panes; no shadows except the overlay pane (0 12px 32px rgba(0,0,0,.5)).

No imagery; small dots, a red now-line and a blue today disc carry meaning.

Components

• workspace tab strip
• icon rail with active indicator
• view filter list
• mini month calendar with markers
• quick-add input
• collapsible bucket header with count
• task row
• day timeline
• now indicator
• timezone chip
• presence avatar

Interactions

• Enter in quick-add creates an action item for the selected day
• Drag a task onto the timeline to schedule it (dnd-kit) with a ghost block snapping to 15 minutes
• Clicking a mini-calendar day changes the main date and the timeline
• Bucket headers toggle with a rotating chevron
• Now-line updates every minute
• Keyboard: T for today, arrow keys in mini calendar, N focuses quick-add

Data

• ActionItem{id, owner_id, title, day, status (unplanned|scheduled|done), due_at, source (manual|task|doc)}
• ScheduleBlock{id, owner_id, action_item_id, starts_at, ends_at, tz}
• PublicSchedule{id, owner_id, name, slug, visibility}

Guardrails

Experience

• Keep quick-add always one keystroke away
• Show counts on every bucket even when collapsed
• Make 'now' unmistakable on the timeline
• Snap scheduled blocks to 15 minutes and show start/end while dragging
• Explain legend dots next to the mini calendar
• Respect the user's timezone and show it

Accessibility

• Mini calendar is a grid with aria-selected and arrow-key navigation
• Dragging has a keyboard alternative: 'Schedule...' menu with time picker
• Bucket headers are buttons with aria-expanded
• Now-line has a text label with the time
• Due vs scheduled markers are distinguishable by position and legend text, not just colour
• Icon rail items have tooltips and accessible names

Security

• RLS: action items and blocks owned by the user; public schedules expose only free/busy via a view
• Validate time ranges (end > start, max 24h) server-side
• Realtime channel scoped to the user's id
• Rate-limit quick-add creation

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 **Myrtlepost**, the Planner module of a dark all-in-one team workspace. For a chosen day the user sees action items in four collapsible buckets (Scheduled, Unplanned, Action items, Done), adds items with a quick-add field and drags them onto a day timeline on the right to time-block.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Collapsible, Tooltip, Popover, Sheet), lucide-react, dnd-kit for dragging tasks to the timeline, date-fns (with time zone support), TanStack Query. Supabase Auth, Postgres and Realtime for cross-device sync.

### Pages & layout
1. **Workspace shell**: 28px top strip (workspace tab 'Ops room' with badge, new tab, search, call, 'Lisbon 14:50', settings); 40px icon rail with Planner active.
2. **/planner/:date** (this screen): planner sidebar (title, Unplanned/Planned/All, January mini month with 'Due' and 'Scheduled' legend, Public schedule + Add schedule, Help at bottom); main with date title '7 January 2026', quick-add 'Quick add: type and press Enter', buckets with counts; right pane 'Today's timeline' with day nav, timezone chip, all-day row and 13:00-23:00 timeline with red now-line labelled with the time.
3. Responsive: right pane overlay below 1200px; mobile bottom tabs and sheet sidebar.

### Design system
- Colors: `--bg: #141420`, `--panel: #1b1a28`, `--raised: #262536`, `--border: #333240`, `--text: #e8e8f0`, `--muted: #a09fb4`, `--accent: #3b6fe0`, `--accent-text: #7fa3f5`, `--now-line: #e5484d`, `--due-dot: #e5484d`, `--scheduled-dot: #8f8ea6`, `--focus: #7fa3f5`.
- Fonts: Source Sans 3 (similar to observed). Titles 20px/600; lists 15px/1.5 (dense); elsewhere 16px; time labels 13px; section labels 12px uppercase +0.06em.
- Spacing: 4px base; rows 36px; 12px pane padding.
- Radius: 6px inputs, 8px panes, full circle today marker.
- Shadows: only overlays.
- Motion: 150ms collapses; drag ghost follows pointer; reduced motion removes chevron rotation.

### Components & interactions
`TopStrip`, `IconRail`, `PlannerSidebar` (ViewList, MiniMonth with markers, PublicSchedules), `QuickAdd`, `Bucket` (header button with count, TaskRow list), `TaskRow` (checkbox, title, source icon, context menu), `DayTimeline` (hour grid, blocks, NowLine, drop targets), `TimezoneChip`. Hover rows lighten to `--raised`.

### Data & state
Tables per data model with `owner_id` everywhere. Realtime subscription on `action_items` and `schedule_blocks` filtered by owner. Optimistic updates for quick-add and drag. Mock: a day with 3 unplanned items, 2 scheduled blocks, 1 done.

### Accessibility
Grid pattern on the mini calendar. Keyboard scheduling via a menu and time picker. Live region announces 'Scheduled "Draft agenda" 15:00 to 15:30'. Colour pairs verified in the dark palette.
Verified contrast: body text on panel: #e8e8f0 on #1b1a28 = 14.07:1; muted text on bg: #a09fb4 on #141420 = 7.05:1; today label on panel: #7fa3f5 on #1b1a28 = 6.91:1; selected day number on accent: #ffffff on #3b6fe0 = 4.63:1; now line on bg: #e5484d on #141420 = 4.66:1; scheduled dot on panel: #8f8ea6 on #1b1a28 = 5.38:1; focus ring on panel: #7fa3f5 on #1b1a28 = 6.91:1.

### Security
RLS: all tables `owner_id = auth.uid()`; `public_free_busy` view exposes only start/end for public schedules. Server check constraints on time ranges. Realtime authorised by RLS. Rate-limit inserts per user per minute.

### Performance & SEO
Virtualise long buckets. Only render timeline hours in view plus buffer. Lazy-load dnd-kit on first drag intent. Noindex.

### Guardrails
- Invented workspace names and tasks
- Never lose a quick-add entry on network failure (queue it)
- Timezone always visible
- Typed code, errors surfaced
- Acceptance criteria: (1) Enter adds an item to the chosen day; (2) dragging (or keyboard scheduling) creates a block and moves the item to Scheduled; (3) now-line tracks the current time; (4) RLS isolates users; (5) usable at 390px.

Open the builderAll templatesThis palette on its own