## 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/beehiiv-com/23eb8ac3-d7aa-449f-95ad-92bcd925810d-1789067453-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/beehiiv-com/23eb8ac3-d7aa-449f-95ad-92bcd925810d-1789067406-full.webp
- Component on Kage: https://kage.design/component/beehiiv-hero

## Before you start
Ask me what my product is, who it is for, and what my brand personality and visual identity are. Then apply the principles below to create an original hero section for my product—not a copy of the reference.

## Design language

Build a dark, conversion-focused SaaS hero with a restrained editorial feel and a visually rich product-preview area.

### Layout and alignment
- Use a full-width, near-black hero surface with a centered max-width container of approximately 1024–1180px.
- Create a two-column desktop layout: a text column around 45–50% wide on the left and a visual/product-preview column on the right.
- Vertically center both columns, with generous top and bottom breathing room. On smaller screens, stack the visual below the text and keep the text left-aligned.
- Keep the main text block aligned to one consistent vertical edge. Limit the paragraph width to roughly 440–500px for comfortable reading.
- Place primary conversion actions directly below the supporting paragraph, followed by a short reassurance line.
- Add a compact social-proof row between the paragraph and actions or immediately above the actions. It can include rating symbols, a small cluster of avatars or abstract user markers, and a customer count.

### Typography hierarchy
- Use a bold, condensed or tightly tracked display face for the headline, with uppercase styling and a line height around 0.88–0.98.
- Make the headline very large on desktop, approximately 56–72px, and scale it responsively to around 40–52px on mobile.
- Break the headline into several short lines to create a poster-like rhythm. Keep most lines in an off-white colour and reserve a vivid gradient treatment for the final line or key phrase.
- Use a neutral sans-serif for body copy and navigation. Set body text around 18–20px with a line height near 1.45.
- Use compact, medium-weight button labels and small supporting text around 13–15px.

### Colour
- Use a deep navy-black background close to `#07051A` or `#08061D`.
- Use warm white for primary text, approximately `#F7F7F4`, with muted lavender-grey for secondary copy, approximately `#B8B5C9`.
- Apply a saturated pink-to-purple gradient to the emphasized headline phrase, approximately `#FF78C8` through `#A86BFF`.
- Use a vivid indigo or blue-violet for the primary action, approximately `#3944D8` or `#4A43D8`.
- Keep the visual preview darker than the page but add electric blue, violet, magenta, and cyan accents so it appears luminous without overpowering the headline.
- Ensure all text and controls meet accessible contrast levels.

### Controls and supporting UI
- Provide two adjacent signup or conversion buttons on desktop, wrapping or stacking on narrow screens.
- Make the primary button filled with a blue-violet background and a small neutral icon area if the product naturally supports a third-party signup method. Keep this generic and use an appropriate icon only if relevant.
- Make the secondary button transparent or near-black with a 1px muted border.
- Use button heights around 48–52px, horizontal padding around 18–22px, and a radius of approximately 6–8px.
- Add subtle hover transitions: slightly brighten the fill, raise the button by 1–2px, and increase border contrast. Keep focus states clearly visible.

### Product preview composition
- Create an abstract, non-branded product interface preview on the right: several overlapping dark glass-like panels, charts, metric cards, notification cards, and small floating callouts.
- Angle or offset the panels slightly to create depth, but preserve enough legibility that the visual communicates “working software.”
- Use soft blue-violet glows, restrained shadows, thin translucent borders, and subtle blur. Avoid making the preview look like a literal screenshot.
- Let some cards float outside the main dashboard frame to create a dynamic collage. Use small labels, bars, charts, or placeholder UI marks rather than meaningful copied content.
- Keep the product visual decorative and secondary: the headline and signup actions should remain the strongest focal points.

### Navigation and page context
- If a navigation bar is included above the hero, use the same dark background with a thin, low-contrast divider beneath it.
- Keep navigation compact and horizontally arranged on desktop, with a simple menu trigger on mobile.
- Use one outlined nav action and one light filled action to establish the conversion hierarchy, while avoiding visual competition with the hero.

### Responsive behaviour
- At tablet widths, reduce the headline size and gap between columns before stacking.
- At mobile widths, stack content in the order: headline, paragraph, proof, actions, reassurance, product preview.
- Make buttons full width or equal-width when stacked. Prevent the decorative preview from causing horizontal overflow.
- Preserve the headline’s line rhythm, but allow natural wrapping for the user’s product-specific copy.

## Never
- Never use the reference company’s logo, product name, navigation labels, headline, paragraph, rating text, customer numbers, or button copy.
- Never copy the exact dashboard composition, notification labels, chart values, interface text, or decorative arrangement from the reference.
- Never reuse the reference illustration, screenshot, imagery, avatars, or branded icons.
- Never assume the user’s product is a newsletter, publishing, podcast, or community platform; adapt the message and interface preview to the user’s product.
- Never sacrifice readability or accessibility for the oversized type, gradients, glows, or layered visual effects.