Kage Design logo kage
chime.com
chime.com card component

Design analysis

A pale rounded promotional panel uses a left text column and right financial-dashboard visual to explain an adjacent product capability, ending with a bright CTA.

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/chime-com/8a783617-6b1d-44ef-a500-84b69ae63fa0-1789146542-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/chime-com/8a783617-6b1d-44ef-a500-84b69ae63fa0-1789146449552-full.webp
- Component on Kage: https://kage.design/component/chime-card

## Before you start
Ask what adjacent product capability the user's audience should discover and what brand colors and visual assets represent it. Then build a promotional split card.

Build a wide, softly tinted promotional card with a two-column layout and substantial whitespace. Place a compact eyebrow, a three-line bold headline, short explanatory paragraph, and filled CTA on the left; place a product screenshot, data visualization, or abstract visual on the right. Use an off-white or very light gray-green surface around #F5F7F3, 16px radius, and minimal shadow. Use dark green typography #064A35, 30–38px headline sizing, 15–16px body copy, and a bright green CTA around #19C477 with 6–8px radius. Keep the text column around 42% width and the visual around 38%, vertically centered. Make the visual decorative but understandable and stack it below the copy on narrow screens.

Never: copy the reference's investment wording, product UI, chart, logos, product name, imagery, or exact copy.

More components