## 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/qagent/ac07fafb-2e50-4f4b-8444-88a4bcf31a5f-1789711433120-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/qagent/ac07fafb-2e50-4f4b-8444-88a4bcf31a5f-1789711430636.webp
- Design on Kage: https://kage.design/designs/qagent-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have, including the product name, logo, colours, and type choices. Wait for their answers before designing. Apply everything below to their product, not to the reference.

## Page structure
1. **Top navigation:** Use a slim, full-width header with a small product mark and name on the left, two or three text links in the middle, and sign-in plus a filled primary action on the right.
2. **Hero:** Create a generous two-column hero on a warm off-white background. Put a small status/category pill, an oversized multi-line headline with one accent-coloured line, supporting copy, a primary CTA, and compact reassurance bullets on the left; put a raised product-quality or analytics card on the right.
3. **Problem framing:** Add a thin horizontal divider, then a centered section with a small mark above a large two-line problem statement and two short explanatory paragraphs. Keep this section airy and text-led.
4. **How it works introduction:** After another divider, center an eyebrow, a large heading, and a concise explanation. Follow it with four equal cards in one row, numbered with circular red badges and describing the sequential workflow.
5. **Three ingredients:** Add a centered subsection title and subtitle, then three wide cards. Each card has a small square icon area, an ingredient label, a title, explanatory copy, and a pale inset example/code strip.
6. **Scored dimensions explorer:** Introduce the section with an eyebrow, centered heading, and helper text. Build an eight-item compact grid of selectable dimension tiles; visibly emphasize one active tile with a red outline and tinted background. Place a larger detail panel beneath with a title, description, status badge, and a realistic scenario/result strip.
7. **Normal-behaviour safeguards:** Add a centered heading and short explanation, then four compact cards covering exception cases. Keep the cards visually consistent with earlier grids but use small varied symbols and concise copy.
8. **Audit trail demonstration:** Center an eyebrow, title, and instruction, then show a narrower framed audit-report panel. Use stacked white/pale rows with numbered red badges, a pass state, query/rubric columns, agent response, evaluator findings, and a highlighted expected-behaviour row.
9. **Inline CTA strip:** Place a wide, nearly black rounded rectangle with the CTA copy on the left and two actions on the right: a red primary button and a dark secondary button.
10. **Core evaluation suite:** After a large divider and renewed eyebrow, present a large centered heading and subtitle. Follow with a six-card, three-column feature grid; each card has an icon tile, title, description, and small metric/automation metadata footer.
11. **Audience section:** Add another divider, then an eyebrow and centered statement aimed at the target user. Follow with three equal audience cards, each with a small category label, a distinct symbol, title, explanatory paragraph, and understated bottom annotation.
12. **Pricing:** Use a divider, centered pricing eyebrow, heading, and supporting text. Add a slim savings/value callout, then two large side-by-side pricing cards. Make the recommended plan more prominent with a red border, top badge, stronger CTA, price, limits, and checklist; keep the free plan quieter with a light CTA.
13. **Final CTA:** Finish the main content with a large dark rounded panel containing a small product mark, centered question-style headline, short supporting copy, and a single red CTA.
14. **Footer:** Use a thin top rule and a restrained multi-column footer. Put brand and short description on the left, product links in the center, legal/support links on the right, and a small copyright line.

## Design language
- Build hierarchy through oversized, sentence-case headlines, compact uppercase or letter-spaced eyebrows, and restrained body copy; use approximately 56–64px hero type, 32–42px section headings, and 13–16px body text with generous line height.
- Start with wide, quiet vertical spacing and progressively introduce denser card grids and product UI as the page explains the system. Use dividers to mark major narrative transitions without adding heavy decoration.
- Use a warm ivory background around `#F6F2E8` or `#F3EFE5`, near-black text around `#1D1C18`, and muted brick red around `#A64035` for CTAs, badges, active states, and selected headline phrases. Use pale cream card fills around `#EEE9DC` and soft white inset panels around `#FAF8F1`.
- Pair a clean modern sans-serif for headings and body with a subtle monospace or letter-spaced treatment for metric labels, eyebrow text, examples, and metadata. Keep headings dark and direct; reserve red for emphasis rather than whole paragraphs.
- Treat cards as lightly raised paper panels: 10–14px corner radii, 1px translucent beige-gray borders, very soft shadows, and minimal gradients. Use red outlines only for selected or recommended states.
- Keep controls rectangular with modest rounding, compact padding, and clear text labels. Buttons use solid brick red with light text for primary actions and near-black or pale outlined treatments for secondary actions.
- Make product demonstrations feel operational rather than decorative: score bars, checklists, numbered steps, tabs/tiles, audit rows, status badges, and small examples should communicate the workflow.
- Use simple small symbols or neutral icon placeholders inside pale square tiles. Avoid relying on large illustrations; let the information architecture and UI specimens carry the visual interest.
- Use subtle hover and focus states: cards may lift slightly, selectable dimension tiles may gain a red border/tint, and buttons may darken. Keep motion short and quiet, with no dramatic parallax.
- Ensure the responsive version collapses two-column hero and pricing layouts into one column, turns card rows into stacked or horizontally scrollable groups, preserves generous section spacing, and keeps the CTA panel readable on narrow screens.

## Never
- Do not copy the reference’s logos, wordmarks, product names, exact copy, illustrations, photography, icons, or branded marks.
- Do not present the result as QAgent or imply affiliation with the reference product.
- Do not reproduce its exact pricing, claims, metric names, sample text, or audit content; invent content appropriate to the user’s product.
- Do not replace the structured, text-and-UI-led composition with generic hero artwork, stock imagery, or an unrelated visual theme.