xem.email
Design analysis
A soft lavender split section pairs an expressive serif statement with a realistic conversation UI, making a collaborative feature feel human and approachable.
Prompt preview
## 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/xem/cfdda217-53f8-4a81-998a-9d07a076ba78-1790143671-3.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/xem/cfdda217-53f8-4a81-998a-9d07a076ba78-1790143376275-full.webp - Component on Kage: https://kage.design/component/xem-feature-grid-2 ## Before you start Ask what collaborative or conversational capability the user's product has and what emotional response the brand should create. Apply the layout logic to that product. Build a two-column feature band on a pale lavender background around #eeeafa. Put a small eyebrow, large serif heading with an italic phrase, body copy, and understated link on the left; put a rounded, lightly elevated application panel or conversation mockup on the right. Keep both columns vertically centered and align them to a shared max-width. Use dark charcoal-green text #1d2c27, muted gray-green supporting copy, 16–24px gaps, 20px card radius, and a very soft border/shadow. On mobile, stack the text above the visual. Make the UI mockup feel functional with message rows, fields, and a clear send affordance, but use original content. Never use the reference's logo, product name, copy, illustrations, or imagery.
kage