## 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/render-com/a2f1bfec-cff8-46a3-938e-5c68bed6eccd-1789073949-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/render-com/a2f1bfec-cff8-46a3-938e-5c68bed6eccd-1789073879-full.webp
- Component on Kage: https://kage.design/component/render-banner

## Before you start
Ask the user what their product does, who it is for, and what their brand looks and sounds like. Then apply the principles below to create a version that fits their product rather than reproducing the reference.

## Design goal
Build a wide promotional banner that communicates broad compatibility, flexibility, or ecosystem support. Balance a clear editorial message on the left with a lively, partially cropped visual system on the right. The banner should feel confident, modern, and developer-oriented without depending on literal brand marks or copied content.

## Layout and alignment
- Use a full-width horizontal section with a generous fixed or responsive height, approximately 340–380px on desktop.
- Place content inside a centered max-width container, while allowing the background to span edge to edge.
- Divide the composition into two zones: roughly 34–38% for text and CTA, and the remainder for a decorative tile grid.
- Align the text block to the left and vertically center it. Keep the copy width narrow enough to create a strong multiline headline, around 300–390px.
- Position the tile grid on the right, with two or more staggered rows of equal square tiles. Let the grid extend beyond the right edge and crop it intentionally; the crop should feel like a continuation, not a layout error.
- Keep enough breathing room between the text and the first tile. On smaller screens, stack the text above a horizontally overflowing grid or hide/reduce the grid while preserving the message and CTA.

## Typography
- Use a clean contemporary sans-serif with a light-to-regular weight for the main statement.
- Set the headline large and airy, approximately 46–54px on desktop with a line-height around 1.05–1.15. Use sentence case and short lines created by the text column width rather than manual decoration.
- Use a compact CTA label in a 14–16px medium-weight sans-serif.
- Preserve strong contrast and a simple hierarchy: one headline, one action, no secondary explanatory paragraph unless the product needs it.

## Colour and surface
- Use a very pale lavender background that can fade toward near-white at the left, approximately `#F1EAFE` to `#FFFFFF`, with a soft lilac tint around the tile area such as `#E5D6FA`.
- Use an intense violet/purple for the tiles, approximately `#8500F5` or `#7A00E8`, allowing a subtle variation between tiles.
- Use near-black text and CTA, approximately `#111111`.
- Make the CTA a solid near-black rectangle with white text. Keep it visually decisive rather than pill-shaped.
- Tile contents should be abstract, simple, high-contrast symbols or short neutral labels representing categories, capabilities, or technologies. Use white or very pale lavender marks, but do not use recognizable third-party logos from the reference.

## Borders, radius, and spacing
- Keep the banner surface flat and spacious; avoid cards nested inside the banner.
- Use square or nearly square tiles with little to no corner radius, approximately 0–3px.
- Use a compact, consistent gap between tiles, approximately 28–32px horizontally and 18–22px vertically.
- Make tiles around 68–72px square on desktop, with their internal marks centered.
- Keep the CTA rectangular with no or minimal radius, around 0–2px, and provide approximately 16–24px horizontal padding and 13–16px vertical padding.
- Use generous outer padding, approximately 72px horizontally and 56–64px vertically on desktop. Reduce these values proportionally on smaller screens.

## Interaction and responsive behaviour
- Give the CTA a clear hover state: slightly lighten or darken the background, add a subtle upward or rightward movement, and animate over roughly 150–200ms.
- If the tile grid is interactive, use a restrained hover treatment such as a slight lift, brightness shift, or gentle scale; otherwise make it decorative and non-interactive.
- Respect reduced-motion preferences.
- Ensure the cropped tile grid does not cause horizontal page scrolling. Clip it within the banner or its visual column.
- On mobile, use a smaller headline around 34–40px, stack the layout, and turn the tile field into a clipped horizontal strip beneath or beside the CTA.

## Content guidance
- Write a concise statement about the user's product supporting many workflows, formats, environments, integrations, or implementation paths.
- Use a short action label appropriate to the product, such as exploring options, browsing solutions, or seeing examples.
- Invent original neutral symbols or category labels for the decorative tiles so the composition communicates breadth without relying on external identity systems.

## Never
- Never copy the reference’s logos, product names, exact headline, CTA wording, or tile labels.
- Never use recognizable technology or company logos from the reference.
- Never include the reference’s illustrations, imagery, icons, or brand assets.
- Never reproduce the exact tile arrangement, wording, dimensions, or gradient treatment; adapt the principles to the user’s product and brand.
- Never let the decorative grid overpower the headline or make the banner difficult to scan.