Kage Design logo kage
chime.com
chime.com navigation component

Design analysis

A slim white header creates a clear entry point with a menu, brand mark, account-opening CTA, and login action. Its restrained height keeps attention on the dark green hero below.

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/chime-com/8a783617-6b1d-44ef-a500-84b69ae63fa0-1789146540-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/chime-com/8a783617-6b1d-44ef-a500-84b69ae63fa0-1789146449552-full.webp
- Component on Kage: https://kage.design/component/chime-navigation

## Before you start
Ask what the user's product is, who it serves, and what brand personality, colors, and navigation priorities it has. Then apply the principles below to that product rather than reproducing this reference.

Build a compact desktop-first navigation bar for a modern financial or trust-sensitive product. Use a white background, a left-aligned menu trigger and wordmark, and right-aligned primary account/action button plus a secondary login link with a small icon. Keep the header around 44–52px tall, with generous horizontal padding and strong vertical centering. Use a clean geometric sans-serif: medium-weight brand text, 12–14px utility labels, and a clearly emphasized filled CTA. Use an accessible green accent around #16B866, near-black text around #12352B, and subtle or no border. Use a 6–8px button radius and a compact hamburger icon. On mobile, collapse secondary navigation while preserving the primary CTA and login access.

Never: copy the reference's logo, product name, wording, icons, imagery, or exact visual identity.

More components