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

Design analysis

A compact dark header keeps the wordmark, grouped product links, sign-in action, and primary CTA in a single low-contrast row.

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/resend-com/a5fe426a-0829-45e6-9969-dd938a799528-1789141640-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/resend-com/a5fe426a-0829-45e6-9969-dd938a799528-1789137406155-full.webp
- Component on Kage: https://kage.design/component/resend-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand voice and visual identity are. Apply the following principles to that product rather than reproducing the reference.

Build a full-width dark SaaS navigation bar. Keep the layout centered in a constrained max-width container with the brand at left, a small set of grouped navigation links in the middle, and authentication plus one high-contrast primary action at right. Use a near-black background (#050505), muted gray text (#8d8d8d), white active/hover text, subtle separators or chevrons, 12–13px typography, 16–24px horizontal padding, and a compact 36–40px height. Give the primary action a soft dark-gray fill, 8px radius, and clear hover/keyboard states. Collapse the middle links into a mobile menu while keeping the CTA visible when possible.

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

More components