Murmur

Who it is for

• Solo creators and founders who think out loud
• Podcasters and voice-note journalers
• Social media managers batching posts
• Developers wanting a scheduling app starter

Layout

1. White top nav: heavy black wordmark left, 4 text links center, outlined 'Log In' and black 'Sign Up' pills right
2. Hero: boxed monospace eyebrow tag, giant black uppercase two-line headline, body copy, orange pill CTA with hard black offset shadow; right side a pink pill-shaped audio player with orange mic button and waveform over a black-outlined square grid and rotating circular text badge
3. Social proof avatars row
4. Ticker/marquee band of short uppercase keywords
5. Bordered bento feature grid (library, composer, calendar, share) with circular pastel icon badges and curved notch joints
6. Use-case scenarios section
7. Testimonials, pricing plans, FAQ, final CTA, footer
8. App shell: sidebar + audio library, composer, calendar (month/list), recording detail, analytics, channels, settings

Palette

Loud, playful, graphic, confident, punchy. Neo-brutalist poster energy softened by candy pastels.

• background#ffffff
• text / border#000000
• CTA orange#ff6a00
• primary pink#f3d4ec
• secondary yellow#f3dc4a
• accent mint#5ff2bf
• muted#f5f5f5
• muted text#595959

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

Unbounded (or Archivo Black) at weight 900, uppercase for short headlines only, 48px section heads and ~110px hero, tight leading

Body

Inter 400 18–20px black

Ultra-heavy geometric display against neutral Inter body plus a monospace for tags; all color comes from flat pastel fills

Spacing and imagery

1150px container, thick 1px black grid lines dividing bento cells, 0 radius for boxes but fully rounded pills and circles; hard offset shadows (6px 6px 0 #000); big 120px section gaps

No photos except small avatars; flat vector graphics -- outlined grids, pill audio player, waveform bars, sparkle stars, rotating circular text.

Components

• Pill nav buttons
• Boxed monospace eyebrow tag
• Offset-shadow CTA
• Audio player pill with waveform
• Rotating circular text badge
• Marquee ticker
• Bento grid with circular icon badges
• Pricing cards
• FAQ accordion
• Drag-and-drop audio uploader
• Composer with per-platform character counters
• Month/list calendar with color-coded chips
• Analytics charts with range filter
• Channel manager

Interactions

• Button press shifts into its offset shadow
• Scroll-triggered GSAP reveals and rotating badge
• Infinite marquee
• Audio drag-and-drop upload with progress
• Inline audio playback
• Live character count turning red over limit
• Calendar chip drag to reschedule
• 'Share to X' opens prefilled intent then mark as published
• Search, filter and sort recordings

Data

• Recording{id, user_id, title, storage_path, duration_s, size_bytes, created_at, tags[]}
• Post{id, user_id, recording_id, body, platform, scheduled_at, status(draft|scheduled|published), published_at}
• Channel{id, user_id, platform, handle, color}
• Profile{id, display_name, timezone}

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 **Murmur**, a workspace for creators who capture ideas as voice notes. Users upload recordings to a private library, draft posts next to the audio that inspired them, drop drafts onto a calendar, and when the time comes open a prefilled share link to publish manually. The marketing page is loud neo-brutalist. The job: turn a backlog of voice memos into a steady posting rhythm without auto-posting anything.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Framer Motion (or GSAP) for landing reveals and the rotating badge; Embla for testimonials; TanStack Query; react-hook-form + zod for the composer; date-fns for calendar math; dnd-kit to drag post chips between days; Recharts for analytics. Supabase: Auth, Postgres (recordings, posts, channels), private Storage bucket for audio with signed URLs.

### Pages & layout
1. **Landing** – nav with pill buttons; hero with boxed monospace eyebrow, giant two-line uppercase headline, short paragraph, orange CTA with hard black shadow; right-hand illustration of a pastel pill audio player (mic button + waveform) over an outlined square grid with a spinning circular text sticker. Avatar social proof, marquee band, 4-cell bordered bento of features, 3 use-case scenario cards, testimonials carousel, 2–3 pricing plans, FAQ, closing CTA.
2. **Auth** – login, signup, reset.
3. **Dashboard shell** – sidebar nav. Views: Library (upload dropzone, searchable/sortable list), Recording detail (player, linked posts), Composer (text area, platform selector, counters, schedule picker), Calendar (month grid and list), Analytics (posts per week, status mix, date-range filter), Channels, Settings.

### Design system
`--background: #ffffff`, `--foreground: #000000`, `--border: #000000`, `--cta: #ff6a00`, `--pink: #f3d4ec`, `--yellow: #f3dc4a`, `--mint: #5ff2bf`, `--muted: #f5f5f5`, `--muted-foreground: #595959`. Display: a heavy geometric sans (e.g. Unbounded or Archivo Black) uppercase, hero 96–112px, sections 48px; body Inter 400 18px/1.6 (max ~70ch, never uppercase for paragraphs); tags in Space Mono 12-14px uppercase with 0.08em tracking; system-ui and monospace fallbacks. Radius 0 for panels, 999px for buttons/pills. Shadow `6px 6px 0 #000`; borders 1–2px solid black. Motion: press = translate(4px,4px) + shadow shrink in 100ms; reveals 400ms ease-out.

### Components & interactions
BrutalButton (default/hover/pressed/disabled/loading), EyebrowTag, AudioPillGraphic, SpinningBadge, Marquee, BentoCell, PricingCard, Accordion, AudioDropzone (drag-over, uploading %, error), RecordingRow with inline play, CharCounter (ok/warn/over), PlatformSelect, CalendarMonth with draggable chips colored by channel, ShareButton (opens intent URL, then prompt "Mark as published?"), AnalyticsCard, EmptyLibrary state.

### Data & state
Tables `recordings`, `posts`, `channels`, `profiles` as described; posts optionally reference a recording. Demo mode loads fixtures in memory (8 recordings, 20 posts over a month) without touching the DB.

### Accessibility
Pastel fills carry black text only (≥ 12:1). The orange CTA needs black text or a darker orange (#c24e00) for white text. Waveform graphic is decorative (`aria-hidden`). Marquee and spinning badge stop under reduced motion. Calendar chips movable via keyboard (select, arrow to day, Enter) and a date field fallback. Audio player has labeled controls; provide optional transcript field. Verified contrast: body text #000000 on #ffffff = 21.0:1; black text #000000 on #f3d4ec = 15.4:1; black text #000000 on #ff6a00 = 7.3:1; white text #ffffff on #c24e00 = 4.7:1; muted helper text #595959 on #ffffff = 7.0:1.

### Security
RLS owner-only on all tables. Storage bucket private; path `uid/filename`; access via short-lived signed URLs. Upload limits: audio/mpeg, audio/mp4, audio/wav, audio/webm ≤ 25 MB, checked client-side and by storage policy. zod on composer (length per platform). No social API tokens stored; sharing uses public intent URLs with `encodeURIComponent`, opened with `rel="noopener noreferrer"`.

### Performance & SEO
Lazy-load GSAP/animation code on the landing, code-split dashboard. Stream audio rather than preload. Meta/OG tags on landing; Lighthouse 90+.

### Guardrails
- Original copy; no platform logos beyond generic icons, no brand names in the UI chrome.
- Testimonials marked as illustrative.
- Never post on a user's behalf; don't keep audio after deletion.
- Small typed components, no `any`, visible upload and save errors.
- Done when: a user uploads audio, plays it, writes a post that warns over the limit, schedules it, drags it to another day, shares via prefilled link, marks it published, and analytics reflect it.

Open the builderAll templatesThis palette on its own