Kage Design logo kage
koiscribe.com
Koi feature grid component

Design analysis

A split layout pairs a left-aligned benefit statement with a dense expense dashboard, making a practical business outcome tangible.

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/koi/1f2fb87d-9243-4e92-a42a-66c20077da12-1792649021-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/koi/1f2fb87d-9243-4e92-a42a-66c20077da12-1792648920300-full.webp
- Component on Kage: https://kage.design/component/koi-feature-grid-7

## Before you start
Ask what measurable operational outcome the user's product delivers and what dashboard best proves it. Build the user's version rather than a replica.

Create a split feature section on a black background. Put an eyebrow, large two-line outcome headline, short paragraph, two or three bullet benefits, and a subtle text link in the left column. Put a dense but legible dashboard in the right column inside a charcoal rounded panel: include a title, one prominent metric, secondary summary cards, and a categorized list with aligned amounts or statuses. Use 44–48% / 52–56% column proportions, 28–40px gap, 20px panel radius, and a single bright accent for positive or selected states. Keep numerals prominent but avoid excessive colour. Stack the columns on mobile.

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

More components