Rushcut

Who it is for

• Solo course creators and educators
• Video and content-creation teachers
• Creators building an email list
• Agencies setting up creator storefronts

Layout

1. Centered hero: circular icon badge, three-line headline, subcopy, inline email input + pill 'Try a Free Lesson' button
2. Two-column course grid: large rounded image cards with 'New' pill, title, instructor, price
3. About the Instructor: round avatar left, three bio paragraphs right
4. One Time Purchase card: dark raised panel with centered heading, refund note, checklist of inclusions, strikethrough old price and large new price
5. FAQ grid of question/answer pairs
6. Minimal footer with social links
7. Product detail pages and a social-proof/testimonials page

Palette

Sleek, premium, minimal, confident, cinematic. A black stage where colorful course thumbnails pop like film stills.

• background#000000
• card#121212
• text#ffffff
• muted text#a3a3a3
• secondary/borders#262626
• border line#333333

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

System UI sans, weight 500, 40px hero with -1px tracking, centered (the system face is not on Google Fonts; a vibld project loads Inter)

Body

System sans 16px, muted gray for supporting text (the system face is not on Google Fonts; a vibld project loads Inter)

Monochrome system type keeps everything neutral so the course thumbnails provide all the color.

Spacing and imagery

Generous vertical rhythm (120px+ between sections), ~1150px container, 12px card radius, fully rounded pill buttons and inputs.

Moody, high-saturation production photography (edit bays, studio lights, cameras) as course covers inside rounded cards; one circular instructor portrait.

Components

• Icon badge
• Email capture with pill button
• Course card with 'New' badge and price
• Instructor bio block with avatar
• Pricing card with strikethrough price
• Inclusion checklist
• FAQ grid
• Course detail page
• Testimonials page
• Footer social links

Interactions

• Card hover lift with image scale
• Email submit states with toast
• Buy button linking to hosted checkout
• Smooth scroll to pricing
• Responsive collapse of the grid to one column

Data

• Course{slug, title, instructor, price, compareAtPrice, cover, badge, lessons[], description}
• Lesson{title, duration, freePreview}
• FAQ{question, answer}
• Testimonial{name, role, quote} (sample)
• Lead{email, 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 **Rushcut**, a one-person storefront where a fictional filmmaker sells four self-paced video courses. Audience: aspiring video creators who arrive from social media. The page must capture an email in exchange for a free lesson, show the course catalog, build trust through an instructor bio, and push to a simple one-time purchase.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Card, Badge, Accordion, Button, Input), lucide-react. react-hook-form + zod for the email form, Sonner for confirmation toasts, React Router for course detail and testimonials pages. No backend beyond a small serverless function (or Supabase Edge Function + `leads` table) to store emails; purchases link out to hosted checkout.

### Pages & layout
1. **Home** – centered hero with a circular clapperboard icon badge, a three-line headline naming what you teach, one line of subcopy, and an inline email input + white pill button ("Get a free lesson"). Two-column grid of four course cards (cover image in a rounded inner frame, optional "New" pill, title, instructor, price). "About the instructor" with round avatar and three short paragraphs. Pricing card: raised dark panel, heading, refund promise, checklist (lifetime access, updates, project files) and a large price with a struck-through original. FAQ as a two-column grid. Footer with social icons.
2. **Course detail** – cover, outcome bullets, lesson list with durations and free-preview markers, price box, buy button.
3. **Student stories** – grid of sample quotes clearly labeled as examples.

### Design system
- Tokens: `--background: #000000`, `--card: #121212`, `--foreground: #ffffff`, `--muted-foreground: #a3a3a3`, `--secondary: #262626`, `--border: #333333` (decorative), `--input-border: #737373`, `--primary: #ffffff`, `--primary-foreground: #000000`, `--radius: 0.75rem`.
- Fonts: Inter (or Geist) for everything; weights 400/500/700. Scale: 13 / 14 / 16 / 18 / 24 / 32 / 40 / 64 (price).
- Spacing: 8px base; sections 96–128px apart; container 1152px; card padding 12px around images, 24px text.
- Pills: `rounded-full` for buttons and inputs; subtle 1px `#333` borders; soft white glow shadow on the icon badge only.
- Motion: 200ms ease-out hover lifts (translateY -2px, image scale 1.03).

### Components & interactions
Email capture (idle, invalid with inline message, submitting spinner, success toast, server error), course card (default/hover/focus-visible), "New" badge, strikethrough price component, checklist item, buy button (default/hover/disabled when checkout URL missing), FAQ accordion on mobile vs. open grid on desktop, empty state if no courses are published.

### Data & state
`Course{slug,title,price,compareAtPrice,cover,badge?,summary,lessons[]}`, `Lesson{title,minutes,isPreview}`, `Faq{q,a}`, `Lead{email,createdAt}`. Courses and FAQs live in typed content files. Seed four fictional courses (color grading, cinematography basics, home studio setup, aerial footage) with prices between $19 and $49, and a fictional instructor with a placeholder portrait.

### Accessibility
White on black (21:1) and `#a3a3a3` on black (8.3:1) and on `#121212` cards (7.4:1) pass AA; keep muted text no darker than `#8c8c8c` (5.6:1 on cards). The pill email input uses `--input-border: #737373` (4.4:1 on black) since the `#333` border is decorative. The email input has a visible label (can be visually hidden) and `autocomplete="email"`. The struck-through price must be announced ("Original price $100, now $49") via visually hidden text. Cards are single links with the course title as accessible name. Focus rings in white with 2px offset. Honor reduced motion on hover transforms.
Verified contrast: body text on black background #ffffff on #000000 = 21.0:1; muted text on black background #a3a3a3 on #000000 = 8.33:1; muted text on card #a3a3a3 on #121212 = 7.43:1; body text on card #ffffff on #121212 = 18.73:1; label on white primary pill button #000000 on #ffffff = 21.0:1; pill input border on black #737373 on #000000 = 4.43:1; white focus ring on black #ffffff on #000000 = 21.0:1.

### Security
Validate email with zod on the client and again in the function; add a honeypot field and per-IP rate limiting. Store only the email and timestamp; RLS allows anon insert only. Payments via hosted checkout links; never collect card data. No secret keys in the client. External links use `rel="noopener noreferrer"`.

### Performance & SEO
Serve course covers as responsive WebP with explicit sizes and lazy loading below the fold. Title and meta per page; Course JSON-LD on detail pages; OG image with the headline. Target LCP under 2.5s and Lighthouse 95+.

### Guardrails
- Original copy and placeholder imagery; no real creator names or brands.
- Testimonials are labeled sample content, never presented as real.
- Keep components small and typed, no `any`; show visible errors for failed submissions.
- Done when: email capture validates and confirms; four courses render in two columns and one on mobile; the pricing card announces both prices; course detail routes work; Lighthouse accessibility is 95+.

Open the builderAll templatesThis palette on its own