Kage Design logo kage
koiscribe.com
Koi feature grid component

Design analysis

A planning section presents a clear headline and a connected calendar mockup that turns multiple sources into one visual week.

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/koi/1f2fb87d-9243-4e92-a42a-66c20077da12-1792649020-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/koi/1f2fb87d-9243-4e92-a42a-66c20077da12-1792648920300-full.webp
- Component on Kage: https://kage.design/component/koi-feature-grid-5

## Before you start
Ask what planning problem the user's product solves and which sources or tasks must be unified. Build a branded version using these reusable rules.

Use a centered dark section heading with a small uppercase eyebrow, 28–34px headline, one short explanatory paragraph, and a quiet text link. Below, create a wide rounded calendar panel with a left column of connected sources and a larger weekly schedule on the right. Use fine connector lines, coloured event blocks, small labels, and a restrained grid so the relationship between sources and schedule is immediately understandable. Keep the main panel charcoal against a black page, with 16–22px radius and a subtle shadow. On mobile, turn the source list into a compact top row and allow the schedule to scroll horizontally.

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

More components