Kage Design logo kage
conifer.build
Parallax feature grid component

Design analysis

A strong left-hand narrative is paired with a detailed product card, and the numbered steps make the coordination mechanism easy to scan.

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/parallax/9ca98bac-0bc3-4cc4-b310-031492d1188c-1792216893-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/parallax/9ca98bac-0bc3-4cc4-b310-031492d1188c-1792216865980-full.webp
- Component on Kage: https://kage.design/component/parallax-feature-grid

## Before you start
Ask what the user's product coordinates, automates, or simplifies, and what its users need to understand first. Apply the same information hierarchy to that product.

Build a two-column feature section on a dark background. On the left, use a large warm serif heading, a short explanation, and four vertically stacked numbered steps. Each step should have a small outlined number, a concise title, and muted supporting text; visually emphasize the final/current step with a rounded dark card and a bright number badge. On the right, show a polished product-status panel with a prompt field at the top and three or more compact task cards below, each with a title, owner/type metadata, progress indicator, and completion state. Use generous column spacing, a max-width container, subtle 1px borders, 14–18px panel radii, and a pink/red highlight only for active or completed states. Palette: `#0b0b0b`, `#15171b`, `#22262b`, `#eeeae5`, `#929095`, accent `#e63d63`, success `#48c994`. Preserve clear mobile stacking and sufficient whitespace between narrative and UI.

Never:
- use logos, product names, or copy from the reference
- reproduce the exact task cards or wording
- use illustrations or imagery from the reference

More components