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

Design analysis

Three equal cards explain the product's possible responses at a user-defined threshold, using short labels and outcome-focused descriptions.

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-1792821846-4.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-2

## Before you start
Ask what threshold, trigger, or decision your product handles and what distinct outcomes it can produce. Adapt this component to those outcomes.

Build a centered section with a strong heading and a three-column card row. Each card should have a small categorical label, a concise outcome title or description, and a short explanation. Make the most important or safest state visually distinct with a lime-tinted border and subtle background glow; keep the other cards neutral. Use a dark surface #101512, page background #080b0a, border #202821, primary text #edf0ea, muted text #a0a79f, and accent #b7ff3c. Use 14–16px copy, 18–22px card padding, 10px radius, equal heights, and responsive stacking on narrow screens. Cards may support hover emphasis but should not rely on animation.

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

More components