## 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/thousand/cb10af68-535d-4246-97d9-03dbd24306a9-1789106640-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/thousand/cb10af68-535d-4246-97d9-03dbd24306a9-1789106570706-full.webp
- Component on Kage: https://kage.design/component/thousand-faq

## Before you start
Ask me what my product is, who it is for, and what brand personality, colours, typography, and conversion goal I want. Then apply the principles below to create an original version for my product—not a copy of the reference.

## Build this component
Create a prominent FAQ/conversion callout section that can sit near the end of a landing page. Treat it as a single, self-contained panel: a large rounded rectangle with an energetic accent background, a short highlighted headline, supporting microcopy, and one primary action.

### Design language

- **Layout and alignment:** Use a full-width section with generous horizontal padding. Place one large panel inside the page container, with a maximum width around 1240–1280px and a minimum height around 420–470px on desktop. Centre the content both horizontally and vertically. Keep the content column narrow enough for a confident headline and short supporting line; aim for roughly 700–800px maximum text width.
- **Responsive behaviour:** On smaller screens, reduce the panel’s minimum height and padding while preserving generous breathing room. Let the headline wrap naturally, keep the CTA comfortably tappable, and avoid making the panel edge-to-edge if the surrounding page uses a visible gutter.
- **Typography hierarchy:** Use a very large, heavy display headline as the focal point, approximately 52–64px on desktop with tight line-height around 0.95–1.05. Place the headline inside a contrasting light or white rounded highlight treatment, with enough horizontal padding to read as a deliberate label rather than a text box. Use a smaller monospaced or technical-looking supporting line beneath it, approximately 14–16px, with increased letter spacing and subdued contrast. Keep the CTA label short and sentence case.
- **Spacing:** Give the panel roughly 72–96px of vertical padding on desktop. Separate the highlighted headline and supporting line by 14–22px, then place the CTA around 42–52px below the supporting line. Use consistent internal spacing rather than filling the panel with extra content.
- **Colour:** Use a vivid, warm accent background such as golden yellow around `#F7B820` or `#F4B51F`. Use a soft warm off-white page background around `#F5F1E7`. The headline highlight can use `#FFFDF7` or another light neutral, while primary text and the CTA use near-black around `#171615`. Adjust these colours to the user’s brand while preserving strong contrast and a clear visual hierarchy.
- **Borders and radius:** Give the outer panel a generous rounded radius around 24–30px. Use a smaller but still soft radius around 8–12px for the headline highlight. Avoid heavy borders; if separation is needed, use a very subtle warm neutral border or inset shadow.
- **CTA interaction:** Make the dark pill button the only dominant action. Use horizontal padding around 28–34px, vertical padding around 14–16px, and a radius of 999px. Add a restrained hover state such as a slight upward movement, a small brightness change, or a subtle shadow; add a visible keyboard focus ring. Ensure the hit area is at least 44px high.
- **FAQ intent:** If this is implemented as an actual FAQ ending, use the callout as the resolution or next-step panel after the questions. Keep any accordion controls elsewhere on the page visually separate; do not overload this panel with multiple expandable rows.
- **Accessibility:** Use semantic heading and button/link elements, preserve logical focus order, maintain WCAG AA contrast, and make the highlighted headline readable when it wraps. Respect reduced-motion preferences.

## Never

- Never copy the reference’s logos, product names, brand identity, or exact wording.
- Never reuse its headline, supporting copy, CTA label, or any other product-specific text.
- Never reproduce the exact layout as a pixel-for-pixel clone; adapt the structure to my product and brand.
- Never use illustrations, photographs, or imagery from the reference.
- Never add decorative elements that compete with the headline and single CTA.
- Never sacrifice responsive behaviour, keyboard accessibility, or readable contrast for visual similarity.