## 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/loqua/e5cf041a-edc7-487a-b4b8-8f4d563da4de-1789192872-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/loqua/e5cf041a-edc7-487a-b4b8-8f4d563da4de-1789192838731-full.webp
- Component on Kage: https://kage.design/component/loqua-card

## Before you start
Ask what measurable improvement the user's product creates and what a believable before/after comparison would be for its audience. Apply the pattern using their brand.

Build a wide comparison/demo section on the same ivory background. Add a small muted section label and divider above two side-by-side cards. The left card should communicate the old workflow with a neutral beige surface (`#eee9dc`); the right card should use a pale brand accent such as `#d8f56c` to signal the improved workflow. Put one large numeric metric and a compact unit in each header, then show a simplified content preview below with generous padding. Use 14–18px radii, thin low-contrast borders, and a small dark playback/control pill in the improved card. A small angled accent badge may overlap the improved card to add energy. Stack the cards vertically on narrow screens.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- fabricate implausibly precise performance claims
- make the comparison so dense that the two outcomes are hard to scan