## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mock-magic-video-presets/201a35ef-5103-4614-9439-92b73face5de-1789106517952-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mock-magic-video-presets/201a35ef-5103-4614-9439-92b73face5de-1789106514777.webp
- Design on Kage: https://kage.design/designs/mock-magic-video-presets-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets (name, colours, type) they already have, and wait for the answers. Everything below is applied to that product, not to the reference.

## Page structure
1. **Navbar** — slim dark bar: logo + wordmark left; right-aligned links (Pricing, Updates, Sign in) and one white filled CTA button.
2. **Hero (split)** — left column: two-line bold headline, short gray sub-paragraph explaining the free/Paid split, one white CTA button, and a small row of three line icons (desktop, phone, watch) hinting at device coverage. Right column: a large device mockup bleeding off the right/bottom edge of the section so the artwork gets cropped.
3. **Product screenshot** — full-width capture of the app's light-mode editor (canvas with media preview + play button, right-hand settings panel with template/device/orientation/media controls), set as a rounded panel that inverts the dark page.
4. **Editor intro** — large centred heading ("Meet Our Simple Editor") directly under the screenshot, acting as the transition into features.
5. **Feature row** — thin top divider, then three equal columns, each with a small line icon, bold title, and one-sentence gray description; one column carries a small orange "PRO" badge next to its title.
6. **FAQ** — centred section heading, then a single-column accordion (~10 rows) separated by hairline borders; first item expanded by default with a chevron indicator, remaining rows collapsed.
7. **Pricing** — centred "Pricing" heading, then two rounded dark cards side by side (Free and Pro with a monthly price). Each card: plan name, price, checklist with green check icons (locked features rendered dimmed with muted checks on the free card), and one white CTA button pinned at the bottom.
8. **Footer** — four-column layout: left column with logo, one-line blurb and an email input + Subscribe button; then Product, a long SEO list of tool pages, Use cases, and About/legal links; bottom line with copyright and a small regional note.

## Design language
- **Canvas and contrast**: near-black page background (#0a0a0a–#111111) with cards one step lighter (#1a1a1a) and hairline borders (#2a2a2a). Keep chrome monochrome; let screenshots and media be the only saturated elements.
- **Type hierarchy**: large extra-bold white headings (hero can break over two lines), ~16px white/gray card and FAQ titles, and ~14–15px medium-gray (#a3a3a3) body copy. All sans-serif, tight leading on headings, generous line-height on body.
- **Colour rules**: white (#ffffff) for headings and primary buttons, gray for secondary text, one green accent (#22c55e) reserved exclusively for check icons, and a small warm accent (orange) only for tiny badges like "PRO". If the product imagery needs a palette, use warm gradients (orange → amber) inside media, never in UI chrome.
- **Buttons**: a single inverse style — white fill, black text, ~8px radius, no gradient or shadow. Secondary actions are plain text links in gray.
- **Borders and radius**: sections separated by 1px hairlines rather than heavy cards; feature lists sit on hairline dividers; screenshot and pricing cards get ~12–16px radius with no or very subtle shadows.
- **Density and rhythm down the page**: start airy (hero is 60/40 split with cropped imagery), tighten into a dense three-column feature row, breathe again with a centred narrow-column FAQ (~640px), widen for two pricing cards, then go densest in the footer's multi-column link lists. Alternate left-aligned, full-width, and centred section layouts to keep the long scroll varied.
- **Imagery treatment**: show the actual product UI as a light panel on the dark page for maximum contrast; crop device mockups at section edges to imply the tool's output rather than decorating with stock art.
- **Motion**: keep it minimal — accordion rows expand/collapse with a chevron rotation; hover states only for links and buttons (slight opacity or background shift).

## Never
- Never reuse the Mock Magic name, logo, wordmark, or its FAQ/pricing copy.
- Never copy the painterly phone artwork, the orange editor screenshot, or its exact control labels.
- Never reproduce the specific mockup-tool link lists or footer categories from the reference.
- Never present the output as Mock Magic or imply affiliation with it.