## 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/labs-winszn-xyz/4df5b54d-904b-4cf9-bf65-93181d626a5e-1789097619-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/labs-winszn-xyz/4df5b54d-904b-4cf9-bf65-93181d626a5e-1789097588315-full.webp
- Component on Kage: https://kage.design/component/labs-winszn-hero

# Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, and conversion goal the page should express. Then apply the principles below to create an original hero for that product—do not reproduce the reference literally.

## Build an editorial studio hero
Create a responsive above-the-fold hero for a modern digital product, agency, or software company. The composition should feel confident, tactile, and slightly editorial: a clear value proposition on the left, with a structured proof panel on the right.

### Layout and alignment
- Use a warm off-white page background, approximately `#F5F2EA`.
- Include a restrained top navigation inside a wide max-width container of roughly 1140–1240px. Keep the brand mark/name left, small uppercase navigation centered or near-center, and a prominent project/contact CTA on the right.
- Below the navigation, use a two-column hero grid. The left column should be approximately 52–56% wide; the right proof panel should occupy the remaining width.
- Align the main headline and supporting content to the same left edge as the navigation brand.
- Add a small announcement/status pill above the headline. It should be an outlined capsule with compact monospace or letter-spaced text and, optionally, a small filled circular arrow control.
- Use a very large headline, ideally 64–78px on desktop with tight line-height around 0.94–1.02. Let it wrap into three or four intentional lines, but make the wording specific to the user’s product.
- Beneath the headline, place a black primary CTA beside a short supporting paragraph. The CTA should remain visually compact while the paragraph is narrower and easier to scan.
- Add one tactile product-related visual near the lower left of the hero. It may be a generated 3D object, abstract interface fragment, or product artifact chosen for the user’s brand; it should overlap or sit close to the content without competing with the headline.
- On the right, create a large pale sage/grey rounded container, approximately `#E7E8DC`, with generous padding and an organic or subtly irregular outer silhouette if appropriate. Avoid making the shape perfectly generic if a more natural contour suits the brand.
- Inside it, stack two cards with consistent horizontal insets: a dominant upper feature/metric card and a shorter lower proof/work card.
- Maintain generous negative space around the hero. On desktop the hero should feel spacious rather than densely packed; on mobile, collapse to one column and move the proof panel below the main CTA/content.

### Typography hierarchy
- Use a bold contemporary grotesk or geometric sans for the headline, with near-black text around `#11100F`.
- Use a smaller neutral sans for body copy, approximately 15–17px with 1.35–1.5 line-height.
- Use uppercase labels, navigation, metadata, and buttons with noticeable tracking, around `0.16–0.24em`.
- Keep headline weight strong (700–800), body weight regular (400–500), and button labels semibold or bold.
- Keep the number of type styles limited. Contrast should come mainly from scale, weight, colour, and spacing.

### Colour and surfaces
- Base: warm off-white `#F5F2EA`.
- Primary text and dark card: near-black `#11100F`.
- Accent card and selected controls: vivid orange-red in the range `#F04408` to `#F45108`.
- Secondary panel: pale desaturated sage `#E7E8DC`.
- Supporting borders: muted warm beige/orange around `#D9BFB0` or a low-opacity version of the accent.
- Use the orange selectively for emphasis, status, active states, and important proof—not for every interactive element.

### Cards, borders, and radius
- Use large rounded corners on the right-side container and cards, approximately 28–42px, with responsive reduction on small screens.
- The upper card should have a strong orange fill, dark text, a large statement or metric, and a very simple data signal such as a line chart, graph, progress trace, or abstract system diagram.
- The lower card should use the dark surface, light text, a concise proof statement, small metadata, and a secondary outlined button.
- Use thin, low-contrast borders around pills and outlined buttons. Avoid heavy drop shadows; rely on colour blocks, spacing, and shape.
- The primary CTA should be a black rounded pill with white uppercase text and a directional arrow. Include a subtle hover transition such as a small horizontal arrow movement or slight colour shift.

### Interaction and responsive behaviour
- Navigation links and buttons should have clear hover, focus, and keyboard-visible states.
- The announcement pill may animate its arrow subtly, but do not introduce distracting motion.
- On hover, proof cards can lift by a few pixels or shift their internal arrow/graph accent; preserve accessibility and respect `prefers-reduced-motion`.
- Ensure the hero remains readable at tablet widths: reduce headline size, tighten card padding, and let the right panel become full-width below the left column.
- On mobile, keep the headline around 42–56px depending on viewport width, prevent horizontal overflow, and stack the CTA and body copy cleanly.
- Use semantic HTML, an accessible heading hierarchy, descriptive button labels, and sufficient contrast.

## Never
- Never use the reference’s logos, brand name, product names, navigation labels, exact copy, statistics, or industry-specific claims.
- Never copy the reference illustration, hand, device, chart, or any other imagery; create a new visual language appropriate to the user’s product.
- Never reproduce the exact card text, layout measurements, line breaks, or decorative silhouette.
- Never add stock imagery or illustrations unless they are original, clearly generic, and relevant to the user’s brand.
- Never sacrifice legibility or responsive behaviour in order to preserve the desktop composition.