## 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/turso-tech/a01fe972-4603-42df-a7fd-1b66e57f2913-1789073739-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/turso-tech/a01fe972-4603-42df-a7fd-1b66e57f2913-1789073707-full.webp
- Component on Kage: https://kage.design/component/turso-testimonials

## Before you start
Ask what the user's product is, who it serves, and what its 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 a split feature-and-testimonial section
Create a wide, responsive section that combines a product capability explanation on the left with a customer testimonial card on the right. The section should feel like a premium developer-tool or SaaS landing page: calm, technical, spacious, and highly legible.

### Layout and alignment
- Use a large outer container with a very dark background and a subtle 1px border.
- Give the container generous horizontal and vertical padding; use approximately 56–64px on desktop and 28–32px on mobile.
- Arrange the content in two columns on larger screens: the left column should be slightly wider, around 58–62% of the available width, while the testimonial occupies the remaining 38–42%.
- Align both columns to the top, but make the testimonial attribution sit at the bottom of its card using a vertical flex layout.
- Keep the left content measure controlled rather than spanning the full column. The headline should occupy roughly 16–20 characters per line at desktop size, while supporting copy should be 55–70 characters per line.
- On smaller screens, stack the testimonial below the feature copy with a clear but compact vertical gap.
- Use a responsive grid or flex layout; avoid absolute positioning for primary content.

### Typography hierarchy
- Use a modern sans-serif with a technical, contemporary feel. Prefer the user's brand font when available.
- Make the headline bold and compact, approximately 36–40px on desktop with a 0.98–1.08 line-height and slight negative letter spacing. Use 28–32px on mobile.
- The headline should be sentence case and split into deliberate lines through natural width, not manually forced line breaks unless needed for art direction.
- Set supporting copy around 16px with a 1.25–1.4 line-height. Use a muted gray so the headline remains dominant.
- Make the CTA label semibold, approximately 15–16px.
- Render the testimonial quote at approximately 18–20px with a 1.65–1.75 line-height. Keep it comfortable to read and avoid oversized quotation marks.
- Make the customer name 15–16px semibold and the role/company line 13–14px in a quieter tone.

### Colour and surfaces
- Use an almost-black page background, approximately #0b0f12 or #0d1115.
- Use a barely differentiated section surface, approximately #0e1216.
- Use a fine neutral border around the outer section and testimonial card, approximately #202a2f or rgba(150,170,180,0.16).
- Use near-white for the main headline and quote, approximately #f1f4f3.
- Use cool muted gray for body copy and metadata, approximately #899398 and #69757b.
- Use one vivid mint, aqua, or brand accent for the primary CTA, approximately #42e8c3. Adapt this accent to the user's brand rather than treating it as mandatory.
- Ensure text and controls meet accessible contrast requirements; do not rely on colour alone to communicate hierarchy.

### Borders, radius, and spacing
- Use a restrained outer radius around 14–16px and a slightly smaller 10–12px radius for the testimonial card.
- Keep borders subtle and crisp; do not use heavy shadows, gradients, glassmorphism, or decorative effects.
- Place the headline roughly 0–8px from the top of the left content area, followed by 24–28px of space before the paragraph.
- Place the CTA 28–32px below the supporting copy.
- Make the CTA a generous pill-shaped button with approximately 44–48px height and 22–24px horizontal padding.
- Give the testimonial card approximately 32–28px internal padding on desktop and 24px on mobile.
- Leave enough empty space in the testimonial card for the quote to breathe; the attribution should be separated from the quote by flexible space or a substantial gap.

### Interaction and responsive behaviour
- The CTA should have a clear hover state: slightly brighten the accent colour or add a restrained elevation, with a 150–200ms ease transition.
- Add a visible keyboard focus ring using the brand accent or another high-contrast colour.
- The testimonial card can remain static; do not add a carousel unless the product requires multiple testimonials.
- If an avatar is used, keep it small and secondary—roughly 38–44px, circular, and aligned with the attribution. Use a neutral placeholder or user-provided portrait rather than stock imagery.
- On mobile, preserve the reading order: headline, body copy, CTA, then testimonial. Reduce type and padding proportionally without making the section feel cramped.
- Respect reduced-motion preferences and keep transitions subtle.

### Content structure
- Use a concise headline describing one concrete capability or outcome.
- Follow it with two or three short sentences explaining why the capability matters.
- Use one action-oriented CTA.
- Include one authentic-sounding testimonial with a customer name and role, but write new copy appropriate to the user's product.

## Never
- Never copy the reference's product name, brand language, headline, testimonial, customer name, role, CTA copy, or exact wording.
- Never reuse logos, product names, copy, illustrations, avatars, or imagery from the reference.
- Never reproduce the reference as a pixel-perfect clone; preserve only the general component principles.
- Never add decorative imagery or visual noise that competes with the message.
- Never sacrifice accessibility, responsive behaviour, semantic HTML, or keyboard usability for visual similarity.