## Reference images

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

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/typewise-nova/b4948f23-79f3-4392-9236-ca27a7b6b602-1789106477-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/typewise-nova/b4948f23-79f3-4392-9236-ca27a7b6b602-1789106444891-full.webp
- Component on Kage: https://kage.design/component/typewise-nova-feature-grid

## Before you start
Ask the user what their product does, who it is for, and what their brand personality, colour palette, and typography preferences are. Then apply the principles below to create an original version for their product rather than reproducing the reference.

## Build a controlled AI feature-grid section
Create a responsive website section that explains how the user's product delivers value while keeping the user in control. The composition should feel premium, calm, technical, and trustworthy, with a dark visual foundation and one electric accent colour.

### Structure and layout
- Use a full-width section with a near-black background, approximately `#08080B`, and generous vertical breathing room: around `96–128px` top and bottom on desktop.
- Add a subtle 1px horizontal divider near the top of the section in a low-contrast charcoal, approximately `#17181D`.
- Constrain the content to a centered max width of roughly `1040–1160px`.
- Place a centered heading and supporting sentence above the feature content.
- Below the intro, use a two-column layout: a visual product preview on the left and a stacked narrative list on the right. The visual column can be slightly wider, around 55–60% of the available width.
- Keep the layout aligned to a clear vertical rhythm. On smaller screens, collapse to one column, placing the preview first and the narrative directly below it.
- Finish with a centered text link or understated CTA below the main grid.

### Typography hierarchy
- Use a clean contemporary sans-serif or the user's brand typeface.
- Make the main heading large and confident, approximately `44–52px` on desktop, with a weight around 500–600, tight line-height near `1.05`, and slightly negative tracking.
- Keep the supporting copy at `16–18px`, with relaxed line-height and muted contrast.
- Each feature statement should be short and scannable: approximately `28–32px`, medium weight, and tightly spaced.
- Use one accent-coloured feature heading to indicate the primary differentiator; keep the remaining headings off-white.
- Feature descriptions should be `14–16px`, with a muted grey tone and comfortable line-height around `1.5`.
- The CTA should be compact, medium-weight, and visually secondary to the main heading while still clearly interactive.

### Product preview treatment
- Build an original abstract interface preview relevant to the user's product; do not use a screenshot from the reference.
- Place it inside a dark panel with a thin border, approximately `#2A2B31`, and a radius around `14–18px`.
- Use layered cards or panels to suggest an AI recommendation, automated action, review state, or approval flow. The preview should communicate that the system acts, explains itself, and leaves room for human oversight.
- Use subtle tonal separation rather than heavy shadows: panel surfaces can range from `#0D0E12` to `#191A20`.
- Add restrained ambient colour or a soft radial glow behind interface elements, using the brand accent at low opacity. Keep the effect atmospheric and almost imperceptible at the edges.
- Make the preview feel like a working state through small labels, status rows, controls, or an approval affordance, but keep all content original to the user's product.

### Colour, borders, and radius
- Base background: approximately `#08080B`.
- Primary text: soft white, approximately `#F1F1F3`, rather than pure white.
- Secondary text: cool grey, approximately `#8F9098`.
- Borders and dividers: charcoal values around `#1B1C22` and `#2A2B31`.
- Accent: use a vivid blue or the user's brand accent, approximately `#5B7CFF` or `#4D7CFE`, for one key statement and the CTA.
- Use consistent medium corner radii: `14–18px` for the main preview and `8–12px` for nested cards and controls.
- Avoid excessive gradients, glassmorphism, drop shadows, or decorative effects that compete with the message.

### Interaction and responsive behaviour
- Make the CTA visibly hoverable with a subtle colour lift and a small arrow or directional indicator that shifts a few pixels on hover.
- If the preview contains controls, give them restrained hover, focus, and pressed states; use a visible focus ring for keyboard users.
- Keep the section static and readable by default. Optional micro-animations should be slow and subtle, such as a gentle glow or status transition, and must respect `prefers-reduced-motion`.
- At tablet and mobile widths, reduce heading sizes, preserve the intro's centered alignment, stack the columns, and maintain at least `24px` horizontal padding.
- Ensure the preview never forces horizontal scrolling and remains legible at narrow widths.

### Content principles
- Write a concise headline that expresses an end-to-end benefit without making unsupported claims.
- Use three short feature statements that represent a progression such as execution, user control, and continuous improvement, adapting the concepts to the user's product.
- Make the middle statement the visual emphasis if control, transparency, or trust is important to the product.
- Keep supporting descriptions concrete and outcome-oriented. Avoid jargon and long paragraphs.

## Never
- Never use logos, product names, slogans, or exact copy from the reference.
- Never reproduce the reference screenshot, interface labels, customer details, or branded UI.
- Never use the reference's illustrations, imagery, decorative artwork, or visual assets.
- Never make the result a pixel-for-pixel copy; reinterpret the layout and interaction model for the user's product and brand.
- Never hide important meaning behind animation, low contrast, or hover-only states.