dreamscalelabs.com
Design analysis
A sparse white header pairs a compact black wordmark with two right-aligned actions. The generous whitespace keeps the navigation quiet while the blue button provides the only strong control emphasis.
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/dreamscale-labs/1997d92a-7a08-4743-8853-9f94160e0cd8-1792130787-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/dreamscale-labs/1997d92a-7a08-4743-8853-9f94160e0cd8-1792130510959-full.webp - Component on Kage: https://kage.design/component/dreamscale-labs-navigation ## Before you start Ask the user what their product does, who it serves, and what their brand personality and colors are. Apply the following principles to that product rather than reproducing the reference. Build a minimal desktop-first SaaS navigation bar. Use a wide centered content container, a small brand mark or text lockup on the left, and a compact horizontal action group on the right with one low-emphasis text link and one filled primary button. Keep the header mostly white with generous horizontal padding and approximately 72–80px height. Use a clean geometric sans-serif, small 13–14px navigation text, and a stronger 14px button label. Use near-black text (#111315), white background (#ffffff), and a saturated deep blue primary action around #0757ad. Give the button 3–4px radius, modest vertical padding, and a subtle hover darkening; keep the link understated. Align everything to the same container edges and provide a mobile collapse into a menu button. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage