← POS Design System

Terminal Header / Navbar

Pixel-by-pixel from CloposDS.jsx (terminal-header-spec). Atoms → molecule → 7 navbar variants + 4 POS category-nav variants. The navbar uses its own dark token family (NB_SEC*); the POS category nav is light. Concept maps to our general atoms — tab ≈ Tabs/Segment, search ≈ Input, dev badge ≈ Badge, buttons ≈ Button.

Atoms · shared navbar primitives

NbBackBtn · NbIconBtn

32×32 · r:4 · default + hover

NbNavTab

h:32 · px:14 · r:4 · 13/500 · 4 states

NbNewOrderBtn · NbDevBadge · NbOrderIconBox · NbDivider

CTA · dev label · icon badge · separator

Molecule · assembled from atoms

NbActionStrip

history · New order · [receipt] · menu · divider · dev test · notifications · rss_feed

Navbar variants · 7 organisms

POS category nav · atoms · light

NbPosIconBtn · NbPorsiPill · NbCatPill

32×32 r:7 (default / selected) · pill h:32 r:7

POS category nav · variants · 4 organisms