jackalope.dev
Design analysis
A large, simple heading introduces a two-column accordion with generous row spacing and consistent circular expand buttons, followed by secondary resource links.
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/jackalope/0b3edf93-8385-4e4a-8f92-3c01052ad81d-1789193038-7.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/jackalope/0b3edf93-8385-4e4a-8f92-3c01052ad81d-1789192903236-full.webp - Component on Kage: https://kage.design/component/jackalope-faq ## Before you start Ask what questions your users most commonly have before adopting the product and what support or resource links should follow. Use those answers to populate this pattern. Create an FAQ section on a clean near-white background. Use a large left-aligned heading, then a two-column list of accordion rows. Each row should have a concise question, a thin top or bottom rule, and a circular outlined plus/chevron control aligned to the far edge. Keep rows tall enough for easy touch interaction and reveal answers inline with a smooth height transition. Finish with two understated text links for related resources and a full-width divider. Use #fafafd background, #1b1b24 text, #d9d8df rules, indigo #4f43df for active controls, 32–44px heading type, 14–16px questions, and 20–24px row padding. Collapse to one column below tablet width and support keyboard focus, aria-expanded, and reduced motion. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage