Patterns
How screens are put together
Components combined the way every app uses them. The placeholder logo follows the brand colour in Conditions.
Header & footer
Logo left (org name beside it from sm), avatar pill right. Footer: app name, version, and 'Powered by acopone.com'.
AacoponeAcme Traders
Branches
Where your business runs
Your app· v0.4.0
Powered byacopone.com
Phone layout
Header on top; the dock (tabs and the main action) floats just above the bottom tab bar, within thumb reach. From md the tab bar moves to the top; from lg the dock becomes inline toolbars.
Aacopone
Orders
#1040
#1041
#1042
#1043
#1044
#1045
#1046
#1047
#1048
Sign in
Every app signs in through auth.acopone.com; Clerk's screens are themed with these tokens.
Aacopone
Sign in
One Acopone account for every app.
Signs you in through auth.acopone.com
Loading, error, empty
Loading
You're offline
Orders save on this device and send when you're back.
Nothing yet
Short empty: a line and one action.
Stress tests
Content that breaks layouts: long names, large amounts, Nepali, narrow spaces.
Long organization name in the header
AacoponeShree Pashupati Himalayan Organic Traders & Suppliers Pvt. Ltd.
Big numbers
Rs 12,34,56,789.00
Mixed scripts
Order for Ram तरकारी सहित · 2 items · २ वटा
Narrow container (14rem)
Orders waiting for approval
Oldest first, grouped by branch