## 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/adscope/d628eaa8-0259-4816-ad11-db69e3ce98d4-1789106702-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/adscope/d628eaa8-0259-4816-ad11-db69e3ce98d4-1789106621890-full.webp
- Component on Kage: https://kage.design/component/adscope-feature-grid

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, typography, and tone they want to use. Then apply the principles below to create an original comparison feature section for their product—not a copy of the reference.

## Build this section
Create a responsive, editorial-style feature comparison section that contrasts an inefficient “old way” with the product’s preferred workflow. Use it to communicate a clear before-and-after story in one glance.

### Layout and alignment
- Place the section on a very light warm-gray background, approximately `#F7F7F5`.
- Start with a centered heading block above the cards.
- Use a large, confident headline with a deliberate line break or constrained max-width so it forms two balanced lines on desktop.
- Add a short centered supporting sentence below the heading, with a comfortable gap before the comparison cards.
- Below it, place two equal-width cards in a two-column grid with a moderate gap between them. Keep both cards the same height and align their internal content.
- Constrain the whole section to roughly `1180–1240px` wide, with generous horizontal padding and substantial vertical breathing room.
- On small screens, stack the cards vertically while preserving the heading’s readable max-width and clear hierarchy.
- Inside each card, align the title and every list row to the same left edge. Give each row enough width for copy to wrap naturally rather than becoming cramped.

### Typography hierarchy
- Use a clean modern sans-serif with an understated, product-led feel.
- Make the main heading large and near-black, approximately `52–60px` on desktop with a `1.05–1.12` line-height and regular-to-medium weight.
- Set the supporting text around `18–20px`, with a line-height near `1.45`.
- Card titles should be prominent but clearly subordinate to the main heading, around `32–36px`, medium weight.
- List text should be around `18px` with a relaxed `1.35–1.45` line-height. Allow each item to wrap to a second line when needed.
- Use sentence case and short, concrete statements. Keep the negative and positive columns parallel in structure so the contrast is easy to scan.

### Cards, borders, and spacing
- Give both cards generous internal padding, approximately `64px` on desktop and `32px` on mobile.
- Use a large radius around `22–26px`.
- The “old way” card can be filled white with no obvious border, creating a soft, quiet panel.
- The “preferred way” card should be white with a thin dark neutral outline around `1px`, approximately `#1A1A1A`, to make it feel intentional and selected.
- Use about `34–42px` between the card title and first list item, and `24–30px` between list rows.
- Keep the section visually calm: no shadows, gradients, decorative illustrations, or dense UI chrome.

### Status markers and interaction
- Prefix every list item with a small circular status marker, approximately `22–26px` in diameter, followed by a comfortable horizontal gap.
- For the problem column, use a soft coral/red marker around `#F06464` with a simple dark or white “×” symbol.
- For the solution column, use a bright pale-lime marker around `#D9F55C` with a compact dark checkmark.
- The markers should remain vertically aligned with the first line of each item, not centered against a multi-line paragraph.
- This is primarily a communication component, so interaction should be subtle: preserve hover and keyboard focus states only if the cards or rows are made clickable. Do not make the comparison feel like a tab interface.
- Respect reduced-motion preferences and ensure sufficient colour contrast beyond the marker colour alone.

### Content strategy
- Write a short, emotionally recognizable heading that frames the cost of the current workflow and the simplicity of the new one.
- The left column should describe friction, fragmentation, delay, or manual effort.
- The right column should describe specific outcomes, visibility, speed, or control enabled by the product.
- Keep each item concrete and roughly similar in length across both columns. Avoid vague claims and unsupported superlatives.

## Never
- Never reuse the reference’s logo, product name, brand name, or exact copy.
- Never copy the exact number or wording of list items from the reference.
- Never use the reference’s illustrations, screenshots, imagery, icons, or distinctive branded assets.
- Never assume the user’s product is an advertising dashboard or reproduce domain-specific language unless it fits their product.
- Never turn the section into a generic pricing table, dense dashboard, or decorative bento grid.
- Never sacrifice responsive behaviour, semantic heading order, keyboard accessibility, or readable contrast for visual similarity.