## 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/xem/cfdda217-53f8-4a81-998a-9d07a076ba78-1790143671-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/xem/cfdda217-53f8-4a81-998a-9d07a076ba78-1790143376275-full.webp
- Component on Kage: https://kage.design/component/xem-feature-grid-3

## Before you start
Ask what the user's first-run experience is, which steps users must complete, and what brand colors should guide attention. Then design this pattern for that product.

Create a warm pale-yellow section around #f7f8e9 with an eyebrow, oversized serif heading and italic continuation at the top, plus a short explanatory paragraph aligned to the right. Below, use a large rounded two-column onboarding card: a narrow left checklist with numbered steps and one dark-green active row, and a wider right preview showing the current setup state. Follow with two smaller supporting cards and a primary CTA. Use deep green #155747, muted olive text, subtle #dfe3d0 borders, 18–24px radii, and generous 24–32px internal padding. Make checklist items interactive, with the active step changing the preview; preserve strong contrast and a clear sequential rhythm.

Never use the reference's logo, product name, copy, illustrations, or imagery.