composio.dev
Design analysis
A gradient developer callout combines an integration heading and button with a lightweight code panel and receipt-style result visual.
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/composio-instant/90b73b03-e2b9-4385-8074-6e8e2bc32f62-1792562874-8.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/composio-instant/90b73b03-e2b9-4385-8074-6e8e2bc32f62-1792562787795-full.webp - Component on Kage: https://kage.design/component/composio-instant-cta-2 ## Before you start Ask what the user's product is, who it serves, and what its brand voice and visual identity are. Apply the following principles to that product rather than copying the reference. Build a developer-focused CTA band using a pale blue-to-cyan gradient. Align a heading, short paragraph, and dark documentation button on the left; place a compact code snippet panel and a small usage/result receipt on the right. Use a two-column layout with 44–48px padding, a 34–40px heading, 14px copy, monospace code at 11–13px, translucent white panels, thin borders, and gentle shadows. The code should be generic and syntactically highlighted, with a copy affordance. Stack the columns on mobile and preserve readable contrast. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage