Kage Design logo kage
hireotto.com
HireOtto feature grid component

Design analysis

A saturated teal section reframes the same infrastructure for three audiences, using equal columns, audience labels, benefits, checklists, and bottom links.

Prompt preview
## 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/hireotto/8f3068d7-46ca-4868-8ee8-837dc9e1c249-1790488907-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hireotto/8f3068d7-46ca-4868-8ee8-837dc9e1c249-1790488876025-full.webp
- Component on Kage: https://kage.design/component/hireotto-feature-grid-4

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to that product rather than reproducing this reference.

Build a full-width teal solutions section (#087875 or a similarly saturated deep teal). Use a max-width container with an uppercase lime eyebrow, a large white two-line heading on the left, and a short pale-teal paragraph on the right. Below, create a single rounded three-column panel with very subtle translucent borders and vertical dividers. Each column contains a small uppercase audience label, a strong white benefit heading, supporting copy, a short lime-check checklist, and a lime text link anchored near the bottom. Use bright lime (#b7ff32), white, and translucent white borders; keep the panel radius around 14px and use 40–56px padding. Stack columns on mobile while retaining clear separation.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never use the accent color as a large decorative gradient that reduces text contrast.

More components