## 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/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106717-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106640138-full.webp
- Component on Kage: https://kage.design/component/noodle-seed-feature-grid-2

# Before you start
Ask what the user's product does, who it is for, and what visual brand language it already uses. Then apply the principles below to create an original feature-grid section for that product rather than reproducing this reference.

## Build this section
Create a dark, editorial feature section that communicates three complementary product benefits. The section should feel calm, premium, technical, and trustworthy, with the content doing most of the work.

### Layout and alignment
- Use a full-width section with a very dark near-black background, approximately `#050505`.
- Constrain the content to a centered max width of roughly 1120–1200px, with generous horizontal padding: about 72px on desktop, 32px on tablet, and 20–24px on mobile.
- Place the main content in the upper portion of the section: a large headline, a short supporting paragraph, then a three-column feature row.
- Align all text to the left and use a consistent shared left edge.
- Keep the headline width controlled, around 600–700px, so it wraps into two purposeful lines rather than spanning the entire viewport.
- Place the supporting paragraph beneath the headline with a comfortable gap, limiting it to around 680px for readable line length.
- Position the feature grid below the introduction with a larger vertical separation. Use three equal columns on desktop, with generous space between columns; stack them vertically on narrow screens.
- Give the section ample vertical padding, approximately 110–140px above the heading and 120–150px below the feature row.
- If the broader page needs a transition or divider, use a single subtle horizontal rule below the section rather than a heavy card boundary.

### Typography hierarchy
- Use a modern sans-serif with clean geometric or grotesk forms. Prefer a variable sans if available.
- Set the headline in a light or regular weight, approximately 60–68px desktop, 46–54px tablet, and 36–42px mobile.
- Use tight headline line-height around 0.98–1.05 and slight negative tracking around `-0.035em`.
- Set the supporting paragraph around 18–20px with a 1.5 line-height and a muted light-grey colour.
- Feature titles should be compact and semibold, around 14–16px, with normal or slightly tight tracking.
- Feature descriptions should be around 14–16px, with a 1.45–1.6 line-height and a softer grey tone. Keep each description to two or three lines where possible.
- Do not add unnecessary labels, eyebrow text, icons, or decorative headings unless they are genuinely useful for the user's product.

### Colour and atmosphere
- Use a near-black base such as `#050505` or `#070707`.
- Use warm off-white for the headline, approximately `#F2F0EE`.
- Use muted neutral grey for supporting copy, approximately `#A6A3A1`.
- Use a slightly brighter grey for feature titles, approximately `#D6D2CF`.
- Add a very soft, blurred multi-colour atmospheric glow behind the content: low-opacity amber/brown around `#5A3217`, subdued olive around `#5B5A24`, and deep burgundy around `#3D1119`. Keep the glow subtle, diffuse, and partially obscured by the dark background; it must never reduce text contrast.
- Avoid bright gradients, saturated neon colours, or obvious decorative effects.

### Borders, radius, and surfaces
- Keep the section mostly open and borderless.
- If using a divider, use a 1px line around `rgba(255,255,255,0.14)`.
- Avoid individual feature cards with strong fills or shadows. The three benefits should feel like one integrated system.
- Use no or very small corner radii, approximately 0–8px, unless the user's existing brand calls for softer cards.
- Do not use glassmorphism, excessive shadows, or ornamental framing.

### Interaction and responsive behaviour
- This is primarily an informational section, so keep interactions restrained.
- If feature items are interactive in the user's product, reveal only a very subtle change on hover or focus: slightly brighter title, faint underline, or a small colour shift. Avoid movement-heavy animations.
- Respect keyboard focus with a visible, high-contrast focus ring.
- On mobile, stack the features with 28–40px vertical gaps and preserve the left alignment.
- Reduce the atmospheric glow on small screens if it affects legibility or performance.
- Use a short, gentle opacity or colour transition of roughly 150–250ms for interactive states.
- Respect `prefers-reduced-motion` and disable nonessential animation when requested.

### Content model
- Write a concise headline that expresses an outcome or promise in two lines.
- Follow it with one sentence explaining how the product delivers that outcome.
- Add exactly three feature items, each with a short benefit-oriented title and a plain-language explanation.
- Make the three items cover distinct but related strengths, such as context, trust, control, speed, visibility, or reliability. Adapt these to the user's product rather than copying the reference's themes.

## Never
- Never copy the reference's logos, product names, or brand identity.
- Never reuse the reference's exact headline, supporting copy, feature titles, or descriptions.
- Never include the reference's customer-logo strip or any invented customer logos.
- Never use illustrations, imagery, icons, or decorative artwork from the reference.
- Never reproduce the reference pixel-for-pixel; preserve the underlying hierarchy and design principles while making the section native to the user's product and brand.
- Never sacrifice readability for the background glow or visual atmosphere.