## 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/arc-net/a4b44bb4-fce3-4305-950f-d12af4bc9a59-1789060398-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/arc-net/a4b44bb4-fce3-4305-950f-d12af4bc9a59-1789060376-full.webp
- Component on Kage: https://kage.design/component/arc-feature-grid

# Before you start

Ask me what my product is, who it is for, and what its brand personality, colours, and visual assets are. Then apply the principles below to my product rather than reproducing the reference section.

## Build a stacked product feature showcase

Create a long, editorial feature section for a modern software product. The section should communicate several capabilities in a calm, confident sequence. Each feature is a self-contained story with a short headline, a supporting sentence, and one large product visual beneath it.

### Structure and layout

- Use a full-width, white or near-white page background: approximately `#ffffff` or `#fafafa`.
- Stack 3–5 feature stories vertically in one centered column.
- Constrain the content to approximately `1120px–1200px` wide on desktop, with generous horizontal padding of `24px–40px`.
- Center-align each feature’s headline and description.
- Give every feature a large vertical rhythm: approximately `160px–240px` between the end of one visual and the next feature heading, depending on viewport height.
- Place the heading and supporting copy above the visual, with roughly `12px–20px` between them and `48px–64px` before the visual.
- Let product visuals occupy almost the full content width while retaining visible margins. They should feel like hero objects, not small cards.
- On mobile, reduce the outer padding to `16px–20px`, keep the stories stacked, and allow visuals to become wider than the text block while remaining safely within the viewport.
- Maintain a consistent visual aspect ratio per feature, but vary the internal product composition so the section feels like a set of capabilities rather than repeated identical cards.

### Typography hierarchy

- Use a friendly, contemporary sans-serif with rounded or humanist forms. Prefer the product’s existing font; otherwise use a close system or web-safe equivalent.
- Feature headings should be bold and compact, around `38px–48px` on desktop with a `0.95–1.05` line-height. On mobile, use `30px–36px`.
- Use a saturated brand accent for headings, approximately electric blue `#303bd7` or a product-specific equivalent.
- Keep headings to one or two lines and use sentence case. The line length should be narrow enough to create a strong visual focal point.
- Supporting copy should be neutral gray, approximately `#6b6b6b` or `#707070`, around `16px–18px` with a `1.4–1.55` line-height.
- Bold only the important feature terms inside supporting copy, and do so sparingly.

### Product visual treatment

- Represent the product with large, believable interface mockups rather than generic rectangles. Use realistic panels, toolbars, navigation, content areas, controls, and varied content density appropriate to the user’s product.
- Frame each visual as a polished desktop application or device window with a thin border, subtle shadow, and a lightly tinted chrome area.
- Use approximate frame styling: `1px` border in `#c9c9c9`, `10px–14px` radius, and a soft shadow such as `0 18px 45px rgba(0,0,0,0.14)`.
- Add restrained window chrome where relevant: small circular controls, a toolbar, or a side rail. Keep it subordinate to the feature content.
- Use the product’s own brand colours inside the interface, with one dominant accent and quieter supporting tones. Avoid making every feature the same colour treatment.
- Build visual interest through layered panels, split panes, cards, lists, images, gradients, or floating controls that demonstrate the capability being described.
- If imagery is needed, use neutral placeholders, generated abstract textures, or product-relevant sample content supplied by the user. Ensure it supports the interface rather than becoming a separate marketing illustration.
- On smaller screens, scale the mockups down or crop them intentionally; never allow text or controls to become unreadably tiny. Preserve the key interaction or visual idea of each feature.

### Spacing, borders, and surfaces

- Keep the surrounding page exceptionally uncluttered so the product visuals carry most of the visual weight.
- Use a spacing system based on multiples of `4px` or `8px`.
- Avoid enclosing every feature in a card. The feature story should sit directly on the page, with the mockup acting as the primary surface.
- Use mostly white surfaces, very light gray interface backgrounds such as `#f4f4f6`, and occasional soft brand tints such as lavender `#ecebff`, pale blue `#e6e9ff`, or warm cream `#fff9df`.
- Keep borders fine and low contrast. Rounded corners should be present on visual frames and inner panels, generally `6px–14px`; do not use excessive pill shapes.
- Add depth through restrained shadows and overlapping interface elements, not through heavy gradients or decorative borders.

### Interaction and motion

- If the product visual contains controls, make them visually legible but treat the mockup as a showcase rather than a fully functional application.
- Add subtle hover states to any genuinely interactive demo elements: a slight colour shift, border emphasis, or `1–2px` lift.
- Use gentle reveal-on-scroll motion for feature stories: fade and translate upward by about `16px–24px`, with a short ease-out transition. Respect `prefers-reduced-motion`.
- Avoid autoplay carousels, aggressive parallax, and motion that delays access to the content.

### Responsive behaviour

- Desktop: broad mockups, centered text, and generous whitespace.
- Tablet: reduce the maximum visual width slightly and tighten vertical gaps while preserving the same hierarchy.
- Mobile: use shorter headings, tighter section spacing, full-width mockups, and simplified interface details. Keep the feature order and message clear without requiring horizontal scrolling.

### Content guidance

- Write original copy for the user’s product. Each feature should express a distinct benefit or workflow, not just name a technical capability.
- A useful pattern is: benefit-led heading followed by one sentence explaining the user outcome, then a visual that proves it.
- Keep the tone optimistic, direct, and calm. Let the visual do the demonstrating.

## Never

- Never use the reference product’s logo, product name, brand name, or exact copy.
- Never reproduce the reference page’s screenshots, browser chrome, layouts, imagery, or distinctive interface content one-for-one.
- Never copy the exact feature order, wording, visual assets, or brand colour treatment from the reference.
- Never include logos, product names, copy, illustrations, or imagery from the reference.
- Never fill the section with generic placeholder cards that fail to show how the user’s own product works.
- Never sacrifice readability by shrinking interface text or controls excessively on mobile.