## 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/pancake/f2dcc4e1-7584-486e-8c34-37279d03f6e2-1792044191-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/pancake/f2dcc4e1-7584-486e-8c34-37279d03f6e2-1792044073540-full.webp
- Component on Kage: https://kage.design/component/pancake-feature-grid

## Before you start
Ask what the user's core workflow is, what its three most valuable stages are, and which real UI artifacts best prove each stage. Apply this narrative to the user's product and brand.

Create a three-step feature section on a warm ivory background. Start with a centered eyebrow and large dark-plum section heading. Then stack three generous feature rows, each with a colored step number, a concise two-line title, one explanatory paragraph, and a UI mockup or data artifact on the opposite side. Alternate the visual side between rows to create movement, but preserve a consistent max-width grid and alignment. Use approximate accent colors purple `#8157df`, coral `#d94672`, and apricot `#e99b4b`; keep body text near `#332735`, with 16–18px line-height. Give each feature row 260–330px of height, 64–96px vertical separation, and mockups a soft off-white surface (`#fffdfa`), 16–20px radius, subtle `#eadfe5` border, and restrained shadow. UI artifacts can be cards, a network map, a lead list, or a calendar, but they should be simplified and clearly subordinate to the explanation. On mobile, stack copy before the artifact and keep the step number prominent. Add subtle reveal motion only if it does not impair accessibility.

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