## 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/flowo/46dcd8ed-31a5-4fb1-ab3b-3d3a2b966cfb-1791439600-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/flowo/46dcd8ed-31a5-4fb1-ab3b-3d3a2b966cfb-1791439391035-full.webp
- Component on Kage: https://kage.design/component/flowo-hero

## Before you start
Ask what the user's product is, what action matters most, and what brand mood the hero should create. Apply these principles to that product and create original content and visuals.

Build an image-led product hero that communicates one memorable promise in a few short lines. Place the headline and primary actions in a readable content column while a soft, human visual or product demonstration provides emotional context. Include a secondary text link and two or three compact trust points beneath the main actions when useful.

- Use a two-column desktop composition inside a 605px-style responsive canvas; stack the content and visual on mobile.
- Align all text to one clear left edge and keep the text measure around 260–380px.
- Use a bold 42–64px headline with tight line-height, 16–18px supporting text, and 12–14px utility copy.
- Use warm off-white (`#FAFAF8`), black (`#111111`), and a deep blue-green accent (`#073847`) for primary buttons.
- Make CTAs compact rounded pills, around 40–48px high, with 12–16px horizontal padding; use a quiet outlined or text secondary action.
- Let the visual have soft edges, natural lighting, and enough negative space that the text remains dominant.
- Ensure buttons have hover, pressed, focus, and reduced-motion states.

Never use logos, product names, copy, illustrations, or imagery from the reference.