Cadenza

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

Lato stays for its humanist headlines, and Karla is a grotesk with a little more character than Inter, suiting the warm paper-toned workspace.

• LatoHeadings: headlines 40px 700 at -2.4px
• KarlaBody: body 16px, UI 13px

Who it is for

• Marketing and content teams
• Solo creators
• Social media managers juggling platforms
• Founders building a personal brand

Layout

1. Warm off-white nav: bold serif-ish wordmark left, 'Sign in' text and orange pill 'Try demo' right
2. Split hero: large two-line headline with an em dash, gray subcopy, orange pill + text button left; right a browser-framed Idea Board mock (columns Unassigned, Inspiration, To-do, In Progress with cards, thumbnails and colored pillar tags)
3. Full-width orange band with pill tab switcher (Idea Board / Schedule / Compose / Track) + pause, section headline and animated product frame
4. Testimonial cards carousel with progress pill and pause
5. Closing CTA with orange pill
6. Footer centered
7. App: collapsible sidebar (Create, Calendar), idea board, calendar week/month/list, composer modal, metrics in list view

Palette

Warm, energetic, organized, editorial, practical. A paper-toned workspace with a confident orange brand accent.

• background (warm gray)#f1f0ec
• card#ffffff
• text#1e1c17
• primary orange-red#c43e1d
• pillar purple#9333ea
• pillar green#15803d
• border#d9d6cf

Every checked pair, measured again

As vibld’s tokens

The palette on the 15+ color tokens vibld styles a project with, each text color 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

Lato 700, 40px with tight -2.4px tracking

Body

Karla 400 16px; 13px UI

Humanist Lato headlines, compressed with negative tracking, over a neutral Karla body. 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

Split hero in a 1216px container; square-ish product frames (0 radius tokens) contrasted with pill buttons; cards 12px radius; generous vertical rhythm with full-bleed color band.

Product UI mocks with realistic post thumbnails (office, laptop and team photos) inside cards; no hero photography.

Components

• Split hero with product frame
• Orange tab band demo with pause
• Five-column idea board (Unassigned, Inspiration, To-do, In Progress, Repurpose)
• Idea card with thumbnail, excerpt and pillar tag
• Composer modal (idea vs schedule modes)
• Platform multi-select
• Media attach
• Date/time scheduler
• Calendar week/month/list views
• Pillar and platform filters
• Engagement metrics columns (likes, views, shares, reach)
• Peekable collapsible sidebar
• Testimonial carousel
• Demo mode

Interactions

• Drag ideas between columns
• Open composer from any card or date
• Progressive disclosure fields per mode
• Switch calendar views
• Filter by pillar/platform
• Drag a scheduled post to a new date
• Sidebar collapse/pin/peek on hover
• Auto-advancing landing tabs with pause

Data

• Workspace{id, name}
• Member{workspace_id, user_id, role}
• Pillar{id, workspace_id, name, color}
• Post{id, workspace_id, title, caption, status: idea|scheduled|published, column: unassigned|inspiration|todo|in_progress|repurpose, pillar_id, platforms[], scheduled_at, media[], created_by}
• Metric{post_id, platform, likes, comments, shares, views, reach, captured_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 color 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, labeled 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 **Cadenza**, a content planning workspace for marketing teams and solo creators. Ideas start on a five-column board, move toward ready-to-post, get written and scheduled for several social platforms from one composer, and appear on a calendar organized by content pillar. After publishing, engagement numbers sit next to each post so the team can see what works.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Dialog, Popover, Calendar, Tabs, Command), lucide-react. dnd-kit for the board and calendar rescheduling, TanStack Query, react-hook-form + zod for the composer, date-fns for calendar maths, Framer Motion for the landing tab demo and modal transitions, Recharts for small metric sparklines. Supabase: Auth (email + Google), Postgres, Storage for media. Publishing to platforms is out of scope; mark posts published manually or via a future integration.

