Design

NextToolbar should feel like part of a modern app, not a debug panel from 2010: a floating surface, soft shadows, moderate radii and one strong brand color used sparingly.

The primary gradient

A lime → aqua gradient is the brand color. It marks "good" and "the thing to look at":

--nt-from: #c6ff5c;
--nt-to:   #5ef5e0;
--nt-primary: linear-gradient(90deg, var(--nt-from), var(--nt-to));

It's used for the 2xx status chip (with a soft glow), the status dot of the minimized circle, cache HIT pills, profiler status pills, timeline bars, the selected request and the logo's diagonal. Text on it is always near-black (#0b0f0c).

Errors stay red and warnings amber, so the gradient never has to mean two things.

Surfaces

Surfaces carry a large soft shadow plus a 1 px top highlight, which is what makes the bar look like it floats.

Shape

Themes

The toolbar ships both themes as CSS custom properties on the Shadow DOM host. Dark is the default; light applies with data-theme="light", or when the OS prefers light and no theme is forced.

The logo always sits on a dark tile, in both themes: the lime end of the gradient disappears on white.

Icons

All icons come from Iconsax, Broken variant.

The package inlines the SVGs of these icons (src/icons.tsx) instead of depending on an icon library. These docs use iconsax-reactjs directly.

The logo

An N whose two verticals are rounded bars and whose diagonal is the glowing primary gradient: the same bar the toolbar draws for a healthy request.

• packages/next-toolbar/logo.svg: standalone mark on a dark circle, for READMEs and npm.
• src/Logo.tsx: the mark inside the toolbar; its verticals use currentColor.

Motion

The bar grows out of the launcher's position (scale from the left), panels rise 6 px as they appear, and the launcher scales up slightly on hover. All motion is disabled with prefers-reduced-motion.