## 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/deno-com/32c2f827-c733-4746-82ec-fc83a363518f-1789073869-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/deno-com/32c2f827-c733-4746-82ec-fc83a363518f-1789073825-full.webp
- Component on Kage: https://kage.design/component/deno-feature-grid-6

## Before you start
Ask what the user's product is, who it is for, and what its brand voice, visual identity, and primary conversion goal are. Then apply the principles below to create an original feature-and-proof section for that product rather than reproducing the reference.

## Build this section
Create a spacious product feature section that introduces one important capability and follows it with a compact developer/customer validation block. The section should feel editorial, technical, confident, and calm.

### Layout and alignment
- Use a wide, centered content container with generous horizontal gutters: approximately 56–72px on desktop and 20–24px on mobile.
- Start with a large feature row using a two-column layout. Put the text block on the left and a visual product preview on the right; use roughly a 42/58 split and vertically center the two columns.
- Give the feature row substantial vertical breathing room, approximately 180–260px above and below depending on the surrounding page.
- Keep the text column constrained to about 390–460px so the heading remains readable and impactful.
- Place a small category/status label above the heading, followed by a large two- or three-line headline, supporting copy, and one rounded text CTA.
- The visual column should contain a dark terminal, dashboard, code, or product-interface preview. Add restrained decorative connector lines or technical accents only if they support the product story.
- Transition into a social-proof block with a centered heading and a short row of two or three compact metric cards. Keep this block narrower than the feature row, around 650–760px wide.
- On small screens, stack the feature columns, placing the visual below the text; reduce the headline size while preserving the large vertical rhythm. Stack metric cards vertically or allow them to form a clean two-column grid.

### Typography hierarchy
- Use a modern sans-serif with a slightly technical or editorial character; use the product's existing typeface when available.
- Make the feature heading very prominent: approximately 64–76px desktop, 1.02–1.08 line height, with tight letter spacing around -0.04em. Use 42–52px on mobile.
- Set the body copy around 18–20px with a 1.5–1.65 line height and a muted neutral colour.
- Use the small label at 13–15px, medium weight, with compact line height.
- Make the proof heading bold and centered at approximately 56–68px desktop, scaling to 40–48px on mobile.
- Metric values should be clearly dominant at roughly 24–30px, with supporting labels around 13–15px.

### Colour
- Use a warm or neutral near-white page background such as #ffffff or #fbfcfb.
- Use near-black text such as #080909 or #101212.
- Use a muted grey for supporting text, approximately #5f6666 or #697070.
- Use a vivid mint/green accent for labels, buttons, icons, and subtle technical lines, approximately #68f2b2, #55e8a6, or a brand-appropriate equivalent.
- Use a deep charcoal for the technical preview, approximately #17191c or #1d2023, with soft grey interface text and mint status highlights.
- Maintain strong contrast and do not let decorative colour compete with the headline or CTA.

### Borders, radius, and depth
- Use light grey borders around metric cards, approximately #e2e6e4, with a 1px stroke.
- Give cards a restrained radius of 14–18px and a very subtle shadow such as 0 2px 8px rgba(0,0,0,0.06).
- Use a larger 10–14px radius for the dark product preview; avoid excessive card rounding elsewhere.
- Make the CTA pill-shaped with a radius of 999px and generous horizontal padding, approximately 24–30px.
- Keep borders and shadows quiet so the composition remains mostly typographic and spacious.

### Content and interaction
- Write original product-specific copy: a short category label, a concise capability-led headline, two to four lines of explanation, and a direct documentation, demo, or learn-more CTA.
- Metric cards should communicate meaningful evidence such as adoption, reliability, performance, or community strength. Pair each number with a small, simple icon inside a mint circular badge.
- The technical preview can show realistic but invented interface content relevant to the user's product; it should be legible without becoming the main message.
- Add hover states to the CTA and any linked metric cards: slightly darken or shift the accent colour, raise the element by 1–2px, and animate over 150–220ms.
- Respect reduced-motion preferences and ensure the layout works with keyboard navigation and screen readers.

## Never
- Never use the reference's logos, product names, brand marks, mascot, or trademarked symbols.
- Never reuse the reference's exact headline, body copy, metric values, labels, or CTA wording.
- Never copy the reference's exact terminal artwork, UI contents, line illustration, spacing measurements, or composition pixel-for-pixel.
- Never use unrelated stock photography, decorative illustrations, or imagery when a simple product preview or typographic treatment communicates the idea better.
- Never sacrifice responsive behaviour, accessibility, readable contrast, or the user's own brand identity in pursuit of visual similarity.