## 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/codeaf/74fffb9e-aea6-4193-af2d-c8a5b19c270c-1791007529-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/codeaf/74fffb9e-aea6-4193-af2d-c8a5b19c270c-1791007420738-full.webp
- Component on Kage: https://kage.design/component/codeaf-logo-cloud-2

## Before you start
Ask what open standards, providers, models, or communities matter to the user's product and which ones can be named. Apply the structure using only appropriate assets and claims.

Create a dark ecosystem section with a clear heading and short explanation at the top. Below, use a split layout: a small featured tile on the left with an abstract model/provider symbol and a tiny metadata label, and a paragraph on the right explaining interchangeability and user control. Finish with a low-contrast horizontal list of compatible providers or standards and one community/open-source action link.

Design language: #08090a background, #d8dad7 heading, #777b79 supporting copy, hairline borders #272927, and amber/olive #b99643 for brackets or a key marker. Use 20–24px heading text, 12–14px body copy, and 10–11px mono metadata. Keep the featured tile geometric and understated, with square corners and thin bracket-like rules; use plenty of negative space. Provider items should be text-first and de-emphasized, with accessible hover/focus treatment.

Never: use logos, product names, copy, illustrations, or imagery from the reference.