## 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/anthropic-com/9400eeef-f6ac-4bf6-a324-e094b3c8d068-1789060505-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/anthropic-com/9400eeef-f6ac-4bf6-a324-e094b3c8d068-1789060491-full.webp
- Component on Kage: https://kage.design/component/anthropic-hero

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, typography, and primary action they want to express. 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 website hero for a high-trust, research-led or mission-driven product. The section should feel editorial, confident, calm, and highly intentional, with a minimal top navigation and a two-column introduction above a contrasting follow-on band.

### Layout and alignment
- Use a full-width page with a warm, nearly white background for the navigation and hero; approximate colour: `#F1F1EA`.
- Add a compact header inside a generous horizontal container, with a left-aligned wordmark placeholder and right-aligned navigation.
- Keep the header approximately 68–84px tall. Align all header items to one baseline and use consistent horizontal gaps.
- Place the hero content in a constrained container with generous left and right padding, approximately 5–6vw on desktop.
- Use a two-column grid for the main hero copy: a wide left column of roughly 55–58% and a narrower right column of roughly 35–40%, with a substantial gutter.
- Vertically position the two columns toward the lower half of the hero rather than centering them mechanically. Leave visible breathing room between the header and the statement.
- Follow the hero with a full-width dark band, approximately `#151515`, beginning at a hard horizontal boundary. Let the next section title or feature peek into view to make the page feel scrollable.
- On smaller screens, collapse to one column, place the supporting paragraph beneath the headline, reduce the header navigation to essential links or a menu control, and preserve generous vertical spacing.

### Typography hierarchy
- Use a bold grotesk or neo-grotesk sans serif for the primary headline. Set it very large—roughly 56–72px on desktop—with tight line-height around 0.92–1.0 and slightly negative tracking.
- Make the headline occupy several short lines, with deliberate line breaks or a controlled max-width. The tone should be declarative rather than promotional.
- Use selective underlines or another restrained text treatment on important words only; make the underline thick enough to remain visible and offset it slightly from the glyphs.
- Use a contrasting editorial serif for the supporting paragraph, around 24–29px on desktop with 1.15–1.3 line-height. Keep its measure narrow enough to read as a compact statement.
- Navigation should be understated: approximately 14–16px sans serif, medium weight, with generous spacing and clear hierarchy between links and the main action.
- Use responsive type scaling with a noticeably smaller but still dominant headline on mobile.

### Colour, borders, and shape
- Use near-black text, approximately `#171717`, on the warm off-white background.
- Keep the palette deliberately limited: warm off-white for the hero, near-black for text and the next section, and white or warm-white text on the dark band.
- Use a dark filled primary action in the header with light text. Give it a compact pill or softly rounded rectangular shape, around 8–10px radius.
- If the action includes a split dropdown or chevron area, separate it with a subtle low-contrast vertical divider and ensure the whole control remains keyboard accessible.
- Avoid decorative borders in the hero. Let spacing, alignment, typography, and the abrupt colour transition provide the visual structure.
- Use consistent corner radii throughout; do not mix playful rounded cards with this editorial system.

### Interaction and accessibility
- Make every navigation item and action a real, keyboard-focusable control.
- Add visible focus states that meet contrast requirements without changing the layout.
- Provide hover transitions for links, underlines, and the primary action—subtle colour or opacity changes over roughly 150–200ms.
- If navigation items open menus, use accessible disclosure buttons with `aria-expanded`, keyboard navigation, Escape-to-close, and click-outside handling.
- Respect reduced-motion preferences and never rely on hover alone to communicate essential information.
- Ensure the headline remains readable at increased text sizes and the two-column layout does not create overflow.

## Never
- Never use the reference site's logo, wordmark, product names, navigation labels, or exact marketing copy.
- Never reproduce the reference headline, paragraph, line breaks, or distinctive wording.
- Never copy any illustrations, imagery, icons, or branded visual assets from the reference.
- Never treat the result as a pixel-perfect recreation; adapt the structure and design principles to the user's product and brand.
- Never use placeholder text that implies the reference product. Generate original, product-relevant content after learning the user's context.