## 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/sineframe-m3/9bef993c-d1bd-4942-a7c3-753981df67d7-1791525888-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/sineframe-m3/9bef993c-d1bd-4942-a7c3-753981df67d7-1791525776498-full.webp
- Component on Kage: https://kage.design/component/sineframe-m3-feature-grid-3

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

Design a light split feature section showing how a product catches regressions between two versions. Use a large black headline and short explanatory paragraph on the left, followed by a dark monospace command block. On the right, show a bordered white comparison card with two version headings and a few rows whose status cells clearly distinguish passing from failing behavior. Keep the layout editorial and sparse rather than dashboard-heavy.

Use warm white #f7f6f3, black #171717, body gray #676660, white card #fffefa, and borders #cbc9c4. Use 1px borders, 6px radius, 64–88px vertical padding, and a 16px body line-height. Headings should be 42–48px with tight leading; code should be 11–12px. On mobile, stack content and allow the comparison card to scroll horizontally. Add clear focus states to any interactive rows.

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