← POS Design System

Terminal Sidebars

Pixel-by-pixel from CloposDS.jsx (terminal-sidebars-spec). 3 sidebars: POSSidebar (44px icon rail) · DrawerSidebar (170px, dropdown) · IntroPageSidebar (254px, light). Own dark token family; icons verbatim.

POSSidebar · 44px fixed rail

item 44×44 · icon 20 (back #fff · rest #A0A0B4, selected only changes bg) · divider 32×1 · 8px separator

DrawerSidebar · 170px · icon + label · dropdown

row h52 · px16 · gap12 · selected fw600 #fff · unselected #A0A0B4 · sub-item indent 48 · chevron rotate

IntroPageSidebar · 254px · light

item h56 · px16 · r6 · selected #DFEFFF/#2B7DD3 fw600 · unselected #1D1D1D fw500 · 16px