Kage Design logo kage
salience.com
Salience card component

Design analysis

A labelled audience section uses four bright green cards to let different user groups self-select while keeping each card actionable and compact.

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-1792303419-3.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-card

## Before you start
Ask who the user's primary audiences are and what job each audience needs done. Build a tailored use-case section rather than copying any wording or categories.

Create a section with a small uppercase eyebrow and a large left-aligned heading. Below, lay out four equal cards in a responsive grid. Give each card a saturated but soft green background (#8bea72), 12px radius, 20–24px padding, a small geometric or text icon, a bold 14–16px audience title, a short quoted or outcome-oriented statement, and a bottom-aligned text link with an arrow. Keep cards equal height and use flex layout so the link sits at the bottom. Use black text, 13px body copy, 1.35 line-height, and 24px gaps. Add a quiet row of secondary audience links below the cards. On hover, slightly lift the card and deepen the green; preserve keyboard focus rings.

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

More components