## 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-1789073868-9.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-card

## Before you start
Ask what the user's product is, who it is for, and what visual brand it uses. Then apply the principles below to that product rather than reproducing this reference literally.

## Build a framework ecosystem showcase card
Create a large, self-contained promotional card for a developer product, hosting service, API, infrastructure tool, or other technical platform. It should feel like a polished section inside a modern software marketing page: calm, editorial, credible, and conversion-oriented.

### Structure and layout
- Use one large rounded container with a very pale cool-gray background, approximately `#F4F6FB`, on a white page.
- Give the container a thin cool-gray border around `#CCD2DC`, a radius of `14–18px`, and generous internal padding: roughly `64–72px` desktop, reducing to `28–32px` on mobile.
- Center a small product marker at the top: use the user's own brand mark or a simple neutral symbol placeholder, not a reference logo.
- Place a centered headline below it. Use a large serif or distinctive display face, approximately `48–56px` on desktop and `34–40px` on mobile, with tight line-height around `0.98–1.08`. Allow one short phrase to use the product's accent colour for emphasis.
- Add a centered supporting paragraph beneath the headline. Keep it to two lines on desktop, with a readable sans-serif around `18–20px`, line-height `1.45`, and muted colour near `#596276`.
- Below the intro, create a two-column feature row. Put a product UI preview, video frame, or dashboard mockup on the left and a short benefit statement on the right. Use a roughly `1.25fr / 0.9fr` ratio, align both columns vertically around the middle, and maintain at least `72px` of gap.
- The preview should have a visible frame, subtle shadow, and `8–10px` radius. If using video, provide familiar controls or a poster-like UI state, but do not depend on autoplay for comprehension. The preview is supporting evidence, not the main focal point.
- Make the feature heading large and editorial, around `32–38px`, with a compact line-height. Highlight one or two meaningful words in the brand accent colour. Follow with a paragraph around `17–19px` in muted navy-gray.
- Under the feature row, add a broad, evenly distributed ecosystem strip. Use abstract framework/category marks, geometric symbols, or text badges relevant to the user's product; arrange them over two flexible rows on wide screens and a wrapping grid on small screens. Keep each mark visually quiet and consistent in scale so the strip reads as proof of compatibility rather than a logo wall.
- Finish with a centered conversion cluster: a small neutral product marker or decorative divider, one prominent primary button, and one or two secondary buttons beneath it. Keep this area clearly separated from the ecosystem strip with generous vertical whitespace.
- Use a responsive single-column flow on mobile: intro, preview, feature copy, ecosystem grid, then actions. Avoid horizontal overflow.

### Visual language
- Use a near-black blue for primary text, approximately `#071525` or `#0A1728`.
- Use a vivid cyan-blue accent, approximately `#058BD0` or `#087FC1`, for emphasized words, links, borders, and the primary action.
- Use a soft sky-blue button fill around `#9DDAF5` with a stronger cyan-blue border. Add a slightly offset or layered lower edge in a darker blue to give the button a tactile, dimensional feel without becoming skeuomorphic.
- Use secondary buttons with a lighter blue fill around `#B8E4F8`, the same dark text, and a modest darker-blue lower edge.
- Keep body copy in `#5B6578`; avoid pure black and avoid high-saturation decoration outside the accent colour.
- Use a serif/display font for headlines and a clean sans-serif for descriptions, UI labels, and buttons. If the product has a recognizable type system, preserve its personality while maintaining this contrast.
- Use generous whitespace, especially between the hero copy, feature row, ecosystem strip, and CTA. The card should feel airy rather than densely dashboard-like.
- Use shadows sparingly: a soft `0 8px 24px rgba(10, 28, 55, 0.10)` for the preview and a low, crisp shadow or offset edge for buttons.

### Interaction and accessibility
- Make the primary CTA clearly dominant and include a right-facing arrow or equivalent affordance only if it matches the user's product language.
- Add hover and focus states: slightly darken the primary button, lift it by `1–2px`, and retain a highly visible focus ring in the accent colour.
- If the preview is interactive, provide play/pause, mute, fullscreen, and accessible labels; respect reduced-motion preferences.
- Make ecosystem marks decorative or give each an accessible label if they represent supported technologies. Do not make the marks compete with the CTA.
- Ensure text contrast meets WCAG AA and keep touch targets at least `44px` high.

### Never
- Never copy the reference's logos, product names, framework marks, exact wording, screenshots, or button labels.
- Never use the reference brand's mascot, illustration, video, or imagery.
- Never create a pixel-for-pixel recreation; adapt the layout logic and visual principles to the user's product and brand.
- Never rely on copied third-party logos or unlicensed assets; use original symbols, text badges, or the user's approved assets instead.
- Never let the ecosystem strip overpower the headline, product preview, or primary conversion action.