## 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/loom-com/c384a931-6938-4c5e-b36b-e07415522afb-1789060437-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/loom-com/c384a931-6938-4c5e-b36b-e07415522afb-1789060413-full.webp
- Component on Kage: https://kage.design/component/loom-cta

## Before you start
Ask the user what their product is, who it serves, and what visual brand direction they want. Then apply the principles below to create an original version for that product—do not reproduce the reference literally.

## Build a split feature CTA panel
Create a self-contained promotional CTA section for a modern software product. It should feel like a confident feature announcement: a vivid coloured container holds a visual demonstration on the left and a short, persuasive content block on the right.

### Layout and alignment
- Place the section inside a wide page container with generous white space around it.
- Use a two-column layout on desktop, with the visual taking roughly 48% of the inner width and the text taking roughly 42%; leave a substantial gap between them.
- Vertically center both columns within the panel.
- Keep the text column left-aligned and constrain its line length so the heading remains readable.
- On smaller screens, stack the visual above the text, preserving clear separation and comfortable side padding.
- Give the outer panel generous internal padding, approximately 64–72px on desktop and 32px on mobile.

### Typography hierarchy
- Add a small eyebrow label above the headline. Make it bold and compact, around 20–22px.
- Use a large, bold sans-serif headline, approximately 48–56px on desktop with tight line-height around 0.98–1.05. Allow it to wrap across two or three lines.
- Follow with a supporting paragraph around 20–24px, using a relaxed line-height around 1.5. Keep the copy specific enough to explain the benefit, but avoid turning it into a long article.
- Use a short, action-oriented button label.
- Use a contemporary sans-serif typeface with strong weight contrast and ensure all text remains highly legible against the panel colour.

### Colour and visual treatment
- Use a saturated brand-led panel colour, such as a vivid blue around `#2468D8`, but adapt the hue to the user's brand.
- Use near-white text around `#F8FAFF` for the eyebrow, heading, and body copy.
- Use a dark near-black CTA button around `#111315`, with white text.
- The left visual should resemble a product UI or workflow preview, using simplified interface shapes, subtle translucent layers, and restrained accent colours. It should support the message without competing with the text.
- If the product needs imagery, use an original abstract or UI-based visual rather than stock photography.

### Borders, radius, and spacing
- Use a large rounded outer radius, approximately 56–64px on desktop and 32–40px on mobile.
- Keep the panel borderless or use only a very subtle tonal edge; do not add a heavy outline.
- Give the visual its own rounded container, approximately 32px radius, with a softly contrasting background.
- Space the eyebrow, headline, paragraph, and button in a clear vertical rhythm: roughly 16px between eyebrow and headline, 24px between headline and paragraph, and 28–32px before the button.
- Use a generous gap between the visual and copy, approximately 48–64px.

### Interaction and accessibility
- Make the CTA button visibly interactive with a subtle colour or lift transition on hover and a clear keyboard focus ring.
- Ensure the entire section is responsive without horizontal scrolling.
- Maintain WCAG-friendly contrast and semantic heading/button markup.
- If the visual contains motion, keep it subtle, optional, and respectful of reduced-motion preferences.

### Never
- Never use logos, product names, exact copy, illustrations, screenshots, people, or imagery from the reference.
- Never copy the reference's brand identity or reproduce its exact visual composition.
- Never make the decorative visual more prominent than the message and primary CTA.
- Never use low-contrast text, excessive shadows, or dense paragraphs that undermine scanability.