## 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/workid-ai/2843b616-ed30-482d-adaf-40c736e4842a-1789106673-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/workid-ai/2843b616-ed30-482d-adaf-40c736e4842a-1789106613949-full.webp
- Component on Kage: https://kage.design/component/workid-hero

## Before you start
Ask the user what their product does, who the hero is for, and what their brand personality and visual identity 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 trust-first landing-page hero for a modern software product. The composition should make the main promise immediately legible, support it with a short explanation and one primary action, then use a large proof artifact below as the visual anchor.

### Layout and alignment
- Use a full-width page with a slim navigation row above the hero; keep the navigation visually quiet so the hero owns attention.
- Place the hero inside a large, very light neutral panel with generous horizontal margins, softly rounded corners, and a minimum height that feels like a substantial first viewport section.
- Center-align the headline, supporting text, and primary CTA in the upper half of the panel.
- Use a large headline constrained to roughly 520–620px so it wraps into two balanced lines. Keep the supporting paragraph narrower, around 360–460px.
- Put the main proof artifact directly below the CTA, centered on the page and extending past the bottom edge of the hero panel. The intentional crop should create momentum into the next section.
- Add one short annotation on each side of the artifact. Keep them outside the card, aligned around its middle-to-lower area, and connect each annotation with a thin, imperfect curved arrow or drawn connector.
- On smaller screens, stack or hide the annotations, keep the artifact centered, and preserve enough top and bottom padding for the headline and CTA to breathe.

### Typography hierarchy
- Use a modern sans-serif with a weighty, near-black display headline; use tight line-height around 0.95–1.05 and slight negative letter spacing.
- Make the supporting copy smaller and calmer, with medium-gray text and relaxed line-height.
- Use a compact, semibold button label.
- If annotations are included, use a contrasting handwritten or informal type style sparingly; it should feel like a human note, not the primary brand typography.
- Keep navigation labels small, dark, and medium weight.

### Colour
- Page background: white or near-white, approximately `#FFFFFF`.
- Hero panel: very pale gray, approximately `#FAFAFA` to `#F7F7F7`.
- Primary text: near-black, approximately `#111111`.
- Secondary text: cool neutral gray, approximately `#666666`.
- Primary action: saturated trustworthy blue, approximately `#347FE5` or a brand-appropriate equivalent, with white text.
- Use a restrained green accent for verified/trust indicators, approximately `#28B879`.
- The proof artifact may use a warm accent colour such as yellow or amber, approximately `#F8C33F`, but adapt it to the user's product palette.
- Keep decorative strokes and annotation text subdued rather than competing with the headline.

### Borders, radius, and depth
- Give the hero panel a large radius, approximately 48–64px on desktop and 28–36px on mobile.
- Make the proof card white with a 1px light-gray border around `#D9D9D9`, a radius around 16–20px, and a soft, diffuse shadow such as `0 4px 14px rgba(0,0,0,0.14)`.
- Use subtle dividers inside the proof artifact and avoid heavy outlines.
- Buttons should have a medium radius around 10–12px; the primary button may have a very subtle shadow or darker hover state.

### Content and interaction
- Write a concise headline that states a credible product advantage, preferably involving reliability, verification, confidence, or reduced risk.
- Follow it with one sentence explaining how the product delivers that advantage.
- Include one clear primary CTA; avoid competing secondary actions in the hero.
- Make the proof artifact product-specific: it could be a verified profile, analytics panel, workflow result, document preview, or other concrete interface that substantiates the claim.
- Add small, legible proof details inside the artifact—status labels, a score, metadata, progress, or verification markers—without turning it into a fully functional dashboard.
- Add gentle hover and focus states to the CTA and any navigation controls. Respect keyboard focus, sufficient contrast, and reduced-motion preferences.
- The curved annotations should be decorative and remain readable at responsive sizes; do not rely on them as the only explanation of the interface.

## Never
- Never reuse the reference's logos, product names, headline, CTA copy, annotation copy, profile data, or exact interface content.
- Never copy the reference's illustration, imagery, handwritten artwork, arrows, or decorative assets; create original equivalents or use CSS-only decoration.
- Never make the hero a pixel-for-pixel recreation of the reference.
- Never let decorative annotations overpower the product message or reduce accessibility.
- Never use invented brand assets or imagery when the user's product and brand direction have not been clarified.