## 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-4.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-feature-grid

## Before you start
Ask the user what their product is, who it is for, and what visual brand system they want to use. Then apply the principles below to their product rather than reproducing this reference literally.

## Build a feature-grid section
Create a dark, editorial feature section that explains several product capabilities through one dominant product preview and a supporting stack of feature descriptions. The layout should feel calm, spacious and premium, with the preview carrying visual weight and the copy providing a clear narrative progression.

### Layout and alignment
- Use a full-width dark section with a centered max-width container of approximately 1120–1200px.
- Begin with a two-column introductory row: a large headline aligned left and a short supporting paragraph aligned right. On desktop, vertically center the paragraph against the headline; on smaller screens, stack both with the headline first.
- Below the introduction, use a split feature grid. Give the product preview roughly 50% of the width and the feature-story column roughly 40%, with a generous gutter between them.
- Keep the preview aligned to the left edge of the content container. Let it be tall and visually prominent, such as a framed interface, device mockup, dashboard, or other product-specific visual. Do not rely on a generic stock image.
- Stack three or more feature stories vertically on the right. Each story should include a tiny expressive accent, a short heading, and a concise explanatory paragraph.
- Use generous vertical spacing between stories so each benefit reads as a distinct beat. The feature column can extend alongside the preview rather than being forced into equal-height cards.
- On mobile, switch to one column: introduction, preview, then feature stories. Preserve breathing room and avoid shrinking the preview into an unusable thumbnail.

### Typography hierarchy
- Use a clean contemporary sans-serif with slightly tight tracking for headlines and relaxed line-height for body copy.
- Make the main headline large and assertive, approximately 56–72px on desktop, with a line-height around 0.98–1.05. Use two lines or a deliberate line break when it improves rhythm.
- Make the feature headings approximately 28–34px, medium or semibold, with compact line-height. Keep them to one or two lines.
- Set supporting and feature body copy around 16–18px with a 1.5–1.65 line-height and a readable maximum width of about 34rem.
- Use muted text for secondary lines, while keeping the main headline and feature headings high contrast.
- Avoid dense UI-like labels; the tone should read as product storytelling rather than documentation.

### Colour
- Use a near-black blue-violet background around `#10101B` or `#11111D`.
- Use warm off-white for primary text around `#F2F1F8`.
- Use a cool lavender-grey for supporting text around `#A9A8B8`.
- Give each feature a small accent mark in a distinct bright colour—such as coral `#FF7890`, cyan `#70C9FF`, violet `#A783FF`, lime `#D7E85B`, or mint `#71E1C5`—but keep the accents limited to small decorative marks or icons.
- If the product preview has its own surface, use layered blue-violet greys around `#24243A`, `#38384E`, and `#4A4A60` so it feels embedded in the dark section without disappearing.

### Borders, surfaces and radius
- Avoid heavy card borders around the copy. Separate stories primarily through whitespace.
- Use subtle borders only where the product preview needs framing, using a translucent light colour such as `rgba(255,255,255,0.08)`.
- Give the preview a large radius, approximately 24–32px, with a slightly darker outer frame or inset surface.
- If the preview contains panels or controls, use smaller nested radii around 12–20px and soft, low-contrast shadows.
- Do not make every feature a rounded card; the open composition is part of the design.

### Interaction and responsive behaviour
- If the product preview is interactive, allow subtle hover or focus elevation without distracting from the copy. Respect reduced-motion preferences.
- Make any feature links or controls keyboard accessible with a clear focus ring in the current accent colour.
- On hover, accent marks may brighten or shift by a few pixels, but avoid elaborate animation.
- Keep the section performant and ensure the preview remains crisp, cropped intentionally, and accessible with meaningful alternative text.
- Maintain strong contrast and readable measure at every breakpoint.

### Content guidance
- Write a short, benefit-led headline for the section rather than a generic “Features” label.
- Give each feature a distinct user outcome. Use concise, conversational headings and one short paragraph that explains how the product delivers that outcome.
- Use decorative accents to help users scan, not to replace meaningful labels or icons.

## Never
- Never copy the reference’s logo, product name, brand identity, exact copy, or wording.
- Never reuse the reference’s device mockup, interface, data, icons, illustrations, imagery, or decorative artwork.
- Never reproduce the exact layout proportions, line breaks, colour sequence, or feature ordering; adapt the structure to the user’s product and content.
- Never add ornamental visuals that do not clarify the product or its benefits.
- Never sacrifice accessibility, responsive behaviour, or semantic HTML for visual similarity.