Kage Design logo kage
elyx.design
elyx.design navigation component

Design analysis

A very restrained header leaves the page identity to the typography and places a single rounded beta action at the upper right.

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/elyx-design/634f2ca9-e930-42fa-918f-46bd7d94fb82-1789563433-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/elyx-design/634f2ca9-e930-42fa-918f-46bd7d94fb82-1789563404568-full.webp
- Component on Kage: https://kage.design/component/elyx-navigation

## Before you start
Ask what the user's product is, who it serves, and what their brand personality and primary action are. Apply the principles below to that product rather than reproducing the reference.

Build a minimal website header: keep the logo or wordmark understated at the left and place one high-priority action at the right. Use a wide, centered content container with generous horizontal breathing room. Use a warm off-white background around `#eeece8`, near-black text `#252525`, and a subtle violet-to-pink accent border or glow on the pill action. Use a compact sans-serif label, medium weight, and a rounded button around 999px radius with roughly 16px vertical and 22px horizontal padding. Keep the header visually quiet so the hero dominates. Make the action keyboard accessible, with a clear hover transition and visible focus ring.

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

More components