## 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/mmbl-io/849f4ec6-ce65-4185-a867-71fbc561b804-1789060567-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mmbl-io/849f4ec6-ce65-4185-a867-71fbc561b804-1789060540-full.webp
- Component on Kage: https://kage.design/component/mmbl-cta

## Before you start
Ask the user what their product is, who it is for, and what brand personality, colours, typography, and conversion goal should shape this section. Then apply the principles below to their product rather than reproducing the reference.

## Build a focused app-download CTA
Create a standalone, responsive CTA section for a digital product. It should feel like a calm, premium moment near the end of a landing page, with one unmistakable action and no competing navigation or secondary buttons.

### Layout and alignment
- Use a very dark full-width background, approximately `#10101A` or a close brand equivalent.
- Keep the content in a narrow centered column, with generous empty space around it. On desktop, the content should occupy roughly 560–680px; on mobile, use about 24px horizontal padding.
- Stack the elements vertically and center-align every item:
  1. a small abstract product mark or decorative colour bars,
  2. a large two-line headline,
  3. a short supporting paragraph,
  4. one app-download CTA.
- Give the section substantial vertical padding, approximately 220px top and 120px bottom on large screens. Reduce this proportionally on mobile while preserving the spacious feeling.
- If this section sits at the bottom of a page, add a very subtle 1px divider near the lower edge, approximately `rgba(255,255,255,0.12)`.

### Typography hierarchy
- Use a modern sans-serif with clean geometry and strong rendering at large sizes.
- Set the headline in a bold or semibold weight, approximately 72–80px desktop with 0.95–1.02 line-height and slight negative letter spacing. Use 42–52px on mobile.
- Make the headline two lines for rhythm, but allow natural wrapping based on the user's copy. Keep the first line in a soft near-white such as `#F5F3FA`, and emphasize one meaningful phrase in a vivid accent gradient or purple such as `#A76BFF` to `#C184FF`.
- Use a concise supporting sentence below the headline in a muted lavender-grey, approximately `#9B98A8`, at 16–18px with 1.55 line-height. Limit it to about 34–40 characters per line where practical.
- Preserve clear hierarchy: headline first, explanatory copy second, action last.

### Decorative mark
- Create a small abstract mark above the headline using 4–5 rounded vertical bars with varied heights and a restrained palette such as coral `#FF607D`, violet `#AA72FF`, blue `#63B8F2`, and orange `#FF9948`.
- Keep the mark compact, approximately 80–90px wide and 70–85px high, with 7–10px rounded corners and uneven bar heights. It should support the brand mood without functioning as a logo or requiring recognition.
- Add roughly 38–48px of space between the mark and headline.

### CTA treatment
- Use a single light app-store/download button with a rounded rectangle shape, approximately 196–220px wide and 66–72px high.
- Use a very pale lavender-white fill such as `#F4F2FA`, dark text around `#171721`, and a 12–14px radius.
- Arrange the button content horizontally: a simple platform glyph or neutral device icon on the left, then a compact two-line label with a small uppercase-style prelabel and a larger semibold destination label.
- Keep the button about 30–38px below the supporting copy.
- Add visible hover and keyboard-focus states: slightly brighten the surface, lift it by 1–2px, and show a clear accent-coloured focus ring. Respect `prefers-reduced-motion` and keep transitions around 150–200ms.
- Make the entire button an accessible link with a descriptive accessible name and a minimum 44px touch target.

### Responsive behaviour
- On narrow screens, reduce headline size and decorative spacing rather than allowing the CTA to feel cramped.
- Keep the mark, text, and button centered. Prevent the button label from wrapping awkwardly.
- Ensure the section has enough contrast and meets WCAG expectations, especially for muted supporting text and focus indicators.

## Never
- Never copy the reference's logo, product name, headline, supporting copy, or exact wording.
- Never use the reference's brand identity as the user's brand identity.
- Never include Apple/App Store logos, proprietary platform marks, illustrations, or imagery from the reference; use a properly licensed neutral icon or the user's approved asset instead.
- Never reproduce the exact decorative mark, colour arrangement, measurements, or visual details as a literal copy.
- Never add extra navigation, multiple competing CTAs, testimonials, feature cards, or unrelated imagery to this focused section.