## 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/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106640138-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106634481.webp
- Design on Kage: https://kage.design/designs/noodle-seed-landing-page

## Before you start
Ask the user what they are building, who it is for, and which brand assets they already have (name, colours, type, logo, imagery, and tone). Wait for their answers before designing. Apply every instruction below to that product, not to the reference site.

## Page structure
1. **Announcement bar and navigation** — Begin with a very thin announcement strip above a black header. Use a compact logo area, sparse navigation links with dropdown indicators, sign-in text, and a glowing primary pill button.
2. **Hero** — Center a very large, lightweight two-line headline with a muted one-line explanation and two compact CTA buttons. Keep the surrounding black space generous and add a floating assistant/chat pill near the lower-right edge.
3. **Launch/proof panel** — Follow with a horizontal Product Hunt or launch announcement: place an illustrative product asset and badge on the left, and a small uppercase eyebrow, headline, and support line on the right.
4. **Recognition and credibility strip** — Use a divided horizontal band for an award mention on one side and a short “backed by” statement with partner names on the other.
5. **Embedded assistant use-cases intro** — Start a major section with a small uppercase label, a large left-aligned heading, and explanatory copy plus a text link on the right.
6. **Interactive use-case selector** — Add a rounded segmented control with several use cases and a play/control affordance. Below it, show the selected workflow title and a large rounded embedded product demonstration card, followed by small build/powered-by metadata and two CTA buttons. End the section with a thin “more interactive examples” row.
7. **Production-ready capabilities panel** — Transition to a wide dark panel with a soft, blurred amber-to-burgundy atmospheric gradient. Place a large heading and supporting sentence above three evenly spaced capability columns covering identity/customer context, permissions, and operational control.
8. **Customer logo strip** — Add a thin bordered band with a tiny uppercase trust label and a muted row of customer wordmarks or neutral text marks.
9. **Product-control overview** — Return to the plain black background. Use a large heading and short paragraph at the top-left with two text links, then center a technical runtime diagram: a product node feeds a glowing central chip, which connects to multiple model/client nodes and a bottom row of governance capabilities.
10. **Signup continuity section** — Use a two-column layout with a large multiline heading and CTA on the left, and three narrow vertical step columns on the right explaining how a user progresses from a useful pre-signup result to an authorized product-integrated completion.
11. **Security/control section** — Present a large heading and introductory copy on the left. Below, use four numbered rows—Connect, Authorize, Operate, Prove—with short explanatory text and fine horizontal rules; place a bordered runtime monitoring preview on the right with a tiny status header and subdued central visual.
12. **FAQ** — Create a spacious section with heading and supporting sentence, followed by five full-width accordion rows. Keep each question left-aligned and place a small plus control at the far right, separated by subtle rules.
13. **Final CTA** — Center a large two-line statement inside a constrained column, with a short supporting line and a light filled pill CTA between horizontal rules.
14. **Footer** — Finish with a multi-column footer: brand and description with compliance badges on the left, then Company, Products, and Resources link groups. Add a lower copyright/legal row and a large low-contrast dotted or pixel-text brand motif across the bottom.

## Design language
- Build hierarchy with scale and whitespace rather than heavy decoration: use a 64–96px lightweight display heading for hero and major sections, 32–52px section headings, 14–16px body copy, and 10–11px uppercase mono-like eyebrows with generous letter spacing.
- Keep the page predominantly black (`#000000` to `#050505`) with white headings (`#F5F5F2`), soft gray body text (`#858585`), and near-black panels (`#101010`). Use thin gray borders around `#1D1D1D`, not prominent cards or shadows.
- Reserve warm colour for emphasis: amber/orange accents around `#B56A2A` and `#E89A42`, with very soft burgundy/brown gradients such as `#26130F` and `#35151F` behind selected feature sections. Do not turn the whole interface into a colourful gradient design.
- Pair a clean modern sans-serif for headings and UI with a restrained monospaced or letter-spaced treatment for labels, statuses, and tiny metadata. Keep headings light in weight and tightly line-heighted; make body copy short and comfortably spaced.
- Use rounded controls and demo containers with medium-to-large radii (roughly 18–28px), but keep structural sections square and editorial. Buttons are compact pills with subtle borders; primary buttons receive a faint amber outer glow, while secondary buttons remain black and outlined.
- Change rhythm down the page: begin with sparse centered hero space, move into proof and logos, become denser and more interactive in the demo and architecture sections, then use numbered rows and accordions for information scanning before opening back up for the final CTA.
- Treat borders as separators and grouping devices. Use one-pixel horizontal rules, occasional vertical column rules, and almost no conventional drop shadows. Let large black gaps establish section boundaries.
- Make diagrams, screenshots, and runtime panels feel like product evidence: use restrained line connectors, outlined nodes, tiny labels, a central warm-lit object, and quiet status indicators rather than decorative illustrations.
- Where interaction is visible, use clear active states: a selected use-case tab becomes a white filled pill with dark text, accordion rows expose a plus affordance, and buttons brighten slightly on hover. Keep motion subtle—fade/slide section content, gently pulse status or glow, and avoid distracting animation.
- Make the page responsive by collapsing multi-column proof, capability, step, security, and footer layouts into readable stacked blocks while preserving the same dividers, large type, and generous black space.

## Never
- Do not copy the reference product’s logos, wordmarks, product names, exact copy, illustrations, photography, customer marks, screenshots, icon sets, or distinctive cat-in-box artwork.
- Do not present the result as Noodle Seed or imply an affiliation with it. Replace all reference content with the user’s own product, audience, brand assets, and workflow examples.
- Do not fill the page with generic gradient cards, excessive shadows, dense navigation, or colourful decoration that conflicts with the restrained black editorial system.