Template
Rushcut
A single-page dark storefront for an individual creator selling a small catalog of video courses. It combines a free-lesson email capture, a two-column product grid, an instructor bio, a one-time-purchase pricing card and an FAQ, so a creator can sell directly without a course platform.
Video creator course shop · Website · Small business site · static site
A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.
Add app screens
Pick up to 6 screens, such as a dashboard, settings or an empty state. Each is built in this design’s own palette and typefaces, with its states and guardrails.
Start from this templateRead the build prompt
Typefaces
Roboto is a true system UI face, so the monochrome black stage stays neutral and lets the course thumbnails bring the color.
- RobotoHeadings: hero 40px 500 at -1px, price 64px
- RobotoBody: body 16px, muted gray
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
- Centered hero: circular icon badge, three-line headline, subcopy, inline email input + pill 'Try a Free Lesson' button
- Two-column course grid: large rounded image cards with 'New' pill, title, instructor, price
- About the Instructor: round avatar left, three bio paragraphs right
- One Time Purchase card: dark raised panel with centered heading, refund note, checklist of inclusions, strikethrough old price and large new price
- FAQ grid of question/answer pairs
- Minimal footer with social links
- 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
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on black background | 21.00:1 | 4.5:1 |
| Aa | muted text on black background | 8.33:1 | 4.5:1 |
| Aa | muted text on card | 7.43:1 | 4.5:1 |
| Aa | body text on card | 18.73:1 | 4.5:1 |
| Aa | label on white primary pill button | 21.00:1 | 4.5:1 |
| pill input border on black | 4.43:1 | 3:1 | |
| white focus ring on black | 21.00:1 | 3:1 | |
| Aa | darkest allowed muted text on card | 5.57:1 | 4.5:1 |
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
- System UI sans, weight 500, 40px hero with -1px tracking, centered (the system face is not on Google Fonts; a vibld project loads Roboto)
- Body
- System sans 16px, muted gray for supporting text (the system face is not on Google Fonts; a vibld project loads Roboto)
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.
The baseline
### 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 **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: Roboto 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+.