## 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/railway-com/2043945d-689d-427f-b51d-92aa383b8c92-1789060663-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/railway-com/2043945d-689d-427f-b51d-92aa383b8c92-1789060635-full.webp
- Component on Kage: https://kage.design/component/railway-feature-grid

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

## Build this section
Create a full-width feature section for a technical SaaS or software product. The section should explain one meaningful product capability through a short narrative, a large contextual product UI preview, and a compact three-column benefits row beneath it. The result should feel calm, premium, technical, and product-led.

## Design language

### Layout and alignment
- Use a wide, centered section container with generous horizontal gutters: approximately 56–72px on desktop and 20–24px on mobile.
- Place the section inside a deep navy/charcoal panel with a very subtle cool gradient or tonal variation from top to bottom.
- Use a thin vertical guide line near the left content edge. It can continue through the section and terminate in a small circular marker or decorative node, suggesting a timeline or system flow without becoming an illustration.
- Align the eyebrow, heading, body copy, preview, and lower benefit grid to a consistent inner content column. Keep the vertical guide offset from this column so it acts as structure, not a divider.
- Intro content should sit above the preview with a restrained maximum width of roughly 560–680px. Place the product preview below it with a clear gap of 64–88px.
- Make the preview the visual anchor: a wide, dark application canvas or dashboard mockup with a 1px border, large radius, and enough height to communicate the product workflow.
- Below the preview, use three equal-width feature columns on desktop. On smaller screens, stack them vertically with consistent spacing.
- Finish with a subtle full-width utility row or comparison strip below the benefits. Keep it visually quiet and secondary.

### Typography hierarchy
- Use a small rounded or compact sans-serif eyebrow in 12–14px, medium weight, with a soft tinted background and pill radius.
- Use a large editorial or humanist headline in approximately 44–60px desktop, 34–42px mobile, with tight line-height around 0.98–1.08. Keep the headline to two or three lines.
- Use body copy in 17–19px desktop and 15–17px mobile, line-height around 1.45–1.6. Set it in a muted cool gray and limit its width for easy reading.
- Use 15–16px semibold titles for the three benefits, followed by 14–16px supporting text with a looser line-height.
- Use sentence case, short phrases, and a clear contrast between headline, supporting copy, and utility labels.

### Colour
- Page background: near-black plum/navy, approximately `#100F19`.
- Main feature panel: deep blue charcoal, approximately `#171E31` to `#1D2940`.
- Product preview canvas: almost black, approximately `#090A10`.
- Primary text: warm off-white, approximately `#F2F1F0`.
- Secondary text: cool muted gray, approximately `#9AA1B2`.
- Borders and guide lines: low-contrast blue-gray, approximately `#30394C`, using opacity where appropriate.
- Accent colour: use one restrained brand accent for markers, links, status indicators, or eyebrow backgrounds. A cool violet/blue such as `#7867FF` may be used only as a starting point; adapt it to the user's brand.
- Keep the overall palette low saturation. Reserve brighter colour for small points of interaction or status, not large surfaces.

### Borders, radius, and depth
- Give the outer panel a 1px subtle border and a 14–18px radius; let the panel corners feel soft but not playful.
- Give the preview a 6–10px radius and a slightly stronger border than the surrounding content.
- Use thin separators between benefit content or above the utility row, approximately `rgba(150,160,185,0.16)`.
- Avoid heavy shadows. If depth is needed, use a very soft dark shadow and a faint inner highlight rather than a floating-card effect.
- Keep internal product-preview cards compact, dark, and minimally elevated, with 6–8px radii and subtle borders.

### Product preview composition
- Build an original abstract application interface relevant to the user's product: a dark canvas, a slim top navigation bar, a few connected or grouped modules, and small status labels.
- The preview should demonstrate a workflow or system relationship rather than act as a decorative image.
- Use simplified cards, lines, nodes, charts, tables, or panels depending on the product. Do not make the mockup overly detailed; it should remain legible at a glance.
- Include small interface controls such as tabs, a create/action button, zoom or navigation controls, and a status/activity area only when they support the story.
- Use realistic hierarchy and spacing inside the mockup, but keep labels generic and original.

### Icons and interaction
- Use small monochrome line icons above or beside each benefit title. Icons should be simple, consistent, and approximately 18–20px.
- If the section includes a link, make it text-led with a subtle arrow or underline transition on hover.
- Add restrained hover feedback to benefit columns: slightly brighten the title/icon, shift the accent by a few pixels, or reveal a subtle background tint. Keep transitions around 160–220ms.
- Any mockup controls can have hover states, but they should remain demonstrative rather than fully functional unless the product requires it.
- Ensure keyboard focus states are visible and meet accessible contrast requirements.

### Responsive behaviour
- On tablet, reduce the headline and preview height while preserving the large visual hierarchy.
- On mobile, remove or simplify the vertical guide if it crowds the content, reduce panel padding, and stack the three benefits.
- Let the product preview scroll or crop gracefully on narrow screens rather than shrinking every internal element until it becomes unreadable.
- Maintain generous vertical rhythm: approximately 24–32px between text elements, 40–56px between intro and preview, and 36–52px between preview and benefits.

## Content guidance
Use copy specific to the user's product and audience. Explain the capability in plain language, then make each lower column answer one of three questions: what can users see, what does the system handle automatically, and what can users change or control in context.

## Never
- Never use logos, product names, brand marks, or copy from the reference.
- Never reproduce the exact reference interface, application labels, node arrangement, icons, or decorative timeline artwork.
- Never use the reference's imagery, illustrations, screenshots, or customer identities.
- Never make the section a generic three-card grid disconnected from a meaningful product preview.
- Never use excessive gradients, neon colour, dense decoration, or large stock imagery.
- Never sacrifice responsive behaviour, semantic structure, readable contrast, or keyboard accessibility for visual similarity.