## 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/moji/682da163-2f11-4698-8415-78d5458fc05f-1789193061-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/moji/682da163-2f11-4698-8415-78d5458fc05f-1789192951631-full.webp
- Component on Kage: https://kage.design/component/moji-cta

## Before you start
Ask what final action the user's product needs visitors to take and whether the product is open source, community-led, or otherwise supported by a repository. Apply the same hierarchy without copying the reference.

Build a wide, dark rounded CTA panel inside a light page section. Use a small icon or abstract mark on the left, an eyebrow and large serif title in the center-left, supporting copy below, and a light outlined or filled action button aligned to the right. Keep the panel around 120–170px tall with 30–40px internal padding, 16–20px radius, and a subtle angular gradient or texture. Use #202123 panel, #f5f2eb text, #aaa69e secondary copy, #f7f6f1 button, and #b52d27 only for tiny accents. Make the button prominent, keyboard accessible, and stack the action below the text on narrow screens.

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