← POS pages ↑ General Design System

POS Terminal — Design System

Component library for the desktop cashier terminal (1024×768, system font, 50px left rail). Atoms, molecules and organisms specific to POS — built on the general tokens.

Extends General Design System · shared CSS: _shared.css · terminal-app.css

Atoms

smallest primitives

CheckItem

Done

Select-modal item · 48/52/56 · single/multi · desc · badge.

components/check-item.html

Button

Planned

Primary / secondary / ghost / danger · 44px target.

tokens: --primary-500, --r-md

Input

Planned

Text, search, with-icon, error · focus ring.

tokens: --border-default, --focus-ring

Badge / Pill

Planned

Status & count badges · KG / StopLimit on cards.

tokens: --success, --error

Numpad key

Planned

Digit / action key for payment & quantity.

tokens: --text-black

Molecules

atoms combined

Product card

Done

Terminal product card · 8 variants · price pill + name + KG/StopLimit/indicators · 186×100.

components/product-card.html

Ingredient card

Done

Modifier modal card · metal-grey fill · centred name · price/stop badges · add/remove/image select · 176×100.

components/ingredient-card.html

Settings card

Done

Device settings card · V1 Expanded (toggle + Test et + chevron + select + chips) · V2 Compact (up/down + toggle) · online/offline status · r10.

components/settings-card.html

Order management card

Done

Wolt delivery-receipt row 941×104 · 4 variants (close / open / open-decline / close-decline) · timer + price pill + Ready · verbatim Wolt/scooter icons.

components/order-card.html

Receipt checklist

Done

420px receipt · line-item list (default / discount / gift rows + dashed dividers) + totals block (Subtotal…Total in #2684FF) · qty badge r6.

components/receipt-checklist.html

Order table row

Planned

Table dot (empty/mine/colleague/overdue) + meta.

tokens: --table-mine, --table-overdue

Quantity stepper

Planned

− value + with KG mode.

seen in: cart / modifiers

Search field

Planned

Input + icon + clear.

tokens: --grey-300

Organisms

full sections

Left rail (50px)

Shared

Fixed navigation rail.

_sidebar.js · _shared.css

Terminal Header / Navbar

Done

Dark secondary shell — 7 navbar + 4 POS category-nav variants.

components/header.html

Sidebars

Done

3 sidebars — POS rail (44) · Drawer (170, dropdown) · Intro page (254). Pixel-perfect.

components/sidebar.html

Alert / Toast

Done

Notification / toast — 4 variants + app example.

components/alert-toast.html

Select modal

Done

Composes CheckItem + Button + Input + header · multi/single × desc × S 500 / M 600 · state matrix (Apply / Save change).

components/select-modal.html

System modal

Done

Composes NbNavShell header + Button · 5 types (delete / lock / fiscal / success / info) × S 500 / M 600 · fiscal stacks buttons.

components/system-modal.html

Support modal

Done

“Texniki dəstək” — header + call line + QR card + system-bar footer · S 600 / M 800 · verbatim phone/scan icons.

components/support-modal.html

Description modal

Done

Single-textarea note · NbNavShell + Cancel/Save · 3 states (empty / writing ring+caret / filled) × S 500 / M 600.

components/description-modal.html

Numpad modal

Done

Generic numpad shell · 3 display modes (value+chip / value / input) + 4×3 numpad + Cancel/CTA · drives count / guest / receipt.

components/numpad-modal.html

Customer modal

Done

Müştərilər · 1138×1007 fully-interactive prototype · list + View (Məlumat/Kampaniyalar/Tarixçə) + Edit + Create + Ünvan flow · 8 customers.

components/customer-modal.html

Payment numpad

Planned

Numpad + amount + method.

seen in: payment flow