## 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-9.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-card

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

## Design the component
Build a large promotional feature card for a high-value product offering, audience segment, or enterprise tier. It should feel like a confident, premium interruption within a lighter page.

### Layout and alignment
- Use a wide, centered card inside the page content grid, with a max width around 1200px and responsive horizontal margins of roughly 24–40px.
- Give the card a tall composition: a compact content block in the upper-middle area and a visual/product area that can continue below or appear partially cropped at the bottom.
- Center-align the heading, supporting copy, and CTA as one vertical stack.
- Keep the text measure restrained—approximately 600–700px—so the message remains readable and visually calm.
- Reserve substantial breathing room above the heading and between the CTA and the lower visual area.
- On small screens, reduce the card height and horizontal padding while preserving the centered hierarchy; allow the supporting text to wrap naturally.

### Typography hierarchy
- Use a bold, modern sans-serif with a slightly rounded or friendly character if it suits the brand.
- Set the headline large and heavy, approximately 48–58px on desktop with tight line-height around 0.98–1.08; scale to roughly 34–40px on mobile.
- Use a supporting sentence around 21–24px with 1.35–1.5 line-height and a medium weight.
- Keep the CTA label short, explicit, and semibold, around 14–16px.
- Avoid excessive text: this component works because the headline and one concise explanation do most of the communication.

### Colour and atmosphere
- Use a near-black charcoal base, approximately #25272B or #202124, rather than absolute black.
- Add a subtle atmospheric gradient or blurred glow toward the lower portion of the card, using the product brand’s accent colours at low opacity. A suitable starting point is deep navy #071426 with restrained coral #F06462 and electric blue #2778E8 hints.
- Keep the heading and body copy warm white, approximately #F7F7F4, with enough contrast against the dark surface.
- Make the CTA a saturated brand accent such as #2879E8, with white text and icon.

### Borders, radius, and depth
- Use a large rounded corner radius, approximately 56–64px on desktop and 32–40px on mobile.
- Avoid a heavy visible border; use a barely perceptible dark edge or inset highlight if needed.
- Let the dark surface and soft lower glow provide depth instead of drop shadows.
- Any product visual below the fold should feel integrated into the card, not like a separate floating panel.

### Interaction
- Make the entire CTA clearly clickable and keyboard accessible.
- Include a small external-link or directional icon only if the destination is genuinely separate; otherwise use a simple arrow or no icon.
- On hover, slightly brighten the CTA, raise its contrast, and optionally translate the icon a few pixels. Keep the card itself stable rather than adding a distracting lift.
- Provide visible focus styles with a high-contrast outline.
- Respect reduced-motion preferences and ensure the card remains fully usable without hover effects.

## Never
- Never use logos, product names, or brand copy from the reference.
- Never reuse the reference’s exact headline, supporting sentence, CTA wording, or icon treatment.
- Never copy the reference’s illustrations, product screenshots, gradients, or imagery.
- Never make the section dependent on the reference brand’s colours; adapt the palette to the user’s product and brand.
- Never sacrifice readability or accessibility for the oversized visual treatment.