## 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/linear-app/3b71fb78-773e-45c4-803c-426bf7f1ae53-1789060208-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/linear-app/3b71fb78-773e-45c4-803c-426bf7f1ae53-1789060182-full.webp
- Component on Kage: https://kage.design/component/linear-feature-grid-5

## Before you start
Ask me what my product does, who it is for, and what visual brand direction I want. Then apply the principles below to create an original version for my product—not a copy of the reference.

## Build this section
Create a dark, editorial feature-grid section for a software product landing page. It should feel calm, precise, premium, and product-led, with the feature navigation acting as a compact index above a larger feature story.

### Structure and layout
- Use a near-black full-width section, approximately `#08090A` to `#0B0C0D`, with a thin horizontal divider between major content bands.
- Start with a shallow feature index row. Place a small muted section label on the left, then distribute feature links across the remaining width in two narrow columns. Keep the links compact and vertically grouped rather than presenting them as large cards.
- Add a faint vertical divider between the link groups where appropriate. Use a small plus symbol or understated affordance after each link to suggest expandable or navigable feature items.
- Follow the index with a generous top margin and a large two-column editorial block. The left column contains a short, bold headline broken across two or three lines. The right column contains a larger supporting paragraph and a subtle text link beneath it.
- Use a responsive container with a maximum width around `1180–1280px`, centered horizontally, with approximately `40px` side padding on desktop. On mobile, stack all columns, preserve the reading order, and reduce the headline size without making the section feel cramped.
- Anchor a cropped product-interface preview below the editorial copy so only the upper portion is visible at first. Let the preview extend beyond the section’s content width slightly or sit inside a rounded frame, creating a sense that more product detail continues below.
- Keep the composition asymmetrical but aligned to a consistent vertical grid: the headline, body copy, feature index, and preview should share clean left and right alignment lines.

### Typography
- Use a modern neutral sans-serif with tight, polished spacing.
- Section label and feature links: approximately `14px`, medium weight, muted gray, with comfortable line height.
- Main headline: approximately `42–50px` on desktop, `34–40px` on mobile, weight `600–700`, tight line height around `0.98–1.05`, and slight negative tracking.
- Supporting paragraph: approximately `21–25px`, regular weight, line height around `1.3–1.4`; keep the line length controlled so it reads as an editorial statement rather than a dense description.
- Secondary link: approximately `14px`, muted gray, with a small right arrow and a clear hover transition.
- Use bright off-white for primary type, around `#F1F2F3`, and progressively dimmer grays for secondary information, around `#9A9DA1` and `#666A70`.

### Colour, borders, and surfaces
- Keep the palette monochromatic: background near `#08090A`, primary text near `#F4F5F6`, secondary text near `#92969B`, and faint borders near `rgba(255,255,255,0.12)`.
- Avoid loud accent colours in the editorial area. If the product preview needs status or syntax colours, keep them subtle and lower contrast than the headline.
- Use 1px borders and soft inset highlights to define the feature index and preview without turning them into conventional cards.
- Give the product preview a modest radius around `10–14px`; keep the outer section mostly square and architectural.
- Add a restrained dark gradient or shadow around the preview edge so it recedes naturally into the background.

### Interaction and responsive behaviour
- Make feature links keyboard accessible and visibly focusable with a thin light outline or brighter text treatment.
- On hover, slightly raise the feature-link brightness and shift the plus or arrow by 2–3px; do not use bouncy animations.
- If the feature index controls content, use a smooth, quick crossfade or height transition and clearly indicate the active item without introducing bright pills.
- Ensure the preview never causes horizontal scrolling. Crop or scale it gracefully at tablet and mobile widths.
- Respect reduced-motion preferences and preserve strong contrast for text and focus states.

### Content guidance
- Write original, product-specific feature labels and benefit copy after learning the user’s product and brand. Keep labels short and the main statement outcome-oriented.
- Treat the preview as supporting evidence for the message, not as the primary visual focus.

## Never
- Never copy the reference’s logos, product names, feature names, or exact marketing copy.
- Never reuse the reference’s interface screenshots, illustrations, imagery, icons, or branded symbols.
- Never imitate the exact spacing measurements, text arrangement, or visual assets; preserve only the underlying editorial hierarchy and design principles.
- Never introduce a bright, generic SaaS gradient, excessive cards, oversized buttons, or decorative graphics that compete with the product preview.