## 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/modeinspect/f4214789-eaef-4abd-8d9d-34964c707234-1789106455022-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/modeinspect/f4214789-eaef-4abd-8d9d-34964c707234-1789106444887.webp
- Design on Kage: https://kage.design/designs/modeinspect-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 choices, logos, and imagery). Wait for their answers before proceeding. Apply the reference’s design language to their product, not to the reference product.

## Page structure
Build a long-form responsive landing page with these sections, in this order:
1. **Floating header** — place a compact pill-like brand label at left, centered navigation links, and sign-in/get-started actions at right over the hero background.
2. **Hero** — use a large two-line headline, a short supporting paragraph, two CTAs, and a large product UI canvas/mockup below; keep the copy block left aligned with generous empty space around it.
3. **Customer logo strip** — separate the hero from the content with a thin rule, a small uppercase proof label, and a restrained multi-logo row.
4. **Visual canvas explainer** — introduce the core product concept with a large headline, a short paragraph, a four-part horizontal step/tab strip, and a wide embedded product demonstration image or interactive frame.
5. **Design-engineer feature grid** — add a section headline and supporting copy followed by a three-column masonry-like grid of pale cards. Each card has a small index, eyebrow, title, body copy, and a simple UI illustration or empty visual area. Cover components, tokens, breakpoints, capture, dynamic states, code, real data, and AI exploration.
6. **Code section** — switch to near-black. Pair a large headline and paragraph on the left with a numbered vertical list of engineering benefits and a bordered code/example card on the right. Make the first list item active and the remaining items subdued.
7. **Production proof section** — return to the warm light background. Lead with a metric-focused headline and paragraph, then place one large featured customer story card with metrics, story CTA, and quote, followed by three smaller testimonial cards.
8. **Workflow section** — use a dark, subtly textured/gradient background. Add a headline, short paragraph, and three equal translucent cards describing prototyping, design QA, and shipping PRs.
9. **Speed comparison** — remain in the dark visual family, center the heading and explanation, then compare two large bordered cards: an old handoff process with a long timeline versus a faster canvas-to-PR process with lime badge, duration, and checked benefits.
10. **FAQ** — return to the warm light background. Use an oversized two-line heading with a contrasting display treatment on selected words, followed by full-width divider rows with questions and circular plus controls.
11. **Closing CTA** — use a black panel with an enormous centered stacked “ship today”-style headline, bright lime primary CTA, secondary outlined CTA, and ample vertical breathing room.
12. **Footer** — finish with a thin top rule, a compact product description, grouped company/product/social links, a dark media or decorative preview block, and a small legal bar with copyright and policy links.

## Design language
- Build hierarchy through extreme scale contrast: body text is small and quiet, section headings are large and tightly leading, and the closing CTA is the largest type on the page.
- Alternate page rhythm deliberately: spacious hero and showcase areas, dense card grids for capabilities, dark list-and-code sections for engineering credibility, then sparse FAQ and CTA areas.
- Use a warm near-white base around `#e9e6df`, near-black around `#101010`, soft card white around `#f5f3ee`, and an acidic lime accent around `#c9ff70` or `#d2ff78`.
- Keep most text black on light surfaces and warm white on dark surfaces. Reserve lime for primary buttons, active states, small status marks, badges, focus outlines, and occasional glow; do not turn the whole page green.
- Pair a clean geometric sans-serif for readable UI and body copy with a narrow distressed, pixel, or stencil-like display face for selected words in major headlines. Keep the display treatment sparing and legible.
- Use a restrained editorial grid: wide centered container, generous horizontal padding, thin horizontal rules, and three-column card layouts that collapse cleanly on smaller screens.
- Treat cards as lightly elevated paper panels: pale fills, 1px low-contrast borders, modest 10–14px corner radii, and soft shadows only on product mockups and featured proof cards. Dark cards use subtle gray borders rather than heavy shadows.
- Make product visuals feel like real interfaces: show panels, tokens, controls, code, responsive frames, cursors, and data rather than generic illustrations. Keep screenshot frames large and centered with layered depth.
- Use transitions that are quiet and functional: hover lift of 2–4px, lime button glow, active FAQ row emphasis, and smooth accordion expansion. Avoid bouncy animation; scroll reveals may be short fades or upward moves.
- On responsive layouts, preserve the section alternation and headline impact, but stack nav/actions, feature cards, testimonials, comparison cards, and footer columns vertically. Keep touch targets generous.

## Never
- Do not copy any logos, wordmarks, product names, copy, illustrations, photography, or icon sets from the reference.
- Do not present the result as Modeinspect or imply affiliation with it.
- Replace all reference content with the user’s product, audience, brand assets, and original interface examples.