### Pages & layout
1. **Landing**: warm off-white nav with orange pill "Try demo"; split hero (large headline with an em dash, subcopy, orange pill and text link) with a browser-framed board mock; a full-width orange band with pill tabs (Board, Schedule, Compose, Track) that auto-advance with pause; testimonial cards carousel (illustrative); closing CTA; centered footer.
2. **App shell**: sidebar that collapses, pins or peeks on hover (Create, Calendar, Pillars, Settings).
3. **Idea board**: columns Unassigned, Inspiration, To-do, In progress, Repurpose; cards with optional thumbnail, title, excerpt, pillar tag; "New idea".
4. **Composer modal**: toggle Idea / Schedule; title, caption with per-platform character hints, media attach, pillar, platforms multi-select, date/time (schedule mode only).
5. **Calendar**: Week, Month and List views; filters for pillar and platform; list view shows likes, comments, shares, views and reach.
6. **Settings**: pillars (name, color), members.
7. **/demo**: seeded workspace, no sign-in.

### Design system
Light, warm. Tokens: `--background: #f1f0ec`, `--card: #ffffff`, `--foreground: #1e1c17`, `--muted-foreground: #6b675e`, `--primary: #c43e1d`, `--primary-foreground: #ffffff`, `--border: #d9d6cf`; pillar colors purple `#9333ea`, green `#15803d`, blue `#2563eb`, orange `#c2410c`. Fonts: Lato 700 for headings (-0.05em tracking), Karla 400/500 for UI. Scale 13/16/20/32/40. Radius: 0 for frames and panels, 12px cards, pills for buttons and tags. Shadow on frames `0 30px 60px rgb(30 28 23 / .12)`. Motion 200ms; tabs every 6s. Add `--input-border: #8f8a80` for inputs and tag outlines.

### Components & interactions
Idea card: idle, hover, dragging, selected. Composer: fields appear progressively; Save disabled until valid; unsaved-changes guard on close. Calendar: drag to reschedule (with undo toast), click empty slot to compose, overflow "+3 more" popover in month view. Empty board/calendar states with a single clear action. Errors show inline with retry.

### Data & state
Workspace, Member, Pillar, Post(status, column, pillar_id, platforms[], scheduled_at, media[]), Metric(per platform snapshot). Filters and view in URL params. Sidebar mode in localStorage (guarded). Seed ~20 fictional posts across four pillars with royalty-free thumbnails.

### Accessibility
Board and calendar support keyboard moves (dnd-kit keyboard sensor plus "Move to…" and date picker alternatives). The primary was deepened to `#c43e1d`, so white text passes 4.5:1 at every size. Pillar tags include text. Carousel and tab demo pause on focus and under reduced motion. Composer fields have labels and error descriptions; media requires alt text. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #1e1c17 on #f1f0ec = 14.93:1; body text #1e1c17 on #ffffff = 17.02:1; muted text #6b675e on #f1f0ec = 4.94:1; white text #ffffff on #c43e1d = 5.18:1.

### Security
RLS by workspace membership for posts, pillars, metrics and media; only members can edit, viewers read. Media uploads: images/video allow-list, size caps (10 MB images, 200 MB video), private bucket with signed URLs. Validate composer input with zod client-side and constraints server-side (caption length, valid platforms). Sanitize any rich captions. If platform integrations are added later, keep OAuth tokens encrypted and server-only.

### Performance & SEO
Lazy-load calendar views and media; thumbnail renditions for cards. Landing meta/OG; app and demo `noindex`.

### Guardrails
- Original copy; fictional brands and illustrative testimonials; use generic platform labels or icons within their brand guidelines.
- Typed components, no `any`, visible errors.
- Don't store unnecessary audience data.
- Done when: ideas drag across columns; the composer schedules a post that appears on week and month views; rescheduling by drag persists; pillar filters work; list view shows metrics; /demo works signed out.

Open the builderAll templatesThis palette on its own