Kage Design logo kage
mylens.ai
MyLens feature grid component

Design analysis

An editorial statement introduces a flexible input promise, followed by a neat two-row grid of source types. The repeated cards make breadth scannable while preserving a calm visual system.

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/mylens/1ccd9fd0-0589-4047-afdb-6c3bf2f362f8-1792389753-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mylens/1ccd9fd0-0589-4047-afdb-6c3bf2f362f8-1792389647544-full.webp
- Component on Kage: https://kage.design/component/mylens-feature-grid-2

## Before you start
Ask what kinds of inputs the user's product accepts and which should be prioritized. Use that information to create an original source-grid section.

Build a source-material section with a large left-aligned editorial headline, a compact supporting paragraph, and a two-row grid of input tiles below. Each tile should communicate a source type with a simple label and optional abstract file treatment. Keep the tiles visually quiet so the heading and flexibility promise lead.

Design rules:
- Use an off-white background around `#f5f5f2`, charcoal typography, and pale cards around `#fbfbf9`.
- Use a 48–60px serif headline, 13–15px body copy, and 9–11px uppercase or monospace tile labels.
- Use six columns on desktop, 12–16px gaps, 1px borders around `#dedfda`, 8px radius, and soft shadows only beneath lifted cards.
- Give tiles a consistent height and generous internal padding; on hover, gently raise the tile and reveal a small accent line.
- Collapse to two columns on mobile and preserve the order of the most important input types.

Never:
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never reproduce the exact source labels or blank-card treatment.
- Never use branded file icons unless they are appropriate to the user's own product.

More components