## Reference images

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

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/hyperframes-studio-desktop/1316fe77-e26f-4d52-97ca-5ed88a5ce9c1-1791266575-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hyperframes-studio-desktop/1316fe77-e26f-4d52-97ca-5ed88a5ce9c1-1791266531375-full.webp
- Component on Kage: https://kage.design/component/hyperframes-studio-desktop-hero

## Before you start
Ask what the user's product does, who it is for, what action matters most, and what brand direction to use. Then create an original hero using the rules below rather than copying the reference.

Build a desktop-first hero with a two-column introductory row: place a large, tightly stacked product headline on the left and a short positioning statement on the right. Beneath the headline, place one high-contrast primary download or signup CTA, followed by a small credibility/supporting line. After the intro, include a wide product demonstration visual or video that spans nearly the content width and is clearly the hero's proof point.

Use a warm paper-like background around `#f7f1df` with near-black typography around `#11110d`; choose the user's own accent for the primary CTA, with a dark fill and light text as a strong default. Use an expressive sans-serif or display face for the headline at roughly 64–76px desktop size, tight line-height around 0.9–1.0, and a restrained 20–24px supporting statement. Keep the content in a centered max-width around 828px with 36px side gutters. Give the video a large 30–34px corner radius, 16:9-ish aspect ratio, object-cover treatment, and subtle controls positioned inside the upper-right corner. Separate the intro from the visual with intentional vertical rhythm; keep the hero CTA visually obvious but not oversized.

If video is unavailable, use a product UI preview or motion placeholder that communicates the workflow. Include accessible controls, a descriptive label, keyboard focus states, and responsive behavior that stacks the intro columns on narrow screens.

Never:
- Use HyperFrames, Studio, or any reference copy, logo, product name, or exact CTA text
- Reuse the reference video's imagery, people, screens, or composition
- Add unrelated decorative illustrations or let the visual overpower the product message