vibeide.dev
Design analysis
A simple two-column FAQ places a large section title beside stacked bordered questions, with the first answer expanded and the remainder collapsed.
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/vibeide/07b340e8-2f64-4d74-b3e0-eba165a9aca9-1793080890-6.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/vibeide/07b340e8-2f64-4d74-b3e0-eba165a9aca9-1793080830929-full.webp - Component on Kage: https://kage.design/component/vibeide-faq ## 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 FAQ section in a two-column layout: a large 30–34px heading on the left and an accordion list on the right. Each item is a low-contrast bordered row with a 14–16px question, a plus/minus control, and comfortable 16–20px padding; show one answer expanded by default with readable 13–14px muted text and inline links. Use #080909, #111312, #272a28, #eeeeeb, #969995, and mint for focus accents. Animate height and icon rotation gently, preserve keyboard focus visibility, and stack the columns on mobile. Never use the reference product name, questions, answers, links, or exact copy.
kage