## 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-1789060207-4.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-2

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colour palette, and visual language are. Then apply the principles below to my product rather than reproducing the reference literally.

## Build this section
Create a dark, editorial feature-grid section for a modern software product. The section should communicate one feature area through a strong typographic introduction, a supporting product explanation, and a large interface preview that visually demonstrates the workflow.

### Layout and alignment
- Use a full-width near-black section with a centered content container, approximately 1180–1280px wide.
- Give the section generous vertical space: roughly 96–140px top and bottom padding on desktop.
- Start with a two-column introduction row. Place the feature heading on the left, occupying about 45% of the row, and the supporting description on the right, occupying about 45–50%.
- Align both columns to the same baseline or top edge. Keep the text block widths constrained so the copy remains readable.
- Below the introduction, place a wide product-interface composition with a strong overlap or layered relationship: a foreground conversation, intake, or activity panel sits over a dimmed operational dashboard behind it.
- Let the visual extend close to the container edges, while retaining enough margin that it feels intentionally framed rather than full bleed.
- Finish with a compact feature index below the visual. Use a small label at left and a two-column list of related feature links at right, separated by a fine vertical rule where appropriate.
- On mobile, stack the heading and description, reduce the visual scale without cropping important content, and turn the bottom index into a simple single-column list.

### Typography hierarchy
- Use a clean modern sans-serif with a slightly condensed or tightly set appearance.
- Feature heading: approximately 44–52px desktop, 1.0–1.08 line-height, medium weight; allow it to wrap across two or three lines.
- Supporting description: approximately 23–27px desktop, 1.25–1.35 line-height, regular weight; make it visibly quieter than the heading but still prominent.
- Feature-index label and links: 13–15px, relaxed line-height, regular weight.
- Use restrained letter spacing. Avoid excessive uppercase styling and avoid overly bold body copy.

### Colour
- Page background: near-black, approximately `#090A0B` or `#0B0C0D`.
- Primary heading: soft white, approximately `#F1F1F0`.
- Supporting copy: cool light gray, approximately `#C2C4C7`.
- Secondary links and metadata: muted gray, approximately `#777B80`.
- Borders and separators: barely visible charcoal, approximately `#24272A` with low opacity.
- Interface preview: use layered charcoal surfaces from approximately `#111315` to `#1A1C1F`, with subtle blue-violet or brand-colour accents only for statuses, buttons, and selected controls.
- Add a soft black gradient or vignette around the lower and outer edges of the interface preview so the composition dissolves naturally into the background.

### Borders, radius, and depth
- Use thin, low-contrast 1px borders for panels and separators.
- Apply approximately 12–16px radius to the main foreground panel and 8–12px radius to smaller interface cards.
- Use restrained shadows: mostly tonal separation and a diffuse black shadow rather than obvious elevation.
- Keep the overall section flat and premium; avoid bright outlines, glassmorphism, or excessive glow.

### Interface preview
- Build an original, believable SaaS interface rather than a decorative screenshot.
- Show a background board or table with multiple columns, cards, small status indicators, labels, and compact metadata.
- Place a foreground intake or conversation panel on the left or lower-left, with a header, several short messages or records, and a composer/action row.
- Make the foreground panel the highest-contrast element and the dashboard behind it lower contrast, as if the feature is transforming incoming information into organized work.
- Use realistic but generic placeholder content that matches the user's product domain. Keep text short enough to remain legible at the section scale.
- If interaction is implemented, allow the feature-index links to update the heading, supporting statement, and interface state with a subtle fade or slide; otherwise make them visually read as discoverable navigation links with a small arrow or plus affordance.

### Interaction and responsiveness
- Add modest hover states to feature links: brighten the text, reveal or shift a small arrow/plus, and transition over 150–200ms.
- Respect reduced-motion preferences.
- Preserve the visual hierarchy at every breakpoint: the narrative comes first, the product demonstration second, and the index last.
- Ensure sufficient contrast and provide accessible labels for any icon-only controls.

## Never
- Never use the reference product's logo, product name, brand marks, or proprietary UI symbols.
- Never reuse the reference's exact copy, feature names, labels, conversation text, or interface data.
- Never copy the reference screenshot, card arrangement, dashboard content, or visual composition pixel-for-pixel.
- Never include illustrations, stock photography, or imagery from the reference.
- Never imitate the reference brand so closely that the result feels like a clone; adapt the structure and principles to my product and brand instead.