Kage Design logo kage
hark.com
Hark feature grid component

Design analysis

The final product feature frames customization as a flexible overview, pairing a modular information surface with copy about adapting the experience to the user.

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/hark/c0ab7f75-9849-4088-b995-f4bab40ea0a8-1791525720-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hark/c0ab7f75-9849-4088-b995-f4bab40ea0a8-1791525672611-full.webp
- Component on Kage: https://kage.design/component/hark-feature-grid-5

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to create an original version for that product.

Build a final alternating feature band about customization. Show a modular panel or workspace beside clear copy that explains how users shape it to their needs.

### Design language
- Return to the first text/visual ordering to create a visual cadence across the page.
- Use a rounded pale blue panel (`#78add0` fading to `#dbe8e2`) containing four simple dashboard cards in a balanced two-by-two arrangement.
- Give each card a single purpose, a restrained heading, and a small data/status cue; avoid dense analytics.
- Use 18–24px radii, thin translucent borders, soft shadows, and 32–48px inner padding.
- The text side should have a confident serif heading and two short sans-serif paragraphs.
- Make the modular pieces feel movable or configurable through subtle handles, tabs, or hover elevation.

### Never
- Never reuse logos, product names, copy, illustrations, or imagery from the reference.
- Never turn customization into an overwhelming settings screen or replicate a specific dashboard.

More components