## 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/typewise-nova/b4948f23-79f3-4392-9236-ca27a7b6b602-1789106444891-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/typewise-nova/b4948f23-79f3-4392-9236-ca27a7b6b602-1789106441033.webp
- Design on Kage: https://kage.design/designs/typewise-nova-landing-page

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

## Page structure
1. **Announcement strip:** Place a slim full-width blue gradient banner above the navigation with a short timely offer and an underlined action link.
2. **Primary navigation:** Use a black header with the product mark at left, grouped dropdown links in the center, and sign-in plus a bright primary trial button at right.
3. **Hero:** Center a small uppercase eyebrow, an oversized multiline headline with one key phrase in blue gradient, a short supporting line, two CTAs, and a low-emphasis reassurance note.
4. **Hero product video:** Add a large rounded, thinly bordered dark media frame below the hero; use a subtle blue atmospheric glow and a centered circular play control over a product workflow preview.
5. **Launch promotion card:** Follow with a wide rounded blue gradient card containing an uppercase kicker, centered offer headline, and white pill CTA.
6. **Proof metrics:** Present a horizontal row of large figures, separated by faint vertical rules, with compact labels and a rating block.
7. **Trusted-by logos:** Add a centered trust statement and two rows of subdued monochrome customer logos, then a thin divider.
8. **End-to-end resolution section:** Introduce a centered section heading and subtitle, followed by a two-column feature layout: a dark product illustration/panel on the left and three stacked benefit statements on the right, with one blue-highlighted statement and a text link below.
9. **Workspace section:** Use a small blue uppercase eyebrow, centered heading and explanatory copy, then a large bordered screenshot of the workspace/ticket table spanning most of the content width.
10. **Omnichannel strip:** Add a wide dark bordered panel with copy on the left and a grid of small pill-like channel buttons on the right, showing that the system works across multiple channels.
11. **Why-this-product comparison:** Center an eyebrow and heading, then show a compact comparison table contrasting conventional platforms with the user’s product; visually tint the preferred column blue-purple.
12. **Audience split:** Add an eyebrow and centered question, then two equal bordered cards for different customer segments. Give each a small uppercase label, heading, checkmarked benefit list, and blue text link.
13. **Conversational setup feature:** Insert a wide rounded panel with faint blue/purple ambient lighting. Put the setup explanation and link on the left, and a compact assistant chat mockup on the right.
14. **Production proof/testimonials:** Introduce a left-aligned eyebrow and large heading with a secondary button. Below, use three equal testimonial columns separated by vertical rules, each with a large coloured percentage, short metric label, quote, customer mark, and attribution.
15. **FAQ:** Center the heading, then stack wide accordion rows with dark gray fills, subtle borders, bold questions, and blue plus/minus controls. Keep the first answer expanded while the others remain collapsed.
16. **Final CTA:** Use a large rounded bordered panel with a blue-violet glow, centered heading, supporting copy, and the same primary/secondary CTA pair as the hero.
17. **Footer:** Separate the footer with a thin top rule. Place the brand summary and recognition badges in the first column, then several compact navigation columns for platform, solutions, resources, and company.
18. **Legal footer:** Add a bottom rule and a final row of compliance pills on the left, legal links and copyright on the right.

## Design language
- Build hierarchy with a restrained type scale: small uppercase blue eyebrows, large white section headings, medium-weight supporting copy, and compact gray metadata.
- Alternate spacious, centered narrative sections with dense product panels, tables, cards, and testimonial columns so the long page changes rhythm rather than becoming a continuous hero layout.
- Use a near-black background around `#050507` to `#09090d`, charcoal panels around `#101018` to `#161620`, and thin borders around `#272735`.
- Treat saturated blue as the action colour, approximately `#3d6dff` to `#4d78ff`; blend blue into violet around `#5541d8` for announcement bars, CTA panels, and ambient glows. Keep most logos and secondary interface details gray and desaturated.
- Pair a clean modern sans-serif with generous line-height. Scale hero and major section headings boldly, but keep body copy narrow, muted, and substantially smaller; use uppercase tracking for labels and eyebrow text.
- Use rounded rectangles with moderate radii, generally 12–16px for panels and pills for controls. Prefer 1px outlines and soft coloured ambient shadows over heavy drop shadows.
- Make primary actions bright blue or white-on-blue pills; keep secondary actions dark charcoal with a subtle border. Repeat CTA styling consistently at the hero and final conversion section.
- Use product screenshots as dark, high-contrast framed surfaces with small controls and restrained highlights. Let blue glows sit behind the frames without overpowering the content.
- Keep tables and comparison panels compact and legible with faint row rules, selective column tinting, and clear alignment rather than decorative ornament.
- Use simple interaction cues: dropdown chevrons in navigation, play control on the hero media, plus/minus FAQ toggles, hoverable bordered cards, and text links with arrows. Motion should be subtle—soft glow shifts, button transitions, and gentle panel reveals only.

## Never
- Do not copy the reference product’s logos, wordmarks, product names, wording, customer logos, testimonials, badges, screenshots, illustrations, photography, or icon sets.
- Do not present the result as Typewise or Nova. Replace all content with the user’s own product, audience, brand assets, and claims while preserving the reusable layout and design principles.