## 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/neopress/126c1916-850c-4473-b9b4-49923d5d31e2-1789365757-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/neopress/126c1916-850c-4473-b9b4-49923d5d31e2-1789365678746-full.webp
- Component on Kage: https://kage.design/component/neopress-feature-grid-4

## Before you start
Ask which operational tools the user's product bundles together and what level of technical detail users need. Then design an original tools overview that supports scanning and deeper review.

### Design language
- Center a two-line editorial heading and short explanatory copy above a wide feature matrix. Use a large lead panel followed by two-column code/example cards and a compact multi-column utility grid.
- Give each tool a clear bold label, one-sentence explanation, and where useful a lightweight code block with syntax-like monospace text; never let code become the only explanation.
- Use off-white (`#faf9f5`), white panels (`#ffffff`), subtle patterned or hatched separators only sparingly, near-black text (`#181817`), gray secondary text (`#77746e`), and coral highlights (`#d87658`).
- Use 12–14px sans-serif body text, 11–12px monospace code, 1px borders (`#e3e0d8`), and 2px corners. Maintain consistent card padding and alignment across the matrix.
- Make cards responsive, allow code to scroll horizontally, and expose expandable details if the tool list is long.

### Never
- Never reuse logos, product names, copy, illustrations, or imagery from the reference.
- Never show executable-looking code without context, overload users with tiny text, or imply unsupported integrations.