## 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/cal-com/cdeba7c5-dd46-4ce9-ba9c-2d344d57a58b-1789060422-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cal-com/cdeba7c5-dd46-4ce9-ba9c-2d344d57a58b-1789060392-full.webp
- Component on Kage: https://kage.design/component/cal-hero

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual identity are. Then apply the principles below to create an original hero for that product rather than reproducing the reference.

## Build a split product hero
Create a polished SaaS landing-page hero with a restrained, editorial feel. The section should explain the product quickly on the left and demonstrate its core workflow through a large interface preview on the right.

### Layout and alignment
- Use a centered, wide container with a very light gray page background and a thin vertical boundary or subtle shell framing the content.
- Place a simple top navigation above the hero: brand mark or wordmark on the left, compact authentication/action controls on the right, and a menu icon at the far edge on narrow screens.
- The hero itself should sit inside a large white panel with a thin neutral border and softly rounded corners.
- Use a two-column grid: approximately 48% for messaging and 52% for the product preview. Keep the left content vertically centered rather than top-aligned.
- Give the left column a readable maximum width. Let the right preview extend close to the panel edges so it feels like a live product surface.
- On mobile, stack the content with messaging first and move the interface preview below it; allow horizontal clipping or controlled overflow only if it preserves usability.

### Typography hierarchy
- Use a modern sans-serif with slightly tight tracking and strong, dark text.
- Add a small pill-shaped announcement or context label above the headline, using understated text and a subtle shadow.
- Set the headline in very large, bold type with compact line height—roughly 64–76px on desktop and 42–52px on mobile. Use two to four short lines and let the product's main outcome drive the wording.
- Follow with a muted supporting paragraph around 17–19px, 1.45 line height, and a width of roughly 34–40rem.
- Keep supporting signup notes small and low contrast so they reassure without competing with the headline.

### Actions
- Provide a prominent dark primary signup or conversion button with a high-contrast label and optional provider icon.
- Add a lighter secondary action below it, using a pale gray fill or outline. Make both controls full-width within the left-column form area, with matching height and radius.
- Include a concise reassurance line beneath the actions, such as a no-commitment or no-payment note, adapted to the user's product.
- Ensure buttons have clear hover, focus, and pressed states without introducing bright accent colours unless they fit the user's brand.

### Product preview
- Build a believable, self-contained preview of the product's central workflow rather than a decorative illustration.
- Use a white card with a fine gray border, approximately 10–14px radius, and restrained internal spacing.
- Include a compact identity/header area, a clear workflow title, short descriptive metadata, segmented options or filters, and a primary data surface such as a calendar, timeline, table, editor, or dashboard appropriate to the product.
- Use neutral grays for inactive content and a single deep dark tone for selected or emphasized states. Selected cells, controls, and dates should be visually obvious but not colorful by default.
- Keep the preview partially cropped by the hero panel when useful; this creates depth and communicates that it is a real application surface.
- Add small realistic details—labels, navigation controls, status indicators, and spacing rhythm—but avoid making the preview more visually dominant than the headline.

### Colour, borders, and depth
- Start with an off-white page background around `#f7f7f7` and a white hero surface around `#ffffff`.
- Use near-black for primary text, approximately `#202020` to `#292929`, and cool gray for secondary text, approximately `#858585` to `#9a9a9a`.
- Use borders around `#e5e5e5` and subtle control fills around `#f1f2f3`.
- Use a near-black primary button around `#262626`, with white text.
- Keep shadows extremely soft: a low-opacity shadow beneath pills, buttons, or the main panel is enough. The design should feel crisp and product-led, not glassy.
- Use consistent radii: 6–8px for controls, 10–14px for cards, and 14–18px for the outer hero panel.

### Spacing and responsive behavior
- Use a generous outer section margin, approximately 32–56px on desktop.
- Maintain 24–32px between the announcement label, headline, paragraph, and action group; use tighter spacing within controls.
- Keep the preview internally spacious, with 20–28px card padding and a clear vertical rhythm.
- At tablet widths, reduce the headline and column gap before stacking. Preserve generous whitespace even when the layout becomes compact.
- Make all interactive elements keyboard accessible, with visible focus rings and touch targets of at least 44px.

## Never
- Never copy the reference site's logo, product name, headline, paragraph, button copy, labels, dates, profile identity, or exact interface content.
- Never reuse its calendar, meeting card, avatar, or any other specific imagery or illustration.
- Never recreate the reference pixel-for-pixel; derive a new composition from the split-layout, product-preview, and conversion principles.
- Never use decorative imagery when a functional product preview can communicate the user's value more clearly.
- Never let the preview overpower the product message or obscure the primary conversion path.