## 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/portfolio-frame/48220de1-a18c-43ab-aca5-f2ed5e4c7799-1789538574-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/portfolio-frame/48220de1-a18c-43ab-aca5-f2ed5e4c7799-1789538513158-full.webp
- Component on Kage: https://kage.design/component/portfolio-frame-feature-grid-5

## Before you start
Ask what the user's product and brand are, then apply the principles below to that product rather than reproducing the reference.

Build a dark two-column feature section. Put a short eyebrow, editorial heading, and supporting paragraph on the left; put a large light-gray rounded canvas on the right. The canvas contains a simple neutral content surface, a compact toolbar of annotation modes, and a few generic highlighted elements, boxes, or labels to show how the feature operates. Beneath the canvas, add a two-column dark feature grid with concise descriptions. Use #0b0d0d, #e8eaee, #191c1d, #323738, #f4f5f6, and #52afe1; radius 12–14px on major panels and 6px on controls. Tool buttons need selected, hover, and focus states. Keep the composition spacious and mobile-friendly.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- copy the exact annotation labels, code strings, or mockup
- add visual noise that obscures the annotated subject