Norbielink has one navigation surface: a fixed 220px sidebar that is white in light mode. There is no collapsed rail and no gradient-filled pill. Both rest and active items keep a white fill — what changes is the border, which becomes the brand gradient, and the active item adds a soft purple glow.
Sidebar
Logo, account button, divider, scrolling nav, then a pinned footer. The whole
column is 220px wide with a 1px #F3F4F6 right border.
Nav item states
Three states, not four — there is no disabled nav item. Hover and active share the same gradient border; only the glow, the icon colour and the label colour separate them.
border: 1px transparent · icon #9CA3AF · label #6B7280gradient border · no glow · colours unchangedgradient border + glow · icon #A614C3 · label #2D3653Specs
| Part | Value |
|---|---|
| Column | width 220px · min-height 100vh · #fff · right border 1px #F3F4F6 |
| Logo block | padding 20px 16px 12px · mark height 28px |
| Account button | padding 8px · radius 12px · gap 12px · hover fill #F9FAFB |
| Avatar | 36×36px circle · 2.5px solid #73C9B7 · fill rgba(115,201,183,.10) · initials 13px / 600 in a teal gradient |
| Account name | 13px / 700 · #2D3653; sub-line 11px · #9CA3AF |
| Divider | margin 0 16px 8px · 1px #F3F4F6 |
| Nav list | padding 0 8px · 2px between items · 15 items, fixed order |
| Nav item | padding 7px 12px · radius 12px · gap 12px · 13px / 500 |
| Nav icon | 18×18px (16×16 for Appetite Assistant) · #9CA3AF, #A614C3 when active |
| PRO badge | 10px / 600 · padding 1px 6px · radius 9999px · 1px #74C3B7 text #74C3B7 |
| Chevron | 14×14px · #9CA3AF · rotates 180° when the group is open |
| Sub-item | padding-left 32px group · item padding 4px 8px · radius 6px · 12px / 500; active 600 #A614C3 on rgba(168,85,247,.08), hover #F3F4F6 |
| Norbie button | padding 10px 12px · radius 12px · 1.5px #E5E7EB · avatar 32×32 · title 12px / 600, sub 10px |
| Footer toggles | Two — Dark Mode and Legacy View, identical. Track 36×20px radius 9999px, #D1D5DB off / #E8622A on · thumb 16×16 white at left 2px → 19px · label 13px / 400, lighter than a nav item |
The gradient border
Hover and active do not fill the item. They paint the 1px border with the brand
gradient by layering a padding-box fill over a border-box gradient, and the active
item adds 0 0 8px rgba(166,20,195,.4). This is the only place in the product that uses the
treatment.
| There is no collapsed sidebar. The column is always 220px. The collapse controls elsewhere in the product belong to detail panels, not to navigation. |
| The sidebar is the only navigation surface. A 52px app bar does sit above the content, but it holds search and the partner lockup — never nav — and each page draws its own 71px title header below that; both are on App Bars. |
The logo, the Norbie face and the bottom wash are image assets, not drawn in CSS — norbielink-logo.png (swapped for -dark in dark mode), norbieface.png and sidebar-bg.png. Icons are lucide outlines at stroke-width 2, not the Material set used by this documentation site. |
In dark mode the column becomes #191D35 with a rgba(255,255,255,.12) right border, and the item fill becomes linear-gradient(to bottom, #191D35 0%, #582A75 48%, #9D37BC 100%) — the only place the product fills a nav item. |