Kage Design logo kage
partners.axiom.co
Axiom feature grid component

Design analysis

The section pairs a focused value proposition with a large table-like product visual to demonstrate searchable, inspectable data at scale.

Prompt preview
## 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/axiom/c8c1ccab-fdeb-4f51-a10a-de94b7cc1af3-1789711531-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/axiom/c8c1ccab-fdeb-4f51-a10a-de94b7cc1af3-1789711409328-full.webp
- Component on Kage: https://kage.design/component/axiom-feature-grid-2

## Before you start
Ask what data workflow the user's product enables and what information the visual should make immediately understandable. Use those answers to create a new demonstration.

Create a dark feature band with a concise heading, two short supporting paragraphs, and a small accent text link in the upper portion. Under it, place a wide product mockup resembling a data browser: toolbar, dataset rows, column labels, subtle alternating surfaces, and an overlapping detail inspector. Use monospace text for fields and values, 1px borders in #222323, near-black surfaces (#0c0d0d), white-gray primary text, and orange only for meaningful states. Give the visual enough height to read as a product demonstration, while keeping copy and UI aligned to the same 12-column rail. Make the table horizontally scrollable on mobile and preserve readable contrast.

Never: copy logos, product names, copy, illustrations, or imagery from the reference.

More components