## 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-5.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-2

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

## Build this section
Create a responsive feature-introduction section for a modern software website. The section should feel spacious, optimistic, friendly, and editorial rather than like a conventional dashboard or card grid.

### Layout and alignment
- Use a full-width section with a centered content column, approximately 560–680px wide on desktop.
- Center-align the headline, supporting paragraph, and one prominent text link.
- Give the upper content generous vertical breathing room: approximately 72–104px top padding and 112–150px bottom padding on desktop; reduce this proportionally on mobile.
- Place the headline first, followed by a short two-line maximum description and then the link with a small right-pointing arrow.
- Finish the section with a full-width decorative transition: a thin, repeating wave or scalloped rule spanning edge to edge.
- Below the rule, begin the next pale-tinted feature area. Show three small, evenly spaced line-art feature markers or icons centered in a row. Keep them secondary and abstract; they should suggest a feature group without becoming illustrations.
- On narrow screens, keep the content centered, constrain text width with side padding of 24px, and allow the lower icon row to remain evenly distributed without crowding.

### Typography hierarchy
- Use a bold, modern sans-serif for the headline, around 40–44px desktop, 32–36px mobile, with tight line-height around 1.05–1.12 and slightly tightened letter spacing.
- Make the headline the strongest visual element and use a saturated blue or the product’s primary accent colour.
- Set the supporting copy at approximately 17–18px desktop and 16px mobile, with 1.45–1.6 line-height, medium gray colour, and a readable measure.
- Style the link as a semibold 17–18px text action in the same accent colour. Avoid a filled button; the interaction should feel lightweight and editorial.
- Keep the lower icons visually quieter than the headline, using a consistent 2px stroke and the accent colour.

### Colour
- Use a warm, near-white background for the main content, approximately `#FFFFFF` or `#FCFCFA`.
- Use a vivid indigo-blue accent, approximately `#3847D6` or a brand-appropriate equivalent, for the headline, link, wave rule, and icons.
- Use a neutral gray for body copy, approximately `#6F7078`.
- Use a soft cream or warm pastel background for the next section, approximately `#FFFDF0` or a colour derived from the product brand.
- Ensure text and interactive elements meet accessible contrast requirements.

### Borders, radius, and decoration
- Do not use cards, heavy borders, shadows, or container outlines in the main intro.
- Make the transition rule a delicate repeating sinusoidal/wavy line, roughly 2px thick, with a small repeated wavelength. It should feel hand-drawn or playful while remaining crisp and restrained.
- The lower feature markers may be simple outlined symbols or abstract line icons. Use rounded stroke caps and joins; avoid filled pictograms.
- Do not add unnecessary corner radii because the section relies on whitespace and the full-width divider rather than boxed surfaces.

### Interaction and responsive behaviour
- The text link should have a clear hover and keyboard-focus state: slightly darken or shift the accent colour, optionally move the arrow 2–4px to the right, and show a visible focus ring.
- Preserve the centered hierarchy at all breakpoints. The headline may wrap naturally, but never allow the text column to become too wide.
- Keep the wave divider aligned to the viewport edges, not the inner content column.
- If the lower feature markers are interactive, provide subtle hover emphasis and accessible labels; otherwise treat them as decorative with appropriate hiding from assistive technology.
- Respect reduced-motion preferences and avoid unnecessary animation.

## Never
- Never reuse logos, product names, branded copy, exact wording, or proprietary symbols from the reference.
- Never copy the reference’s exact icons, illustrations, imagery, wave pattern dimensions, or visual assets.
- Never invent a layout that depends on the original product’s identity; adapt the hierarchy and mood to the user’s product and brand.
- Never use generic stock imagery, decorative photos, gradients, heavy shadows, or dense dashboard-style cards unless the user’s brand explicitly calls for them.
- Never sacrifice accessibility, responsive behaviour, semantic heading structure, or visible keyboard focus states for visual similarity.