← Manager pages ↑ General Design System

Manager App — Design System

Component library for the owner mobile app (390×844, Inter font). React source compiled to plain JS so screens render over file://. Atoms, molecules and organisms built on the general tokens.

Extends General Design System · React: components.jsx → compiled .js

Atoms

smallest primitives

Button

Planned

Primary / ghost · thumb-reachable 44px.

tokens: --manager-primary

Input

Planned

Text, search · mobile keyboard friendly.

tokens: --bg-light

Icon

Shared

Icon set from components.jsx.

components.jsx

Stat value

Planned

Big number + delta arrow.

tokens: --success, --error

Molecules

atoms combined

Stat tile

Planned

Dashboard KPI card · label + value + trend.

seen in: dashboard

Gradient header

Planned

Hero band using --mgr-gradient.

tokens: --mgr-gradient

Product list row

Planned

Thumb + name + price + chevron.

seen in: products

Chart card

Planned

Stats chart container.

seen in: stats

Organisms

full sections

Bottom nav

Planned

Mobile tab bar · 4–5 destinations.

tokens: --surface, --primary-500

Back Office sidebar

Planned

Dark navy sidebar + branch selector.

tokens: --sidebar-bg, --sidebar-selected

Dashboard

Planned

Stat tiles + chart + quick actions.

seen in: dashboard

Design canvas

Shared

Figma-ish board of screens.

design-canvas.jsx