Kage Design logo kage
peras.vertias.eu
Peras feature grid component

Design analysis

This section explains that a second agent or integration receives the same guardrails, pairing a setup command with three concise benefit cards.

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/peras/2c988a48-c598-4fdf-86c9-23be8072f64d-1792821847-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/peras/2c988a48-c598-4fdf-86c9-23be8072f64d-1792821751917-full.webp
- Component on Kage: https://kage.design/component/peras-feature-grid-4

## Before you start
Ask which integrations or adjacent tools the user's product supports and what remains consistent across them. Use those answers to create this section.

Create a centered integration section with a two-line heading, a short explanatory paragraph, a small setup command control, and three equal cards underneath. The cards should explain separation of concerns, data or permission boundaries, and how approval/waiting works. Keep the tone technical and reassuring. Use a near-black page #080b0a, cards #101512, borders #202722, primary text #eef1eb, muted #99a199, and accent #b7ff3c. Keep the command in a compact monospace pill, use 30–36px heading text, 15–16px body text, 10px card radii, and subtle hover states.

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

More components