## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/jackalope/0b3edf93-8385-4e4a-8f92-3c01052ad81d-1789192903236-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/jackalope/0b3edf93-8385-4e4a-8f92-3c01052ad81d-1789192900792.webp
- Design on Kage: https://kage.design/designs/jackalope-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, type). Wait for answers. Everything below is applied to their product, not to the reference.

## Page structure
- Sticky top nav: wordmark left, center links (Product, Compare, Agents, Knowledgebase, Field notes), right side utility links, theme toggle, and a solid indigo pill CTA.
- Hero: oversized two-tone display headline (black phrase + indigo phrase), short subcopy naming integrations, an indigo pill CTA plus a "watch tour" text link; right side holds a product screenshot card with caption bar and play link. Subtle abstract line-art shapes tint the background.
- Feature bento: section headline, then a 2-col row of large cards followed by a 3-col row of smaller cards. Each card = pastel-tinted illustration panel on top (lavender, mint, cream, blush), then white body with eyebrow label, heading, one-line description, collapsible "How it works", and an arrow link.
- Inline CTA row: dark pill button + "see how it comes together" scroll link.
- "Bring your whole setup" diagram: bordered panel with a central mascot node connected to account/tool/context lists via arrow lines, followed by a 2x2 grid of icon-led feature blurbs separated by hairline rules, each with a small arrow link.
- Tabbed walkthrough: headline with offset indigo second line, three numbered tabs, and a large rounded lavender canvas containing a mock workflow illustration (task cards connected by lines to a review panel) with a small caption.
- Product screenshot showcase: heading, left column of anchor links, and a large framed UI screenshot over a paragraph; dark pill play button.
- Theme switcher section: two-tone heading, copy, colour swatch row + light/dark toggle on the left, app mockup card on the right.
- FAQ: two-column accordion list of questions on a light grey band, plus two external arrow links and a collapsed compatibility strip.
- Footer: saturated indigo block with "Get early access" headline, email input + submit, consent checkbox; below it an enormous white lowercase wordmark and four link columns (Product, Resources, Agents, Connect), legal line at bottom.

## Design language
- Background: near-white lavender-tinted grey (~#F1F0F7); cards pure white; footer a saturated indigo (~#5B5BD6 / #4F46E5 range).
- Accent: one electric indigo used for CTAs, active states, second-line headline colour, and links. Pastel panel tints (~#DCD9F5 lavender, #DDE8E0 mint, #EFE9DC cream, #F3DCDC blush) differentiate feature cards without adding new hues.
- Hierarchy: display headlines 56–96px, medium weight, two-tone (near-black first phrase, indigo second phrase), often offset to two lines. Body 15–16px grey; card eyebrows tiny uppercase letter-spaced labels.
- Layout: max-width ~1200px container, generous vertical padding, 12–24px card gaps; rhythm alternates dense card grids with airy single-column sections.
- Cards: 16–24px radius, 1px light border or none, very soft diffuse shadows; illustration panels fill the card top at fixed height.
- Buttons: pill radius; solid indigo primary with arrow icon, dark charcoal secondary, plain text links with arrow glyphs (↗ / →).
- Dividers: 1px hairline rules between feature blurbs and FAQ rows; minimal chrome elsewhere.
- Illustrations: simple line-art and flat mock UI cards; abstract squiggle line-art in the hero background.
- Motion: subtle only — hover arrow shifts, accordion expand, tab underline; no heavy animation.
- Interaction details: collapsible "How it works" per card, numbered tabs, light/dark and accent-swatch switcher.

## Never
- No jackalope mascot, antler imagery, wordmark, "jackalope" name, or any copy from the reference.
- No reuse of their screenshots, illustrations, icon set, or exact pastel/indigo palette — derive colours and tints from the user's brand.
- Never present the result as the reference product.