botbus.io
Design analysis
A new numbered subsection focuses on wearable actions, using a short heading and explanation above a wide framed visual containing several device states and labels.
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/botbus/3351c24c-0aff-40a1-9a6d-203e8c2d3da7-1791525845-4.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/botbus/3351c24c-0aff-40a1-9a6d-203e8c2d3da7-1791525750475-full.webp - Component on Kage: https://kage.design/component/botbus-feature-grid-2 ## Before you start Ask what the user's product and brand are, then apply the principles below to that product rather than reproducing this reference. Build a dark subsection for a secondary workflow or device surface. Begin with a small section index and uppercase category label, then use a two-column heading row: a bold left-aligned title and a concise explanatory paragraph on the right. Below, add one wide dark rounded showcase panel with several evenly spaced miniature UI states or device cards and short pill labels underneath. Use consistent baseline alignment, generous 28–48px gaps, a #181818 panel, #2b2b2b border, 20px radius, and restrained gray metadata. The interaction can be a horizontal carousel or static responsive grid; on mobile, allow horizontal scrolling. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage