## 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-5.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-2

## Before you start
Ask me what my product is, who it is for, and what its brand personality and visual identity are. Then apply the principles below to create an original feature-grid section for my product—not a copy of the reference.

## Goal
Build a dark, premium product-marketing section that explains how a unified workspace brings multiple workflows or capabilities together. Use a large interface preview as the main proof point, followed by a secondary feature grid that groups related capabilities into clear, scannable modules.

## Structure and layout
- Place the entire section on a near-black page background with generous vertical breathing room.
- Begin with a small uppercase eyebrow centered above the main heading. Use it as a concise category label.
- Add a large centered headline spanning no more than roughly 900–1,050px, followed by a muted two-line supporting paragraph with a comfortable maximum width.
- Include a small text link or directional CTA above the main content area. Use a blue accent and a simple arrow; keep it quiet rather than button-like.
- Below the intro, place a large browser/app mockup inside a wide rounded frame. It should occupy nearly the full content width while preserving consistent side margins.
- Give the mockup a browser chrome strip with three small traffic-light circles, a subdued address/title label, and a thin divider. The app itself should feel like a believable working interface, not a decorative screenshot.
- Under the preview, introduce a bordered feature card or grid. On desktop, use a two-column composition: explanatory heading and paragraph on the left, and a compact matrix of pill-like capability buttons or channel items on the right. Let the grid continue below the fold if needed.
- Use a max-width around 1160–1240px and align all major elements to the same container edges, except for the centered intro.
- On smaller screens, stack the feature card content, reduce the mockup scale, allow horizontal overflow only inside the mockup if necessary, and keep the page itself free of horizontal scrolling.

## Visual language
- Background: near-black navy, approximately #08080D or #090A12. Add an extremely subtle indigo radial glow behind the product preview, around #121A45 at low opacity.
- Primary text: soft white, approximately #F2F2F5. Secondary text: cool gray, approximately #9697A3. Eyebrow and links: electric blue, approximately #4D8DFF.
- Product preview surface: black or almost black, approximately #030405, with chrome and side navigation surfaces around #1B1C25–#22232D.
- Use blue for primary actions and active navigation states, approximately #2F6EF5 or #356FF3. Use restrained teal/green for positive AI or processing states, approximately #49D6C1, and warm red/orange only for priority or warning badges.
- Borders should be thin and low contrast: approximately rgba(150,160,190,0.22) around outer cards and rgba(255,255,255,0.08) for internal separators.
- Use large outer corner radii around 16–18px for the preview and feature card. Use 8–10px for controls, badges, and compact interface elements.
- Avoid strong shadows. If depth is needed, use a very soft navy shadow and a faint blue atmospheric glow.

## Typography
- Use a modern neutral sans-serif with crisp rendering and moderate letter spacing.
- Main heading: approximately 42–50px desktop, 32–38px mobile, weight 500–600, tight line-height around 1.08.
- Supporting copy: approximately 17–19px desktop, 15–17px mobile, line-height around 1.55.
- Eyebrow: 11–12px, uppercase, medium weight, letter spacing around 0.12em.
- Feature heading: approximately 28–34px, weight 500–600, with a compact two-line treatment where appropriate.
- Interface text should be smaller and denser: 11–14px, with clear contrast between headings, labels, table content, and metadata.

## Product preview details
- Create a convincing dark support, operations, analytics, or workflow interface suited to my product.
- Include a narrow left navigation rail, a page title, tabs or filters, a search field, one prominent primary action, and a table/list of realistic placeholder records.
- Use a single highlighted row or status chip to communicate an active automated process. Keep the rest of the interface subdued so the highlighted state reads immediately.
- The preview should be static but visually legible. Add hover-like affordances only if they improve clarity; do not make the whole image feel like a dashboard demo.
- Make browser chrome, navigation, controls, and table content responsive so the preview remains credible at reduced widths.

## Feature grid details
- Use a single rounded container with a subtle border and a slightly lifted dark-navy surface, approximately #0C0D16.
- Place the feature narrative in a left column with a clear heading, short explanatory copy, and optional understated link.
- Place capabilities in the right column as compact rounded tiles or pills with small neutral icons and concise labels. Use a consistent height, gap, and icon alignment.
- Give the active or most important capability a faint blue/indigo background or border, but keep most items monochrome.
- If capabilities represent channels, integrations, or modes, make the grouping obvious through spacing rather than excessive decoration.
- Add a subtle background glow or gradient only inside the feature card if it helps separate it from the page.

## Interaction and motion
- Links and buttons should transition smoothly between muted and brighter blue states on hover, with a duration around 150–200ms.
- Capability tiles may lift by 1–2px and brighten their border on hover. Preserve accessible focus rings in blue.
- If the feature grid is interactive, allow selection of one tile at a time and update the supporting visual or copy without changing the overall layout.
- Keep motion understated: use a gentle fade or slide-up on entrance, never a distracting dashboard animation.
- Ensure sufficient contrast, keyboard navigation, visible focus states, and reduced-motion support.

## Never
- Never use logos, product names, or branded marks from the reference.
- Never reuse the reference's exact copy, interface labels, customer names, ticket data, or visual assets.
- Never copy the reference layout pixel-for-pixel; adapt the hierarchy and visual principles to my product and brand.
- Never use illustrations or imagery from the reference. Prefer an original CSS-built interface mockup or my own approved product assets.
- Never let decorative effects reduce readability, accessibility, or responsive usability.