## 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/replicate-com/18021eac-ea1d-469d-8210-9b10eacb77c7-1789073923-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/replicate-com/18021eac-ea1d-469d-8210-9b10eacb77c7-1789073887-full.webp
- Component on Kage: https://kage.design/component/replicate-cta-2

## Before you start
Ask the user what their product is, who it serves, and what brand personality, colours, typography, and CTA goal they want. Then apply the principles below to create an original version for their product rather than reproducing the reference.

## Build this section
Create a responsive dark feature/CTA section that communicates a technically complex product through two adjacent feature panels. The section should feel like an editorial product story: precise, sparse, slightly experimental, and confident.

### Layout and alignment
- Use a near-black charcoal section background, approximately `#202020`, with a wide centered content container around 960–1080px on desktop.
- Build a two-column layout with equal or near-equal columns and a narrow gap. On mobile, stack the columns vertically while preserving the visual order.
- Align all panel content to one shared vertical grid. Give each panel a thin top rule and a thin vertical outer rule in a muted warm red.
- Let the visual area occupy the upper portion of each panel, with the heading and body copy anchored below it. Keep the lower text blocks aligned across columns where practical.
- Use generous internal padding, approximately 18–24px horizontally and 28–40px vertically. Preserve large areas of empty dark space instead of filling every region.
- Add a restrained decorative system around the section: fine vertical guide lines, cropped at the viewport or container edge, and a warm red-to-coral gradient accent at one side. These elements should support the grid without competing with the content.

### Visual treatment
- For the visual areas, use original CSS/SVG data-like diagrams rather than external imagery: a thin-line modular block diagram in one panel and a simple orange-red line chart with subdued axes in the other.
- Keep visual strokes delicate, roughly 1px, using muted reds such as `#8f2b22` and brighter accents such as `#d7351d`.
- Use subtle glow or translucent fills sparingly in selected chart/diagram cells to create depth.
- Ensure all decorative graphics are responsive, clipped cleanly, and have accessible labels or are marked decorative when appropriate.

### Typography
- Use a modern grotesk or geometric sans-serif with a slightly distinctive, editorial feel.
- Set panel headings in a bold display size around 28–34px desktop, with tight line-height around 1.05–1.15. Use the brand’s warm accent colour, approximately `#d83a20`.
- Set body copy around 17–19px with 1.5–1.65 line-height in a soft white, approximately `#f1efed`. Limit the text width so paragraphs remain easy to scan.
- Keep chart labels and diagram annotations small, around 10–12px, in desaturated grey such as `#8f8b88`.
- Use sentence case and deliberate line breaks only when they improve the composition; do not force awkward wrapping on smaller screens.

### Colour, borders, and shape
- Main background: `#202020` or a comparable deep charcoal.
- Primary text: `#f1efed`; secondary labels: `#96918e`.
- Accent: burnt orange-red around `#d83a20`, with darker linework around `#7d2922`.
- Use flat surfaces and hairline borders. Avoid cards with obvious shadows, glossy gradients, or excessive rounded corners.
- Keep corners square or use a very small radius, no more than 2–4px, so the section feels infrastructural and precise.

### Interaction and responsive behaviour
- If the feature panels are links or CTAs, make the entire panel or a clearly indicated action keyboard accessible. On hover and focus, brighten the relevant rule, chart stroke, or accent text rather than adding a large animation.
- Use a quick, restrained transition around 150–220ms. Respect reduced-motion preferences.
- On narrow screens, reduce heading size to roughly 24–28px, stack the panels, keep the chart legible, and simplify or hide peripheral guide lines if they cause clutter.
- Maintain strong contrast and visible focus states.

### Content guidance
- Write short, product-specific headings that name a meaningful benefit or capability.
- Use one compact paragraph per panel, ideally 2–4 lines on desktop, explaining why the capability matters.
- If a CTA is needed, place a small text link or compact button beneath the copy using the same accent colour and a subtle arrow or underline treatment.

## Never
- Never copy the reference’s logos, product names, brand marks, exact copy, or distinctive wording.
- Never reuse its illustrations, chart data, diagrams, imagery, or page-specific decorative assets; generate new abstract visuals for the user’s product.
- Never make the section a pixel-for-pixel recreation or preserve the reference’s exact proportions and content hierarchy when they do not suit the user’s brand.
- Never use placeholder lorem ipsum, inaccessible low-contrast text, or decorative graphics that obscure the message.