← Kiosk pages ↑ General Design System

Kiosk — Design System

Component library for the self-order kiosk (1080×1920 portrait, touch-first). Large tap targets (≥ 64px), no hover-only affordances. Atoms, molecules and organisms built on the general tokens.

Extends General Design System · touch-first, ≥ 64px targets

Atoms

smallest primitives · big touch

Big button

Planned

≥ 64px primary CTA · dine-in / takeaway.

tokens: --primary-500, --r-xl

Qty stepper (L)

Planned

Large − value + for menu items.

tokens: --primary-100

Badge

Planned

New / popular / sold-out.

tokens: --success, --error

Icon (L)

Planned

Oversized icons for distance reading.

svg/

Molecules

atoms combined

Category tile

Planned

Image + name big tap tile.

seen in: menu

Item card

Planned

Photo + name + price + add.

seen in: menu

Cart line

Planned

Item + qty + total.

seen in: cart

Modifier row

Planned

Option select · single / multi.

seen in: item detail

Organisms

full sections

Welcome screen

Exists

Attract / start order.

Menu grid

Planned

Category + item grid.

seen in: menu

Cart bar

Planned

Sticky total + checkout CTA.

tokens: --success-400