## 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/attio-com/853806da-b35e-493c-a2ae-f3b42d8e3fbb-1789060457-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/attio-com/853806da-b35e-493c-a2ae-f3b42d8e3fbb-1789060424-full.webp
- Component on Kage: https://kage.design/component/attio-hero

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual system are. Then apply the principles below to create an original hero for that product—not a copy of the reference.

## Build this section
Create a polished SaaS landing-page hero with a centered content stack and a large product-interface preview emerging from the lower portion of the section. The section should feel calm, premium, highly legible, and conversion-oriented.

### Structure and layout
- Use a full-width hero with a mostly white upper canvas and a very subtle cool lavender-blue atmospheric fade toward the lower third.
- Place the content in a centered column with a comfortable maximum width of roughly 900–1050px.
- Add a compact announcement or editorial link above the headline. Render it as a small rounded capsule with a thin border, short text, and a trailing arrow or chevron.
- Follow it with a single high-impact headline. Keep it to one or two lines on desktop, centered, with generous breathing room around it.
- Add a concise supporting paragraph below the headline. Constrain it to approximately 520–620px so it reads as two or three balanced lines.
- Place two adjacent calls to action below the paragraph: a quiet secondary action and a dark, high-contrast primary action.
- Anchor a large, wide product UI preview beneath the CTA row. Let the preview overlap or extend below the hero’s atmospheric background so it feels like the interface is entering the page.
- On mobile, stack the CTAs, reduce headline size, keep the announcement readable, and make the product preview fluid with intentional cropping rather than shrinking every detail too far.

### Typography
- Use a modern sans-serif with a neutral, highly legible appearance.
- Headline: bold or semibold, approximately 60–72px on desktop, tight line-height around 0.98–1.05, slight negative tracking; scale to roughly 40–48px on mobile.
- Supporting text: 18–20px desktop, 16–18px mobile, line-height around 1.3–1.45, medium-gray colour.
- Announcement and buttons: 13–15px, medium weight, with clear contrast and comfortable vertical alignment.
- Keep the headline visually dominant; avoid decorative type treatments that compete with the product message.

### Colour
- Main background: near-white, approximately #FFFFFF or #FCFCFB.
- Primary text: near-black, approximately #17191B.
- Supporting text: cool gray, approximately #70747A.
- Borders: very light neutral gray, approximately #E3E5E7.
- Primary button: charcoal or black, approximately #24272B, with white text.
- Secondary button: white or translucent white with a subtle gray border.
- Atmospheric lower background: extremely soft blue-lavender tones, approximately #F3F6FF to #E8EEFF; keep the gradient understated and low contrast.

### Borders, radius, and depth
- Use pill-shaped announcement and button controls with radii around 9–999px depending on their height.
- Use a large product-preview radius around 14–20px with a fine border and a soft, diffuse shadow.
- Keep shadows subtle: broad, low-opacity cool gray rather than a dark drop shadow.
- Product UI details should use hairline dividers, modest 6–10px inner radii, and restrained elevation.

### Product preview treatment
- Show a believable but generic desktop application window: a slim top bar, left navigation rail, main workspace, cards or rows, and one prominent input or action area.
- Use muted grays and small accents to make the interface feel functional while keeping it subordinate to the headline.
- Render the preview large enough that it is recognizable as software, but crop its lower edge to create anticipation for the next section.
- If adding a support/chat affordance, position it as a small floating control near the lower-right area of the hero; make it secondary and unobtrusive.

### Interaction and accessibility
- Announcement link, navigation controls, and CTAs must have clear hover, focus, and pressed states.
- On hover, slightly deepen the primary button, add a restrained border/background shift to the secondary button, and move the announcement arrow by a few pixels.
- Preserve visible keyboard focus rings with sufficient contrast.
- Use semantic heading and button/link elements, responsive layout rules, alt text for any UI preview image, and respect reduced-motion preferences.

## Never
- Never use the reference company’s logo, product name, brand marks, or exact navigation labels.
- Never reuse the reference headline, announcement copy, supporting copy, or CTA wording.
- Never copy the reference product screenshot, data, icons, customer names, interface labels, or chat content.
- Never include illustrations or imagery from the reference; create an original, generic product preview suited to the user's product.
- Never make the gradient, mockup, or decorative details more visually dominant than the product’s message and CTAs.