## 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/hob/bb3af585-7542-45f5-8db1-3e25168b9aff-1789106502-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hob/bb3af585-7542-45f5-8db1-3e25168b9aff-1789106472876-full.webp
- Component on Kage: https://kage.design/component/hob-feature-grid

## Before you start
Ask what the user's product is, who it is for, and what its brand direction is (including preferred colours, type style, and interface conventions). Then apply the principles below to create an original feature-grid section for that product—not a copy of the reference.

## Build this section
Create a responsive feature-grid or feature-highlight panel that explains one important product capability through a short text block and a large, partially cropped UI preview. The composition should feel like a calm, premium SaaS landing page: restrained, spacious, and product-led.

### Layout and alignment
- Use a wide feature container, roughly 1200–1280px maximum width, with a very light neutral background and softly rounded corners.
- On desktop, reserve the left quarter to one third for the headline and supporting paragraph. Align both to the same left inset, around 48px or 4–5% of the panel width.
- Let the product preview occupy the remaining space and extend toward the right and bottom edges. It may overlap the text region slightly, but the copy must remain readable.
- Build the preview from two or more interface surfaces at different depths: a larger primary workspace in front and a narrower secondary navigation or context panel behind it, offset upward and rightward.
- Crop the preview intentionally at the panel boundary so it feels like a close-up of a larger working environment rather than a complete mockup.
- On smaller screens, stack the text above the preview, preserve the layered relationship, and reduce the crop so essential UI details remain visible. Avoid horizontal overflow.

### Typography hierarchy
- Use a modern sans-serif with a clear, compact shape and strong legibility.
- Set the headline in a bold or semibold weight, approximately 30–38px on desktop with 1.05–1.15 line-height. Keep it to roughly 3–5 short lines.
- Set supporting copy around 16–18px with 1.5–1.65 line-height and a muted tone. Limit its width to approximately 320–380px.
- Use short, benefit-led language specific to the user's product. Do not overload the section with labels, buttons, or secondary messaging.

### Spacing
- Give the outer panel generous vertical padding, approximately 60–80px on desktop and 32–44px on mobile.
- Maintain 20–28px between headline and paragraph.
- Use an internal layout gap of approximately 48–72px between the text block and interface preview.
- Keep UI mockup spacing dense and realistic: 10–16px panel padding, 8–14px row gaps, and compact navigation items.

### Colour and surface treatment
- Start with a near-white neutral panel, approximately #F7F7F6 or #F5F5F4, rather than a saturated colour.
- Use near-black text such as #161616 and secondary copy around #6D6D6A.
- Make the interface preview predominantly white or #FCFCFB, with cool grey borders and subtle grey fills around #F0F1F1.
- Add only the product's existing accent colour for small interface states, icons, active navigation, or status indicators. Keep accents restrained.
- Use very soft shadows for depth, for example 0 18px 45px rgba(20, 20, 20, 0.10), and a lighter shadow for the rear surface.

### Borders and radius
- Give the outer panel a subtle 8–12px radius.
- Give interface windows and cards a 6–10px radius, with 1px borders around #E3E4E3.
- Use thin dividers, compact tabs, muted icons, and small controls to make the preview feel like a believable application interface.
- Keep the outer panel visually quiet so the layered interface is the focal point.

### Interface preview and interaction
- Construct the mockup from semantic HTML/CSS components rather than using an image: browser or app chrome, sidebar/navigation, tabs or workspace headings, content columns, task rows, and a compact input or action area.
- Show multiple related work areas at once to communicate orchestration, parallel work, monitoring, or context—whichever capability matches the user's product.
- Use realistic placeholder content generated for the user's domain, but keep individual labels short and scannable.
- If the product supports interaction, make tabs, navigation rows, and controls visibly hoverable/focusable; a small active state is enough. The section should still communicate its value without requiring interaction.
- Add responsive clipping or transforms carefully so layered surfaces remain readable and do not cover the headline on narrow screens.
- Respect reduced-motion preferences and avoid automatic animation; optional hover elevation should be subtle.

## Never
- Never use the reference's logos, product names, labels, copy, or branded interface content.
- Never reproduce the reference screenshot as a background image or use copied imagery.
- Never add illustrations or decorative artwork when the product UI itself can communicate the feature.
- Never make the interface preview more visually dominant than the value proposition.
- Never use dense paragraphs, excessive gradients, loud colours, or gratuitous animation.
- Never assume the user's product, audience, or brand colours; ask first and adapt the component to their answers.