Kage Design logo kage
cadenya.com
Cadenya feature grid component

Design analysis

The dark green section introduces a unifying statement, then organizes three numbered workflow cards with small node diagrams. The consistent card grid makes a complex agent model easy to scan.

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/cadenya/d064e83b-00ab-4d52-aab7-77367964ea32-1789192867-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cadenya/d064e83b-00ab-4d52-aab7-77367964ea32-1789192832645-full.webp
- Component on Kage: https://kage.design/component/cadenya-feature-grid-2

## Before you start
Ask what stages, modules, or workflow steps define the user's product. Ask which brand colors should replace the reference palette, then implement the system below.

Create a dark, full-width workflow section with a centered framed intro at the top: a large serif heading, one concise explanatory line, and generous padding. Below it, place three equal-width columns with numbered labels, short stage headings, and diagram cards. Each diagram should be a minimal node-and-connector visualization that communicates relationships without relying on illustration. Use a deep green background (#0d5d46 or an appropriate brand equivalent), faint vertical grid lines (#2b725a at low opacity), pale lime highlights (#d7ee80), and off-white text (#f2f3df). Use thin 1px rules, square corners, subtle inset borders, 16–22px stage headings, and 44–60px intro typography. Keep diagrams the same height and align all cards to a shared baseline. Make the nodes decorative but accessible by providing labels or a text alternative.

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

More components