oku.club
Design analysis
The hero pairs a large editorial headline and two conversion actions with a monochrome editorial illustration extending across the right side.
Prompt preview
## 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/oku-club/e710a983-c1d6-4177-b014-2738acd07d09-1789146242-1.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/oku-club/e710a983-c1d6-4177-b014-2738acd07d09-1789146208773-full.webp - Component on Kage: https://kage.design/component/oku-club-hero ## Before you start Ask what the user's product is, who it serves, and what action the hero should drive. Ask about the brand voice and visual identity, then apply these principles to the user's product. Create an airy two-column hero directly beneath the navigation. Place a short, high-contrast editorial headline and supporting action cluster on the left, with a distinctive monochrome or lightly textured visual on the right that can overlap the section edge. Keep the copy width narrow, use a large serif display heading with compact line-height, and place a dark primary CTA beside an app/store-style secondary CTA. Add a small sign-in reassurance beneath the buttons. Use abundant white space and avoid adding unrelated decorative UI. Approximate design language: white `#ffffff`, near-black `#070707`, soft pink accent `#f15b82`, heading around 40–48px with 1.05 line-height, body 13–15px, 32px CTA gap, 64px side padding, subtle underlines for text links. On mobile, stack text above visual and keep the CTA row usable. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage