coldiq.com
Design analysis
The hero pairs a large two-line editorial headline with a terminal-style product demonstration, then reinforces the promise with ecosystem labels and a low-friction signup note.
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/coldiq-x-slack/e029c4ff-104d-4249-8c7e-44961fb1d1f9-1790748086-1.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/coldiq-x-slack/e029c4ff-104d-4249-8c7e-44961fb1d1f9-1790748039437-full.webp - Component on Kage: https://kage.design/component/coldiq-x-slack-hero ## Before you start Ask what the user's product is, what concrete outcome it creates, and which proof or product interaction best demonstrates that outcome. Apply the principles below to that product. Create a dark, high-impact hero with centered alignment and generous vertical breathing room. Use a small eyebrow badge, a large two-line serif or humanist headline, and a single orange accent phrase within the headline. Follow with a concise supporting paragraph constrained to roughly 560px. Place a wide terminal/product-demo frame below the copy, then add a small compatibility or ecosystem line and a low-friction reassurance beneath it. Use #171816 as the background, #f1eee8 for the main headline, #ff8a00 for emphasis, and #aaa9a2 for body copy. The demo should look like a real interface rather than decorative art: 1px multicolor or amber edge treatment, dark panel #1e201e, monospace text, subtle separators, and one clear inline action. Use a 64–76px desktop headline with tight line-height, 16px body copy, 24px eyebrow spacing, and a max content width around 720px. Keep the hero action or interaction visually legible without overwhelming the headline. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage