ModerneDesign system

Dark mode explorer

Components

Navigation

Wayfinding components. The active state uses the brand green as a quiet wash, never a heavy fill — green stays meaningful (the cure), not decorative.

Tabs

maps → MUI Tabs / Tab

Segmented control

maps → neo NeoToggleButtonGroup

Global navigation bar

mirrors moderne-ui GlobalNavigationBar

Same structure as the shipped bar — organization selector on the left, search and the action cluster (navigation-menu button + account avatar) on the right, with the soft centered glow behind — restyled with our tokens.

JJ

Left navigation rail

mirrors moderne-ui PR #8378 · maps → neo NeoSideNav / NeoNavigationItem

The product left nav as designed in the prototype — a vertical icon rail: fixed Moderne mark + version badge on top, scrolling icon+label destinations (slim scrollbar, no overflow menu), and a fixed tenant-logo placeholder at the bottom. Below ~700px tall it collapses to icon-only. Same structure, restyled with our tokens.

Comfortable
Compact — icon-only (≤700px tall)

Pagination

maps → MUI Pagination