## 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/procboss/3737396f-2984-4e55-9600-739ab09d7da3-1791525903-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/procboss/3737396f-2984-4e55-9600-739ab09d7da3-1791525801598-full.webp
- Component on Kage: https://kage.design/component/procboss-navigation

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

Build a compact desktop-first navigation bar that floats as a centered rounded pill over the hero background. Use a small brand mark and wordmark at left, a short set of product-section links in the middle, low-emphasis utility controls, and a prominent rounded primary CTA at right. Keep the bar visually light: white or warm-white surface, 1–2px dark border, subtle shadow, and a large radius around 24px. Use a geometric sans-serif, 11–13px utility text, tight horizontal spacing, and consistent vertical centering. On small screens collapse links into a menu while preserving the product mark and CTA. Add hover/focus states with a slight tint and clear keyboard outline.

Use approximate colours such as #FFFDF5, #15151D, #A8E5C1, and #43E082; keep contrast accessible. Never copy the reference's logos, product names, copy, illustrations or imagery.