All frontend pages use max-width: 800px. padding: 56px 32px 80px. More breathing room than backend — user-first not data-first.

Frontend uses cards as primary content containers — not table rows. Cards have more padding, softer borders. Each card is one complete unit of information.

All interactive elements on frontend pages must be at least 56px tall. Buttons, links, and tappable cards all meet this minimum. Backend can use smaller targets.

All new frontend elements go to frontend/sandbox/ first. Test in sandbox, verify, then deploy to production. Every sandbox element gets a code. Sandbox index always updated.

All test pages live at frontend/sandbox/. Every new test page added to sandbox/index.html automatically. New elements built here before going live anywhere.

Frontend uses identical top bar and bottom tabs as backend — same 44px height, same breadcrumb pattern, same .here class. Only max-width and padding differ.

When any new frontend section or page is added, update frontend/index.html with a new button and nav link. Automatic — no prompt needed.