## 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/peras/2c988a48-c598-4fdf-86c9-23be8072f64d-1792821845-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/peras/2c988a48-c598-4fdf-86c9-23be8072f64d-1792821751917-full.webp
- Component on Kage: https://kage.design/component/peras-navigation

## Before you start
Ask what the user's product is, who it serves, and what brand direction they want. Apply the following principles to that product rather than reproducing the reference.

Build a compact dark navigation bar spanning the viewport. Keep the layout centered in a constrained content width, with a small brand mark and breadcrumb-like context on the left and one outlined utility/action button on the right. Use a near-black background (#080b0a), off-white text (#f1f3ef), muted gray secondary text (#8d958e), and a restrained lime accent (#b7ff3c). Use 14–16px text, medium weight, generous horizontal padding, and a subtle 1px border or low-contrast separation. Give the action button a small radius around 8px and a clear hover state.

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