## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hob/bb3af585-7542-45f5-8db1-3e25168b9aff-1789106472876-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hob/bb3af585-7542-45f5-8db1-3e25168b9aff-1789106470289.webp
- Design on Kage: https://kage.design/designs/hob-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, type). Wait for their answers before designing. Apply everything below to that product, not to the reference.

## Page structure
- **Header:** Use a thin white navigation bar with a small product mark at left, three or four text links with restrained dropdown indicators, and compact outlined/contact plus filled primary actions at right.
- **Hero:** Center a large two-line headline, short muted explanatory paragraph, paired primary and secondary buttons, and a small reassurance line beneath; keep generous white space around the content.
- **Primary product showcase:** Place a large softly shadowed desktop application screenshot below the hero, with enough scale for the workspace layout to read as the central proof point.
- **Compatibility strip:** Add a short centered caption followed by a horizontal row of pale gray tiles naming compatible tools or integrations.
- **Feature section one:** Use a pale gray full-width panel with a left-aligned heading and description, while a large cropped product interface image occupies the lower/right area to show multiple active workspaces.
- **Feature section two:** Return to white with a two-column intro—strong heading on the left and explanatory copy on the right—then show two adjacent workspace panels demonstrating agents coordinating separate tasks.
- **Feature section three:** Create an airy split section with heading and paragraph on the left and a faded, layered activity/workflow visualization on the right, including a small foreground card for hierarchy.
- **Trust/security section:** Use a pale gray panel with a centered heading and two large white cards side by side; combine concise trust claims with interface/code-like evidence in the card bottoms.
- **In-practice heading:** Introduce a practical capabilities area with a large left-aligned heading and a short supporting sentence.
- **In-practice feature grid:** Arrange multiple pale gray cards in an asymmetric multi-column grid. Mix text-only cards, cards with small dashboard screenshots, and a lightly outlined laptop/phone illustration; cover automations, remote issues, remote access, pull requests, agent control, and isolated worktrees.
- **Testimonials:** Show two wide pale gray quote cards in a two-column row, with large quote text and small author avatar/name/role metadata anchored near the bottom.
- **Questions and answers:** Add a full-width FAQ section with a large heading and many single-line accordion rows separated by thin horizontal rules; place a plus control at the far right of each row.
- **Final CTA:** Center a two-line closing headline, orange primary download button, and small reassurance line in a generous white block.
- **Footer:** Finish with a thin-divider footer containing four understated link columns, then a large low-contrast typographic brand treatment and small company/location details.

## Design language
- Build hierarchy with a very large, black, tightly set sans-serif display headline, medium section headings, and small gray utility text; use sentence case and short line lengths.
- Keep the page predominantly white, with approximate colours of #FFFFFF, near-black #111111, muted gray #6F6F6F, pale panel gray #F6F6F5, and a warm orange CTA around #F5A900.
- Change rhythm down the page: start with centered, spacious hero content; shift into large screenshot-led proof sections; compress into a denser capability card grid; slow down again for testimonials and evenly spaced FAQ rows; end with a minimal CTA and quiet footer.
- Treat product screenshots as the main visual language. Use large desktop frames, subtle 1px gray borders, soft diffuse shadows, and generous clipping rather than decorative illustrations or gradients.
- Use mostly square or lightly rounded corners—approximately 4–10px—on panels and controls. Keep borders #E7E7E5, shadows broad and faint, and avoid heavy elevation.
- Use orange only for primary actions and tiny emphasis, letting the black/white/gray system carry most of the interface. Secondary actions should be white with a thin gray outline.
- Use a modern neutral grotesk with a large display scale around 56–72px on desktop, section headings around 32–44px, body copy around 15–18px, and metadata around 12–13px; use relaxed line-height for descriptions.
- Prefer wide desktop containers, strong left/right alignment, generous vertical gaps, and alternating full-bleed pale panels against white sections to separate topics without ornament.
- Make interactions quiet and functional: buttons can slightly darken or lift on hover, FAQ rows should expand inline with a rotating plus/minus, navigation dropdowns should remain compact, and screenshot cards should not use flashy motion.

## Never
- Do not use any logos, wordmarks, product names, copy, illustrations, photography, avatars, or icon sets from the reference.
- Do not reproduce the reference brand or present the result as Hob.
- Do not copy its exact screenshots, testimonial text, FAQ wording, navigation labels, or page content; create an original product and content system using the same structural principles.