Kage Design logo kage
marqly.com
Marqly 6.0 feature grid component

Design analysis

This section broadens the product story beyond bookmarks with two side-by-side tool panels for clipboard history and saved sessions.

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/marqly-6-0/c854bda3-2558-4a76-a0fe-ed0b4296df4d-1789452134-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/marqly-6-0/c854bda3-2558-4a76-a0fe-ed0b4296df4d-1789452075868-full.webp
- Component on Kage: https://kage.design/component/marqly-6-0-feature-grid-6

## Before you start
Ask what the user's product is, who it serves, and what its brand personality should be. Apply the principles below to that product rather than copying the reference.

Build a two-column productivity-tools section. Introduce it with a small eyebrow, bold 38–44px headline, and short supporting copy, then show two equal UI panels: a searchable clipboard history and a saved-session restore list. Each panel needs a compact title row, search or sorting affordance, several realistic rows, timestamps or counts, and a clear action such as Restore. Use a white background or #f7f7f6 band, panels in #ffffff, text #171719, muted text #777, borders #e5e5e3, and a black or dark action button. Use 16–20px radius, subtle shadows, 24px internal padding, and 32–48px gaps. Make rows keyboard navigable and actions visibly interactive; stack panels below 760px.

Never: use the reference logo, product name, copy, illustrations, imagery, or brand assets.

More components