## 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-6.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-3

# Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual identity are. Then apply the principles below to that product rather than reproducing this reference literally.

## Build a dark feature-grid section
Create a responsive website section that communicates that a product supports customers, workflows, integrations, or touchpoints across multiple places. The section should feel calm, premium, technical, and highly legible.

### Layout and alignment
- Use a near-black page background, approximately `#07070B`.
- Place the feature area inside a wide, centered container with a maximum width of roughly 1200px and responsive horizontal gutters of 24–40px.
- Build the main feature card as a two-column composition on desktop: explanatory content on the left and a compact grid of channel or capability pills on the right.
- Vertically center both columns inside the card. Keep the left column narrower than half the card so the heading remains easy to scan.
- On smaller screens, stack the content above the pill grid and let the grid use two columns or wrap naturally.
- If this section leads into another feature or comparison section, leave generous vertical breathing room below it and use a centered eyebrow plus headline for the next section.

### Typography hierarchy
- Use a clean modern sans-serif with excellent rendering at large sizes.
- Make the primary heading large, semibold, and tightly leading, around 30–34px on desktop; use a responsive size down to 25–28px on mobile.
- Limit the heading to two or three short lines and use sentence case.
- Set supporting copy around 16px with a 1.5 line height and a muted cool-gray colour such as `#A3A5B5`.
- Keep pill labels compact and semibold, around 14–15px.
- If adding an eyebrow for a following section, use uppercase lettering, generous tracking, 12px size, and a restrained blue accent such as `#6E9BFF`.

### Colour and surfaces
- Use a very dark card surface, approximately `#0D0E16`, against the slightly darker page background.
- Add a subtle cool border around the card, approximately `1px solid #242633`; keep it visible but low contrast.
- Use a restrained blue glow or soft radial gradient behind the pill grid, with transparent blue values rather than a strong visible effect.
- Keep primary text near-white, approximately `#F2F3F7`; use cool gray for secondary text.
- Let any selected, highlighted, or brand-relevant pill use a faint blue-tinted surface and blue text, but preserve accessible contrast.

### Borders, radius, and spacing
- Give the outer feature card a radius around 16px and internal padding of approximately 44–48px on desktop.
- Use 12–16px gaps between pills, with each pill having approximately 14px vertical and 20px horizontal padding.
- Give pills a radius around 14–16px or a softly rounded capsule shape, depending on the product's brand language.
- Use subtle pill borders around `#252735` and a near-black translucent fill such as `rgba(10, 11, 18, 0.8)`.
- Keep the text-to-card spacing intentional: approximately 18px between heading and supporting copy, and 28–36px between the two main columns when space allows.
- On mobile, reduce card padding to 24px and preserve at least 20px between stacked areas.

### Pill content and interaction
- Represent each channel, integration, capability, or workflow with a simple icon followed by a short label.
- Use consistent icon sizing around 16px and align icons and text on a shared center line.
- Prefer a real icon library already used by the project; otherwise use accessible text-first placeholders rather than inventing brand marks.
- Pills may have a subtle hover state: slightly lighter surface, brighter border, and a small lift or shadow transition lasting 150–200ms.
- If pills are interactive, make the entire pill a keyboard-focusable target with a clearly visible focus ring in the product's accent colour.
- Do not rely on colour alone to communicate selection or state.
- Keep animation restrained: use opacity, border, and transform transitions only; avoid distracting glow effects.

### Responsive and accessibility requirements
- Ensure the grid never overflows horizontally. Allow labels to wrap only when necessary, and maintain comfortable tap targets of at least 44px.
- Preserve a clear reading order: eyebrow or heading, supporting copy, then the channel/capability grid.
- Use semantic headings and lists where appropriate, meaningful accessible names for icons, and sufficient contrast for all text and borders.
- Test the layout at narrow mobile widths, tablet widths, and large desktop widths.

## Never
- Never copy logos, product names, channel names, or exact marketing copy from the reference.
- Never reuse the reference's illustrations, imagery, icon artwork, comparison table, or brand-specific marks.
- Never assume the user's product is a customer-support platform; adapt the content to the user's actual product and audience.
- Never reproduce the exact proportions, spacing, typography, or visual treatment as a pixel-for-pixel copy.
- Never add decorative imagery when a clear typographic layout and simple capability icons communicate the idea better.