## 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-1789106503-4.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-2

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, typography, and UI patterns they already use. Apply the principles below to that product and brand; do not reproduce the reference literally.

## Build a feature-grid section for the user's product
Create a responsive feature-grid section that explains how the product's core workspace, system, or workflow helps users accomplish work. The section should feel like a calm, premium product surface: editorial above the fold, then a large believable interface preview that demonstrates the concept.

### Structure and layout
- Use a full-width section with a bright, quiet background and a centered max-width container of approximately 1200–1280px.
- Start with a two-column introduction: a strong headline block on the left and a short explanatory paragraph on the right. On desktop, align both columns to the same top baseline; use roughly a 1:1 ratio with a generous gap. On smaller screens, stack them with the headline first.
- Place a large feature preview directly below the introduction with a small, consistent vertical gap.
- The preview should be a two-panel workspace grid on desktop. Give each panel equal width, a shared outer frame, and a thin divider between them. On mobile, stack the panels or allow a controlled horizontal overflow only if the product genuinely benefits from side-by-side comparison.
- Keep the section visually dense only inside the preview; preserve generous outer whitespace so the feature statement remains easy to scan.

### Interface preview logic
- Make the preview an actual UI composition, not a hero illustration: include a slim panel header, a small grip or utility icon, a clear panel title, and restrained utility controls.
- Show two related but distinct work states, such as one agent handing off a task and another indexing, reviewing, or completing it. The relationship between panels should communicate coordination without requiring a long explanation.
- Anchor message bubbles, status rows, activity text, and a composer/input area near the lower portion of each panel. Leave believable breathing room above these elements so the workspace feels usable.
- Use small metadata details—file names, status labels, model or mode selectors, search indicators, or timestamps—sparingly to create credibility. Keep them subordinate to the main task content.
- If interactions are implemented, make panel controls keyboard accessible. Utility icons may reveal tooltips or menus, and the composer should show a clear focus state. Avoid distracting animation; use subtle hover, focus, and panel-transition feedback only.

### Typography
- Use the user's brand typeface when available; otherwise use a modern neutral sans-serif with excellent UI legibility.
- Set the section headline in a bold, compact display style around 32–40px desktop, with approximately 1.05–1.15 line-height and tight letter spacing. It may wrap across two lines.
- Set the explanatory paragraph around 16–18px with a 1.45–1.6 line-height and medium gray colour.
- Use preview panel titles around 13–15px semibold. Use interface body copy around 14–16px, labels and metadata around 11–13px, and preserve clear contrast between primary text, secondary text, and disabled text.
- Avoid all-caps except for tiny, genuinely conventional status labels.

### Spacing and alignment
- Use a spacing scale based on 4px or 8px increments.
- Give the outer section approximately 80–120px vertical padding on desktop and 48–72px on mobile.
- Use 24–32px between the introduction columns and 36–56px between the introduction and preview.
- Give the preview header rows 16–20px horizontal padding and 12–16px vertical padding. Use 16–24px internal panel padding, with larger spacing around the primary task or message.
- Align text, status indicators, and composer controls to consistent panel gutters. Do not center content arbitrarily inside the product UI.

### Colour
- Start with a near-white page background around #ffffff or #fafafa, depending on the user's brand.
- Use near-black primary text around #171717 and muted text around #6f6f6f.
- Use a very pale warm-gray surface around #f7f6f3 or #f4f3f0 for message cards and selected states.
- Use subtle neutral borders around #deddd9 to #e8e7e3, with slightly deeper contrast for the shared frame and panel divider.
- Reserve the product's accent colour for meaningful status, focus, links, or actions; do not introduce bright colour merely for decoration.
- Ensure all text and interactive states meet accessible contrast requirements.

### Borders, elevation, and shape
- Use 1px solid borders with low-contrast neutrals throughout the preview.
- Give the outer preview a restrained radius of approximately 10–14px and clip internal panel content to that radius.
- Use smaller 6–10px radii for message cards, inputs, pills, and compact controls.
- Keep shadows soft and broad, for example a low-opacity black shadow with a 20–40px blur, to lift the workspace slightly from the page. Avoid glossy effects, heavy gradients, and excessive depth.
- Make dividers and panel chrome visually quiet so the content states remain the focus.

### Responsive behaviour
- At tablet widths, reduce the introduction gap and panel padding while retaining the two-panel relationship where practical.
- At mobile widths, stack the headline and description, then stack the panels with a clear gap or transform the preview into an accessible carousel with visible controls.
- Ensure long agent messages and metadata wrap naturally; never let controls or text escape the viewport.
- Preserve touch targets of at least 44px for buttons and icon controls.

### Content guidance
- Write concise, product-specific copy that names the user's workflow benefit rather than generic claims.
- Use two complementary feature states that make the product's central value visible at a glance.
- Keep each message and status line short enough to scan within the panel; use realistic but invented data relevant to the user's product.

## Never
- Never use logos, product names, slogans, or exact copy from the reference.
- Never copy the reference's interface labels, message text, file names, agent names, or brand language.
- Never use the reference's illustrations, screenshots, imagery, or decorative assets.
- Never reproduce the reference pixel-for-pixel; derive a new composition from the layout and interaction principles.
- Never add ornamental UI that does not clarify the user's product or workflow.
- Never sacrifice responsive behaviour, keyboard access, readable contrast, or touch usability for visual similarity.