Kage Design logo kage
dreamscalelabs.com
Dreamscale Labs feature grid component

Design analysis

A compact split feature section places an eyebrow and sharp two-line value proposition beside a rounded demonstration video. The caption below the media makes the proof feel concrete and product-led.

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/dreamscale-labs/1997d92a-7a08-4743-8853-9f94160e0cd8-1792130787-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/dreamscale-labs/1997d92a-7a08-4743-8853-9f94160e0cd8-1792130510959-full.webp
- Component on Kage: https://kage.design/component/dreamscale-labs-feature-grid

## Before you start
Ask the user what core workflow or proof point should be demonstrated, and what brand tone the product uses. Build a version tailored to those answers.

Create a horizontal feature section with a left text block and right media block. Use a small uppercase eyebrow in 10–11px letterspaced gray text, followed by a concise two-line heading around 28–32px with tight line-height. Align the media top with the heading area; make it a 16:10 or 4:3 rounded video/image frame with a subtle dark overlay or native controls only when useful. Use a thin neutral border and 4–6px radius. Put a small 11px gray caption directly beneath the media. Keep the section inside a centered max-width container with approximately 80–100px vertical breathing room and a fine #e5e7e8 divider at the edges. On mobile, stack text above media.

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

More components