Kage Design logo kage
salience.com
Salience feature grid component

Design analysis

A diagrammatic section explains how multiple request sources become a sequence of observe, verify, explain, and act outcomes, followed by a compact trust/data-protection band.

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/salience/db9244f7-ec48-4516-9a93-11a957a9eab9-1792303422-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/salience/db9244f7-ec48-4516-9a93-11a957a9eab9-1792303314589-full.webp
- Component on Kage: https://kage.design/component/salience-feature-grid-5

## Before you start
Ask what inputs your product combines, what transformation it performs, and what four outcomes it enables. Also ask about the user's privacy commitments.

Build a white systems section with a heading and short explanation above a three-part flow diagram. On the left, stack small outlined source pills; in the centre, use one dark rounded processing card; on the right, stack four bright-green outcome cards. Connect them with thin curved SVG lines or simple CSS connectors, but keep the diagram readable and responsive. Use 12px radii, black #111111, white #ffffff, green #8bea72, pale green #dfffd7, and grey borders #d9ded9. Under the diagram, add a full-width near-black trust strip with a short heading and four evenly spaced privacy promises, each with a tiny green lock-style icon and brief copy. Keep the diagram semantic and keyboard-readable; on mobile turn connections into a vertical flow.

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

More components