## 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/krea-ai/7686b463-3bc3-4358-9bf2-528bb473cb81-1789146900-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/krea-ai/7686b463-3bc3-4358-9bf2-528bb473cb81-1789146856874-full.webp
- Component on Kage: https://kage.design/component/krea-navigation

### Before you start
Ask what the user's product is, who uses it, and what its brand personality and navigation priorities are. Then apply the principles below to create an original persistent workspace sidebar for that product.

- Use a fixed desktop sidebar about 180–240px wide, with the main application surface occupying the remaining width.
- Divide navigation into clearly named groups with generous group spacing: primary workspace destinations, tools, business/account links, and authentication.
- Use a near-black background such as `#050505`, subtle separators around `#1f1f1f`, muted text around `#9a9a9a`, and bright text around `#f5f5f5`.
- Make the active item a softly rounded capsule using `#292929` or a restrained brand tint; include a small icon and short label aligned to a consistent 12–16px grid.
- Keep labels compact, use 12–13px UI typography, and give each row at least 30px of hit area.
- Place the sign-in or primary account action in a visually obvious full-width rounded button near the lower end of the visible navigation.
- On smaller screens, collapse to an icon rail or drawer while preserving the active state and keyboard accessibility.

**Never**
- Never copy logos, product names, labels, copy, illustrations, or imagery from the reference.
- Never make every navigation item equally loud.
- Never hide the active state, keyboard focus, or a mobile fallback.