## 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/busabase/7d05ddcb-d0f9-4d81-8382-8bbb1120492e-1791612076-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/busabase/7d05ddcb-d0f9-4d81-8382-8bbb1120492e-1791612035007-full.webp
- Component on Kage: https://kage.design/component/busabase-hero

## Before you start
Ask what the user's product is, what its main promise is, and which brand typefaces, colors, and primary action it uses. Apply the principles below to that product rather than copying the reference.

Create a centered SaaS hero beneath the header. Use a large high-contrast editorial headline with a distinctive serif display face, a short sans-serif supporting paragraph, a segmented cloud/local or deployment choice, and one dark rounded primary CTA followed by two quiet text links. Add a small compatibility row of neutral integration chips below the actions. The lower half should be a wide, softly shadowed application preview with a left conversation/activity pane and a larger structured workspace pane, using realistic placeholder rows and restrained UI detail. Use an off-white #f3f5f4 background, charcoal #171918 headings, #717875 body text, white or #f8faf9 panels, 1px #dfe3e0 borders, 10–14px radii, and very soft shadows. Use fluid type around 52–72px for the headline, 16px body copy, and 13px controls. Keep the hero visually calm, with the preview carrying proof rather than decorative illustration.

Never: use logos, product names, copy, illustrations, or imagery from the reference.