Kage Design logo kage
cortexdocs.dev
Cortex feature grid component

Design analysis

A two-column feature band pairs a large editorial headline and checklist on the left with a dark simulated agent conversation on the right.

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/cortex/48e48c32-4544-4e71-94d3-849a84be1bb9-1789279410-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cortex/48e48c32-4544-4e71-94d3-849a84be1bb9-1789279340596-full.webp
- Component on Kage: https://kage.design/component/cortex-feature-grid-2

## Before you start
Ask what difficult problem the user's product solves and what proof points build trust. Apply the following pattern to that product.

Build a two-column feature section on a dark charcoal background (#0d0e0f). The left column should contain a small uppercase eyebrow, a very large 3–4 line headline, a concise explanatory paragraph, two or three checkmarked benefits, and a low-key text link. The right column should contain a framed simulated workflow, such as an agent chat, command output, dashboard, or generated result.

Use a 48/52 or 45/55 grid with a generous gap. Give the visual a dark panel (#151617), 1px border, 12px radius, subtle inner gradients, and layered message/code rows to communicate activity. Use 52–64px editorial heading typography, muted 15px body text, and mint or brand-colored status accents. Stack the columns below 760px.

Never: use the reference's logos, product names, copy, illustrations, imagery, or exact checklist/link labels.

More components