Kage Design logo kage
procboss.com
ProcBoss faq component

Design analysis

A compact FAQ closes the light content area with a centered heading and two-column rows of pill-shaped expandable questions.

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/procboss/3737396f-2984-4e55-9600-739ab09d7da3-1791525908-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/procboss/3737396f-2984-4e55-9600-739ab09d7da3-1791525801598-full.webp
- Component on Kage: https://kage.design/component/procboss-faq

## Before you start
Ask what objections, setup questions, privacy concerns, and billing questions users most often have. Use the user's actual answers and terminology.

Build a compact FAQ section with a centered heading and a two-column accordion grid on desktop. Each item is a wide warm-white pill or rounded rectangle with a concise question, a chevron, and a hidden answer revealed on click. Use 1–2px dark borders, 12–18px radii, generous 14–18px horizontal padding, and clear hover, focus, expanded, and reduced-motion states. On mobile switch to one column. Keep the FAQ visually connected to the preceding mint background while giving each control enough contrast and touch area.

Never copy the reference's logos, product names, copy, illustrations or imagery.

More components