## 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/tryobra-com/5ed8a808-d125-4341-bc8a-0a69442cb995-1789152084-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tryobra-com/5ed8a808-d125-4341-bc8a-0a69442cb995-1789152039794-full.webp
- Component on Kage: https://kage.design/component/tryobra-feature-grid

## Before you start
Ask what the user's core workflow is, what inputs it accepts, and which steps need explanation. Map the design to that workflow rather than copying the example.

Create a dark workflow section with a small chapter label, a large two-line heading, and a brief explanatory paragraph. Below, use a two-column composition: an illustrative product artifact or UI preview on the left with restrained annotation callouts, and a numbered list of 4–6 steps on the right. Render the list as a bordered stack with 1px off-white rules, a narrow number column, bold step titles, and compact descriptions. Use warm white (#f4f3ec), muted gray-green body text (#aaa9a0), orange annotations (#ff5425), and 32–48px gutters. Keep the visual and list aligned to the same baseline and make each step easy to scan.

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