Kage Design logo kage
partners.axiom.co
Axiom navigation component

Design analysis

A compact black header anchors the page with the Axiom wordmark, centered product links, and low-friction sign-in and trial actions.

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-1789711529-0.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-navigation

## Before you start
Ask what the user's product is, who it serves, and what brand personality and navigation items it needs. Apply the principles below to that product rather than reproducing this reference.

Build a compact, dark global navigation bar. Keep the brand mark at the far left, a restrained horizontal link group centered or slightly right of center, and account/trial actions at the far right. Use a near-black background (#080909), warm white text (#f2f2ef), muted gray secondary links (#858585), and one orange accent action (#ed713e). Use a 12–14px utility type scale, 1px low-contrast bottom border, 6px button radius, and 24–28px horizontal padding. Maintain generous clickable hit areas and collapse links into a mobile menu. Make the primary action visually clear without making the header tall.

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

More components