## 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/trigger-dev/b9ca49c4-30e6-4b69-8f7d-3e7049f90280-1789073777-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/trigger-dev/b9ca49c4-30e6-4b69-8f7d-3e7049f90280-1789073735-full.webp
- Component on Kage: https://kage.design/component/trigger-feature-grid-4

## Before you start
Ask the user what their product does, who it is for, and what visual brand it should use. Then apply the principles below to create an original feature-discovery section for that product—not a copy of the reference.

## Build a categorized feature matrix
Create a dark, editorial feature section that helps users scan a large set of capabilities across a few meaningful product categories.

### Structure and layout
- Use a centered, wide content container with a maximum width around `1200–1280px` and generous horizontal padding of `28–48px`.
- Begin with a heading row: a large section title aligned left and a compact secondary link aligned right. The link should feel like an escape hatch to the full feature catalogue and include a small arrow or chevron.
- Below the heading, use a three-column category matrix on desktop. Each column should have equal width and consistent horizontal gutters.
- Give each category a compact header row with a small, simple line icon or geometric symbol, category name, and a restrained accent colour. Keep the icon decorative and secondary to the label.
- Under each category header, stack feature items as separate low-contrast rectangular rows. The rows should align perfectly across columns and use the same height, padding, and rhythm.
- On medium screens, preserve the three-column structure if space permits; otherwise move to two columns. On mobile, collapse to one column while retaining category separation and comfortable touch targets.
- Let the section breathe vertically: use approximately `48–64px` between the title row and category headers, and `8–12px` between feature rows.

### Alignment and spacing
- Align all category headings and feature text to the same left edge within their columns.
- Use `16–20px` internal padding in feature rows and `12–16px` between icon and label.
- Keep the title row visually distinct with a bottom divider or a clear change in vertical spacing rather than a heavy card treatment.
- Make the feature list dense but readable; avoid oversized cards, decorative illustrations, and unnecessary descriptions inside every row.

### Typography
- Use a modern sans-serif with a technical/product feel and slightly tight headings.
- Section title: approximately `28–32px`, weight `600–650`, line-height `1.15`.
- Category labels: approximately `18–20px`, weight `500–600`.
- Feature rows: approximately `15–16px`, weight `400–450`, line-height `1.4`.
- Secondary navigation link: approximately `13–14px`, medium weight, with enough contrast to remain discoverable but not compete with the heading.
- Use sentence case for labels and feature names. Keep names short enough to scan in one line where possible.

### Colour and surface treatment
- Use a near-black page background such as `#101114` or `#0F1013`.
- Use a slightly lighter row surface, around `#15171B`, with subtle tonal variation rather than obvious filled cards.
- Use primary text near `#E7E7E9`, secondary text around `#96979D`, and muted borders around `#202228`.
- Add a very subtle vertical or horizontal tonal gradient if desired, but keep the overall surface almost flat and understated.
- Assign each category a distinct but controlled accent—examples include violet `#8B5CF6`, magenta `#D946EF`, and blue `#4EA1FF`. Use accents mainly for icons or tiny details, not for large backgrounds.

### Borders, radius, and interaction
- Use `1px` dividers in a low-contrast neutral such as `#202228` between the heading area, category headers, and list rows.
- Keep corner radii small—around `4–8px`—or use nearly square rows for a more technical feel.
- Feature rows may have a barely visible background on hover, shifting toward `#1B1D22`, with a quick `150–200ms` ease transition.
- Make the section-level link and any interactive feature rows keyboard accessible with visible focus states using a subtle accent outline.
- If feature rows link to detail pages, reveal a small arrow or slight text/accent shift on hover; do not introduce large animations.
- Ensure the layout remains usable with long labels, keyboard navigation, reduced-motion preferences, and touch input.

### Content guidance
- Group capabilities by how users think about the product, such as build, operate, analyze, collaborate, or secure.
- Keep category lists approximately balanced, but prioritize real information architecture over forcing identical item counts.
- Use short, concrete feature names. Avoid marketing-heavy sentences in the matrix; the section should function as a fast catalogue.

## Never
- Never reuse logos, product names, brand marks, or exact copy from the reference.
- Never copy the reference’s category names, feature labels, icon artwork, or distinctive wording.
- Never include illustrations, screenshots, or imagery from the reference.
- Never make every item a large promotional card or add unnecessary gradients and decorative effects.
- Never sacrifice readability or responsive behavior to preserve the desktop grid.