## 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/busabase/7d05ddcb-d0f9-4d81-8382-8bbb1120492e-1791612077-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/busabase/7d05ddcb-d0f9-4d81-8382-8bbb1120492e-1791612035007-full.webp
- Component on Kage: https://kage.design/component/busabase-feature-grid-2

## Before you start
Ask what fragmented behavior your product replaces and what shared outcome it creates. Ask for the user's brand palette and preferred visual metaphor, then apply these rules to that context.

Create a comparison section with a small uppercase eyebrow, a centered serif heading, and a readable explanatory paragraph. Use a two-panel visual: the left panel should show several slightly varied, lightly rotated cards representing disconnected work; the right should show one orderly shared workspace list or board. Connect them with a simple directional cue, not a decorative illustration. Underneath, add three equal-width bordered outcome cards, each with a small negative statement and a stronger positive statement. Use a quiet #f2f5f3 background, white #ffffff panels, #d9dedb borders, 10–12px corners, charcoal #1b1d1c, and muted #727976. Keep the comparison legible and static at first, with optional hover emphasis and reduced motion. On mobile, stack before/after panels and then the outcomes.

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