## 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-1789060664-7.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-testimonials

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

## Build this section
Create a dark, atmospheric testimonial-and-footer section for a modern software product. The testimonial should feel like a featured editorial recommendation placed above or alongside the site's closing navigation, with a technical background treatment that adds depth without competing with the content.

## Design language

### Layout and alignment
- Use a full-width section with a very dark background and a centered content container, approximately 1120–1240px wide.
- Place the section near the end of the page, with generous vertical breathing room before the footer links.
- Organize the lower content into a responsive grid: a wider left column for a “Featured” testimonial and several narrower columns for product, comparison, company, or contact links.
- Align all column headings and content to a shared baseline and consistent left edge. On smaller screens, collapse the columns into a single readable stack while keeping the testimonial first.
- Let the testimonial card remain visually distinct but understated: it should be a compact panel, not a large floating hero card.
- Add a subtle technical surface behind the content, such as fine perspective lines, a faint floor/grid pattern, or barely visible panel outlines. Keep this decorative layer clipped to the section and behind all text.

### Typography hierarchy
- Use a clean contemporary sans-serif with a slightly technical or geometric character, chosen to fit the user's brand.
- Render footer headings in small, medium-weight text around 13–15px with high contrast.
- Use navigation links around 14–16px, with muted contrast and comfortable line height.
- Set the testimonial quote around 14–16px with a relaxed 1.45–1.6 line height; emphasize one short linked phrase with the brand accent colour.
- Keep labels, metadata, and supporting text visually secondary. Avoid oversized display typography in this section.

### Colour
- Use a near-black violet/navy background, approximately #0D0B12 or #100C18.
- Use a slightly lighter translucent panel for the testimonial, approximately #171521 to #211C2B.
- Set primary text to a soft off-white around #F2EFF7.
- Set secondary navigation and supporting text to muted lavender-grey around #9893A4.
- Use very faint borders and grid strokes around #2B2735 with low opacity.
- Reserve a restrained lavender or electric-violet accent, approximately #A98BFF or #8F72FF, for one inline link, focus state, or small interactive highlight.
- Ensure all text still meets accessible contrast, particularly on mobile and in hover states.

### Borders, surfaces, and radius
- Give the testimonial card a thin, low-contrast 1px border and a modest 8–12px radius.
- Use layered transparency or a subtle inner highlight to suggest depth, rather than strong shadows.
- Keep the outer section mostly borderless; let faint horizontal rules, vertical guides, and the background grid establish structure.
- Avoid glossy gradients, heavy drop shadows, and excessive decorative noise.

### Interaction and responsive behaviour
- Make inline testimonial links and footer links visibly interactive with a colour shift, underline, or slight opacity change on hover and focus.
- Provide clear keyboard focus rings in the accent colour without disrupting the dark aesthetic.
- If the testimonial is part of a rotating set, use a simple accessible carousel with explicit controls and pause support; otherwise keep it static and avoid unnecessary motion.
- On touch devices, preserve generous tap targets and prevent the technical background from reducing legibility.
- Respect `prefers-reduced-motion`; decorative grid movement, if used, should stop or become static.

## Content guidance
- Write an original, concise testimonial from a plausible customer or user relevant to the product.
- Include a small attribution only if it strengthens credibility; keep it visually quieter than the quote.
- Use original navigation labels that match the user's information architecture.

## Never
- Never use logos, product names, customer names, copy, illustrations, or imagery from the reference.
- Never reproduce the reference site's exact testimonial wording, footer taxonomy, layout measurements, or decorative artwork.
- Never make the grid or technical background more prominent than the content.
- Never use inaccessible low-contrast text, tiny tap targets, or motion that cannot be paused or reduced.