## 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/thousand/cb10af68-535d-4246-97d9-03dbd24306a9-1789106637-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/thousand/cb10af68-535d-4246-97d9-03dbd24306a9-1789106570706-full.webp
- Component on Kage: https://kage.design/component/thousand-hero

## Before you start
Ask the user what their product does, who it is for, and what visual brand direction they want. Then apply the principles below to create a tailored hero for their product rather than reproducing this reference.

## Build the component
Create a responsive SaaS landing-page hero that combines a left-aligned value proposition with a large product-interface preview on the right. The section should feel editorial, warm, precise, and slightly playful while still communicating a serious workflow product.

### Layout and alignment
- Use a wide, near-full-viewport hero with generous horizontal padding: approximately 48px on desktop, 24px on mobile.
- Place a simple navigation row at the top with a compact brand mark area on the left and links plus one dark primary action on the right. Keep the navigation visually quiet so the hero content remains dominant.
- Below the navigation, use a two-column composition. The left column should be approximately 45% wide and vertically centered; the right column should be approximately 55% wide and contain the product preview.
- Keep the main text block left aligned with a readable maximum width of roughly 520px.
- Put a small uppercase eyebrow above the headline, followed by a large two- or three-line headline, a short supporting paragraph, and a compact action row.
- Under the action row, include a small abstract activity/progress visualization made from a grid of rounded squares. It should reinforce ongoing usage or history without becoming a chart-heavy dashboard.
- Build the right-side preview as a layered browser-like workspace: a row of pill-shaped people or role controls above a large rounded application window. Within the window, use a narrow repository/navigation column and a wider reading or detail column.
- On smaller screens, stack the preview below the copy, hide or simplify secondary navigation, and allow the interface mockup to crop or scroll horizontally rather than shrinking every detail until it becomes unreadable.

### Typography hierarchy
- Use a friendly geometric or humanist sans-serif for headings, with a bold headline around 48–64px on desktop and 36–44px on mobile. Use tight line-height around 0.95–1.05 and slightly negative tracking.
- Make the eyebrow, interface labels, metadata, and footer annotations uppercase or monospaced where appropriate. Keep them small, around 10–12px, with increased letter spacing.
- Use a 16–18px supporting paragraph with approximately 1.45 line-height and a softer neutral colour than the headline.
- Use compact 13–15px navigation and button text. Strongly emphasize only the most important words inside the headline or product preview.
- Create emphasis with typographic weight and a hand-drawn-feeling highlight or underline behind one phrase, not with excessive colour changes.

### Colour and visual tone
- Use a warm paper-like page background near #F4F0E6 or #F7F3EA.
- Use near-black ink for primary text and controls, around #1D1C18.
- Use muted charcoal and warm grey for secondary copy, around #6F6B60 and #9A9588.
- Use a sunny ochre or golden yellow accent around #E9B936 for the headline highlight and activity grid.
- Use pale cream, sage, powder blue, and soft yellow as restrained interface-state colours, approximately #E7E2D6, #DCEBD6, #DCE9EC, and #F3E7B1.
- Keep contrast high for body text and primary actions, while allowing the product mockup to use softer neutrals for depth.

### Borders, radius, and depth
- Use thin warm-grey borders around the interface preview, pills, and browser chrome: approximately 1px solid #D8D3C7.
- Give the main application window a large radius around 16–20px; use smaller 8–12px radii for controls and content cells.
- Use a very subtle shadow or offset warm outline on the preview rather than a dark, floating card shadow.
- Style the primary CTA as a nearly black pill with white text, generous horizontal padding, and a radius of 999px. Secondary actions can be text links with a fine underline.
- Make the yellow headline highlight sit behind the text baseline, slightly irregular in height, while remaining accessible and legible.

### Product preview details
- Use a browser/app header with tiny circular window controls, a centered monospace URL or workspace label, and compact collaborator indicators.
- In the left navigation, show folders, documents, or spaces with small icons, indentation, and permission/status pills.
- In the main detail panel, show a document title, metadata, a short paragraph, a simple two- or three-column table, and a few bullet-like updates. Keep the content generic and tailored to the user’s product.
- Include subtle role or access indicators using compact green or neutral pills so the interface visibly supports the hero’s promise.
- Prioritize believable information density and alignment over decorative illustration. The preview should look like a functional product surface, not a static screenshot.

### Interaction and motion
- Make navigation and CTA states clear on hover and focus. Dark buttons may shift to a slightly lighter black, while text links can strengthen their underline.
- If motion is added, use restrained entrance fades and small upward translations for the copy and preview. Allow activity-grid cells or collaborator indicators to stagger subtly, but avoid distracting loops.
- Ensure all controls have visible keyboard focus states and that the mockup remains decorative or has appropriate accessible labelling.

## Never
- Never use the reference company’s logo, brand mark, product name, or exact navigation labels.
- Never reuse the reference headline, paragraph, button copy, interface text, names, URLs, document titles, or data.
- Never copy the exact dashboard arrangement, folder names, permission labels, or visual assets; invent an interface that fits the user’s product.
- Never include illustrations, avatars, icons, or imagery from the reference. Use original or neutral UI primitives instead.
- Never sacrifice responsive behaviour, semantic structure, colour contrast, or readable type in order to mimic the reference pixel-for-pixel.