## 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/obsidian-md/18ba00bf-73a3-4c61-9eb0-f66f69cff1b6-1789060833-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/obsidian-md/18ba00bf-73a3-4c61-9eb0-f66f69cff1b6-1789060782-full.webp
- Component on Kage: https://kage.design/component/obsidian-md-feature-grid-4

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colours, and visual references are. Then apply the principles below to create a version for my product—not a copy of the reference.

## Build this section
Create a dark, premium feature-grid section for a software product landing page. The section should explain a central capability through a short introduction, three supporting benefits, and a large product UI preview beneath them.

### Layout and alignment
- Use a full-width near-black section with a centered content container, roughly 1120–1200px wide.
- Align all content to the same left and right container edges.
- Start with a compact introductory block in the upper-left rather than centering everything. Keep it to about 45–55% of the content width so the heading and paragraph have an intentional reading measure.
- Use a three-column benefits grid below the introduction. Keep columns equal in width, with generous horizontal gaps and consistent left alignment.
- Each benefit contains a small line icon, a short title, and a two- or three-line description. Place the icon above the title and give it clear separation from the text.
- Finish with a wide, rounded product-interface preview spanning the full grid width. It should feel like a tangible proof point, not a decorative banner. Use a realistic but generic interface relevant to the user's product.
- On smaller screens, stack the benefits vertically and allow the preview to crop or scroll horizontally without breaking the page. Preserve generous side padding.

### Typography hierarchy
- Use a large, bold sans-serif heading with a confident, short statement. Approximate size: 52–64px on desktop, 38–44px on mobile; line-height around 1.05.
- Use a quieter introductory paragraph below it at approximately 24–28px, with a 1.3 line-height and a maximum width that supports three or four lines.
- Make inline action text or links use the brand accent colour and a subtle hover underline or brightness shift.
- Benefit titles should be semibold, approximately 19–21px, with compact line-height.
- Benefit descriptions should be 17–19px, relaxed line-height around 1.35–1.45, and lower contrast than the titles.
- Use sentence case and concise copy. Avoid making every element visually loud.

### Colour
- Base background: near-black, approximately `#0F0F10` or `#101011`.
- Primary text: soft white, approximately `#F2F1F3`.
- Secondary text: muted cool gray, approximately `#AAA8AD`.
- Accent: a restrained lavender, violet, or product-specific highlight, approximately `#A78BFA`; adapt this to the user's brand.
- Product preview surface: slightly lighter charcoal, approximately `#1C1C1E`.
- Preview borders and dividers: subtle gray, approximately `#3A393D`, never bright white.
- Maintain strong text contrast while keeping the overall palette calm and dark.

### Borders, radius, and depth
- Give the large preview a 1px low-contrast border and a medium radius around 10–14px.
- Use the preview's own panels, dividers, and controls to create hierarchy rather than heavy shadows.
- Keep benefit cards borderless so the three-column row feels open and editorial.
- Use small corner radii, around 4–8px, for controls inside the preview. Avoid excessive pill shapes unless they fit the user's product language.

### Icons and interface preview
- Use simple, consistent 20–24px outline icons with the accent colour. Choose symbols that clarify each benefit; do not use decorative illustrations.
- Build the preview as a believable static application surface: navigation or sidebar, content hierarchy, controls, and one distinctive product feature. Keep it legible at a glance but visually subordinate to the headline.
- Include subtle labels, dividers, and UI states to make the preview feel functional. Do not rely on a screenshot asset; construct the interface with HTML/CSS or the project's existing components.

### Interaction and responsive behaviour
- Make the inline link and any preview controls show clear hover and focus states.
- On hover, icons may brighten slightly and links may shift colour, but avoid animated cards or distracting motion.
- Use a short, subtle entrance transition only if the surrounding product supports motion; respect reduced-motion preferences.
- Ensure keyboard focus is visible and all interactive elements have accessible labels.
- At tablet width, reduce the heading size and column gaps. At mobile width, stack the benefits with consistent vertical spacing and keep the preview usable through responsive reflow or contained horizontal scrolling.

## Never
- Never copy the reference's logos, product names, wording, feature names, or interface labels.
- Never reuse the reference's exact copy, icon artwork, screenshot, illustration, or imagery.
- Never assume the user's product is a note-taking, documentation, or publishing tool; use the user's actual product and audience.
- Never create a generic three-card section detached from a meaningful product preview.
- Never use loud gradients, excessive shadows, dense decoration, or low-contrast text that harms readability.
- Never treat the reference as a fixed visual to reproduce; preserve the underlying layout, hierarchy, and interaction principles while creating an original design.