## 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-8.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-code-block

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

## Build an open-source and community proof section
Create a full-width dark trust section for a developer-focused product. The section should move from ecosystem compatibility, to an open-source or mission-led statement, to quantitative proof, and finally to customer or community testimonials.

### Layout and alignment
- Use a centered, max-width content canvas around 1200–1280px with a very dark background, such as `#101114`.
- Organize the section into four stacked bands:
  1. A compact ecosystem strip with a short statement on the left and a horizontal row of technology or integration names on the right.
  2. A tall, quiet statement panel with a small accent symbol above a large centered headline.
  3. A three-column metrics row with equal-width cells.
  4. A testimonials area with a section heading and optional community link, followed by a masonry-like or asymmetric multi-column grid of quote cards.
- Keep all major content aligned to the same outer grid. Use 1px separators in a subtle near-black gray such as `#24262b` between bands, columns, and cards.
- Let the statement panel have substantial empty space: approximately 260–360px tall on desktop. On mobile, reduce this to roughly 180–240px.
- On smaller screens, stack the ecosystem items or allow horizontal scrolling, stack the metric cells, and convert testimonials into a single-column list.

### Typography hierarchy
- Use a clean modern sans-serif with slightly tight tracking and a polished developer-tool feel.
- Ecosystem label: 16–20px, medium weight, muted light gray.
- Main statement: 38–56px desktop, 30–38px mobile, semibold or bold, with a line-height around 1.05–1.15. Use selective emphasis by changing some words to a softer gray rather than relying on many colours.
- Metric value: 42–52px desktop, regular or medium weight, bright gray-white. Metric label: 14–16px, muted gray.
- Testimonials heading: 28–32px, medium weight. Quote text: 16–18px with a 1.5–1.65 line-height. Author name and company should be 13–15px.
- Use restrained letter spacing; avoid all-caps except for tiny metadata if it improves scanning.

### Spacing and sizing
- Give the outer section 24–32px horizontal padding on desktop and 20px on mobile.
- Use 28–40px padding inside the ecosystem strip and testimonials header.
- Give the main statement enough top and bottom padding to feel like a feature moment rather than a normal card.
- Use 32–56px gaps between testimonial content blocks, with 0px or minimal gaps where grid borders create the separation.
- Keep metric cells visually balanced with around 42–64px vertical padding.

### Colour and accents
- Base background: approximately `#101114` or `#111216`.
- Primary text: `#e8e9ed`.
- Secondary text: `#9599a5`.
- Borders: `#24262b`; use low contrast rather than bright gray rules.
- Add one vivid brand accent for the statement symbol or small decorative detail, such as a saturated pink, green, blue, or orange chosen from the user’s brand palette.
- Brand or integration marks should be treated as monochrome or low-saturation visual references and must not overpower the trust message.
- Avoid gradients, excessive glow, and multiple competing accent colours.

### Borders, radius, and surfaces
- Prefer a continuous editorial surface over floating cards.
- Use square or very subtly rounded corners, around `0–8px`; do not make every testimonial a pill-shaped card.
- Use 1px inset or separating borders and occasional very subtle tonal shifts, such as `#131519`, to define regions.
- Keep the testimonials grid visually connected to the section rather than placing cards on conspicuous elevated panels.

### Interaction and responsive behaviour
- Make ecosystem items link to relevant integrations or documentation when applicable, with a quiet hover state that increases text brightness or adds a subtle underline.
- Make the community link and testimonial source links visibly interactive through a small arrow/icon and an understated underline or colour shift on hover.
- If testimonials are in a grid, preserve the reading order on mobile and ensure every quote remains understandable without hover.
- Use tasteful reveal-on-scroll motion only if it supports hierarchy: fade or translate bands by a few pixels, with reduced-motion support. Do not animate the metrics continuously.
- Ensure keyboard focus states are visible against the dark surface.

### Content strategy
- Use the first band to answer “what does this work with?”
- Use the statement band to communicate a credible mission, licensing model, or community promise.
- Choose metrics that are concrete and easy to compare: adoption, contributions, reliability, community size, or usage.
- Mix short and long testimonials so the grid feels organic, but keep each quote specific and outcome-oriented.
- Include author names, roles or companies, and optional source links to make the proof verifiable.

## Never
- Never reuse the reference’s logos, product names, testimonial copy, metric values, author identities, company names, illustrations, icons, or imagery.
- Never make the result look like a pixel-level recreation of the reference layout; adapt the number of columns, content, and proportions to the user’s product.
- Never invent endorsements, usage statistics, licensing claims, or customer identities without user-provided evidence.
- Never use decorative imagery or logos from the reference; use the user’s own assets or neutral text placeholders instead.
- Never sacrifice contrast, responsive behaviour, or keyboard accessibility for visual similarity.