## 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-1789060440-10.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-2

## Before you start
Ask the user what their product is, who it is for, and what their brand personality and visual identity are. Then apply the principles below to create an original CTA for that product—not a copy of the reference.

## Design direction
Build a visually led call-to-action section that makes the product feel tangible before asking the visitor to act. Use a large media or product-preview stage as the focal point, with a calm light page background around it and a distinct lower content area that can transition into social proof.

### Layout and alignment
- Place the CTA inside a wide, centered container with generous horizontal margins; use approximately 92–96% width on desktop and 100% width with internal padding on mobile.
- Make the primary visual stage wide and landscape-oriented, with an aspect ratio around 2:1 or 16:9. Keep it visually dominant rather than surrounding it with dense copy.
- Use a deep, near-black rounded rectangle for the stage, approximately `#11151F` or `#10131C`, with a large radius around 48–64px on desktop and 28–36px on mobile.
- Center the product visualization inside the stage. Construct it from several offset interface panels or cards: a large foreground panel and narrower, partially hidden layers behind it. Let the layers create depth through overlap and small perspective or vertical offsets.
- Use a full-bleed abstract gradient behind the interface layers, combining saturated coral, pink, electric blue, and muted violet. Suggested colours: `#F24F72`, `#FF7A6B`, `#398ED0`, `#6F73D8`, and `#20263B`.
- Keep the main foreground panel substantially smaller than the stage so the dark frame remains visible. Give it a soft shadow, subtle border, and a restrained white or pale-lavender surface such as `#F6F5FB`.
- If the section includes supporting copy or a testimonial below, separate it from the visual stage with ample white space—roughly 72–120px on desktop. Keep the supporting block in a pale blue or cool off-white rounded panel, such as `#EAF3FF`, with a radius around 40–56px.
- Align supporting content to a clear central column. Use a compact eyebrow or proof marker above the main statement, followed by a strong quote or CTA headline and an action row beneath it.
- On mobile, reduce the stage height, preserve the layered composition, and allow the foreground preview to crop slightly rather than shrinking every detail until it becomes unreadable.

### Typography hierarchy
- Use a contemporary sans-serif with a friendly, high-legibility feel. Prefer a variable sans with rounded forms; fall back to system sans-serif.
- Keep any CTA headline bold and compact, around 44–64px on desktop with 0.95–1.05 line-height. On mobile use 32–42px.
- Use medium-weight supporting text at 17–20px with approximately 1.4 line-height.
- Keep labels, metadata, and eyebrow text small—12–14px—with medium or semibold weight and slightly increased letter spacing.
- Use dark navy text such as `#172033` or `#101827`; avoid pure black for large text.

### Colour, borders, and surfaces
- Let the media stage carry the strongest colour contrast; keep the surrounding page mostly white or very pale blue, around `#FFFFFF` and `#F7FAFF`.
- Use subtle 1px borders around interface cards, approximately `rgba(25, 35, 55, 0.12)`.
- Use soft, layered shadows rather than heavy outlines: for example `0 24px 70px rgba(10, 18, 40, 0.22)` on the main preview.
- If adding a button, use one high-contrast filled treatment in the product's primary brand colour, with a contrasting secondary text or outline action only when necessary. Use a radius between 10–999px based on the brand system, not automatically a pill.
- Ensure all text and controls meet accessible contrast requirements, especially over gradients.

### Product-preview composition
- Represent the user's product with abstract but believable interface surfaces: browser chrome, a dashboard, a document, a timeline, a report, a profile card, or another domain-relevant object.
- Keep the foreground interface simple enough to read at a glance. Include only a few realistic content cues, such as a title, status chips, a chart, or a small media/avatar area.
- Make the rear layers visibly different in tone or content so the depth reads immediately. They should support the story, not compete with the focal panel.
- Use decorative gradient shapes or blurred colour fields behind the UI, but keep them soft enough that the interface remains the clear subject.

### Interaction and motion
- Add a restrained entrance animation: the rear layers can fade and slide into place first, followed by the foreground panel. Keep the duration around 500–800ms with an ease-out curve.
- On hover, allow the primary CTA to shift colour slightly and lift by 1–2px. Avoid excessive parallax or motion that distracts from the action.
- Respect `prefers-reduced-motion` by removing transform and stagger animations.
- Make the entire CTA action area keyboard accessible with highly visible focus states.

## Never
- Never reuse the reference product's logo, product name, interface copy, testimonial wording, or brand marks.
- Never copy the exact composition, screenshots, gradients, imagery, or decorative shapes from the reference.
- Never use the reference person's portrait, stock imagery, illustrations, or recognizable media assets.
- Never make the CTA depend on an inaccessible image; provide meaningful text alternatives or treat decorative visuals as hidden from assistive technology.
- Never overcrowd the stage with tiny UI details, excessive buttons, or unrelated decoration.
- Never assume the user's product is a video tool; adapt the preview, message, colours, and action to the user's actual product and brand.