Design Ethos
Metronic Parity

Metronic Parity

Metronic v9.4.2 is the structural foundation for Ledger UI. All 10 demo layouts are implemented as 8 MetronicLayout variants.

Parity Status: Complete

All layout variants implemented and validated:

DemoVariantStatus
Layout 1sidebarComplete
Layout 2horizontalComplete
Layout 3mini-sidebarComplete
Layout 4card-sidebarComplete
Layout 5content-sidebarComplete
Layout 6card-sidebar (narrow)Complete
Layout 7top-onlyComplete
Layout 8card-sidebar (wide)Complete
Layout 9mega-menuComplete
Layout 10dark-sidebarComplete

Parity Priorities

  1. Layout structure and spacing — sidebar widths, header heights, content margins
  2. Navigation systems — sidebar menus, mega menus, horizontal navbars, mobile drawers
  3. Surface hierarchy — header bands, card containers, background colors, borders
  4. Component density and typography — font sizes, padding, line heights

Implementation Approach

Each layout variant is implemented as a self-contained render path within MetronicLayout:

  1. Inline CSS — all styles are React inline styles (no Tailwind/CSS modules) for self-containment
  2. METRONIC color tokens — exact hex values extracted from Metronic globals.css
  3. Subcomponent architecture — MetronicHeader, MetronicSidebar, MetronicNavbar, etc.
  4. Prop-driven variants — single variant prop selects the entire layout structure

Validation

  • Gallery app with runtime variant switcher for all 8 layouts
  • Storybook with 13 MetronicLayout stories
  • Parity reference app (standalone Tailwind Layout-5) for comparison
  • 210KB CJS / 186KB ESM bundle for the entire UI package
InspirationDesign Principles