Topolo Mobile Experience Rollout

What It Is

This page is the canonical rollout plan for making mobile UI/UX a first-class standard across all Topolo applications.

It exists to turn the shared mobile rules in /internal/platform/design-language into an implementation sequence that can be executed application by application without ambiguity.

How It Works

Use this page after the shared design language has been updated and before starting app-by-app implementation work.

The sequence is:

1. Read /internal/platform/design-language for the normative mobile standard.
2. Use this page to decide rollout order and verification gates.
3. Implement the mobile changes in the target application.
4. Update that application handbook if the app needs a documented exception.
5. Re-run docs validation when the canonical documentation changes.

Core Rule

Every Topolo web application should support a high-quality phone and tablet experience unless a documented platform exception is approved. “Responsive enough” is not sufficient. The target is intentional mobile UI/UX, not compressed desktop UI.

Shared Migration Checklist

Every application should be brought into line using the same checklist:

1. Replace persistent desktop-only chrome with a deliberate mobile shell.
2. Reduce mobile top-bar utilities to the critical minimum.
3. Convert primary content flows to a single-column mobile layout.
4. Replace raw desktop tables with stacked cards, grouped rows, or focused detail views where needed.
5. Move dense filters and secondary controls into sheets or drawers.
6. Ensure primary actions are reachable and thumb-safe on phones.
7. Convert dense modal flows into bottom sheets or full-screen mobile overlays where appropriate.
8. Audit light mode, dark mode, keyboard overlap, safe-area padding, and scroll behavior.
9. Update the relevant application handbook if the app needs a documented mobile exception.

Verification Gate

An application is not considered mobile-aligned until it passes all of the following:

• 390x844, 430x932, and 768x1024 checks
• light and dark mode checks
• authenticated entry flow check when applicable
• dashboard or overview flow check
• list or search flow check
• detail flow check
• create, edit, approve, or save flow check

Rollout Waves

Wave 1: Core Shared Experience

These apps shape the suite-wide standard and should move first:

• Topolo Auth
• Topolo One
• Topolo Admin
• Socialize

Wave 2: Primary Daily-Use Product Surfaces

These apps are next because they are core working surfaces and will pressure-test the shared mobile rules:

• Agent
• Bytes
• CRM
• Forecast
• MDM
• Nexus
• Pay
• Quro
• Roadmapper

Wave 3: Content, Creation, and Communication Surfaces

These apps need stronger task-flow work once the shared shell and form patterns are stable:

• Chat
• Capture
• Social Studio
• Studio
• Showcase
• Nodo

Wave 4: Specialist and Operational Surfaces

These apps should inherit the shared patterns after the broader suite foundation is proven:

• BugFix
• CloudControl

Per-App Delivery Order

Within each application, use the same implementation order:

1. Mobile shell and navigation
2. Dashboard or landing surface
3. Core list and search surfaces
4. Core detail surfaces
5. Core create/edit/action flows
6. Settings and secondary admin surfaces

Shared Implementation Priorities

The first implementation focus across the suite should be:

• mobile shell chrome
• mobile navigation model
• card and list rhythm
• form stacking and sticky actions
• table-to-card transformations
• bottom sheet and overflow patterns

Only after those are stable should teams spend time on app-specific visual polish.

Exceptions

Exceptions should be rare and documented. Acceptable reasons may include:

• a specialist operational surface that is intentionally tablet-first rather than phone-first
• an internal-only surface with a documented limited mobile support contract
• a dense expert workflow that needs a reduced but still coherent mobile read-only mode

Any exception must be added to the relevant application handbook and must not weaken the shared mobile rules for the rest of the suite.

Current Status

As of 2026-04-06:

• the Topolo design language now includes explicit mobile UX standards
• the suite does not yet consistently meet those standards
• app-by-app implementation work still needs to be completed

Interfaces

• mobile standard source: PlatformApplications/TopoloDocs/src/content/internal/platform/design-language.mdx
• rollout plan source: PlatformApplications/TopoloDocs/src/content/internal/platform/mobile-experience-rollout.mdx
• suite registry: PlatformApplications/TopoloDocs/src/content/systems/topolo-platform.json
• application handbooks: PlatformApplications/TopoloDocs/src/content/internal/apps/*.mdx

Data Flow

1. The design language defines the shared mobile standard.
2. This rollout page translates that standard into migration waves and acceptance criteria.
3. Individual application implementation work should inherit both documents.
4. Application handbooks record only justified exceptions or app-specific notes after migration.

Failure Modes

• teams ship one-off responsive fixes without following the shared mobile standard
• applications keep desktop information density on phones and call it mobile support
• rollouts happen out of order and shared shell/navigation patterns diverge
• app-specific exceptions are not documented and become accidental new defaults

Debugging

• start with /internal/platform/design-language to confirm the intended mobile behavior
• use this page to confirm rollout order and acceptance gates
• inspect the target application handbook for approved exceptions
• validate the docs monorepo after changing the canonical mobile standard or rollout sequence

Change Log / Verification

• Added the canonical suite-wide mobile rollout plan on 2026-04-06 after establishing the shared Topolo mobile UX standard in /internal/platform/design-language