[ODE] Responsive Design Foundation

[IamLRBA]

Component

• formulus (React Native mobile app)
• formulus-formplayer (React web app)
• synkronus (Go backend server)
• synkronus-cli (Command-line utility)
• Documentation
• synkronus-portal

Goal

Before we can start redesigning the screens of the Formulus app, we need to establish a consistent, maintainable frontend across all ODE user-facing applications (synkronus-portal, formulus-formplayer, formulus) by aligning on design tokens, shared components, and implementation patterns where feasible.

Problem Statement

ODE has multiple frontends that evolved separately:

• synkronus-portal has been designed and set as an example of an ODE sustainable project uses previously defined rules; @ode/components (react-web) and @ode/tokens for buttons, inputs, badges, and global styling.
• formulus-formplayer uses Material-UI (MUI) themed with @ode/tokens; it does not use @ode/components.
• formulus (React Native) uses a local Button and hand-maintained colors inspired by tokens; it does not depend on @ode/components or @ode/tokens.

As a result, buttons, inputs, and other UI elements look and behave differently across apps, design changes require updates in several places, and there is no single source of truth for “ODE look and feel” across the ecosystem yet this ecosystem source of truth was already established.

Proposed Solution

• Design tokens: All frontends that can consume tokens should use @ode/tokens as the single source (colors, spacing, typography, borders, touch targets, etc.). React Native may need a token consumer strategy (e.g. build output or a small adapter).
• Shared components: Where platform and dependency constraints allow, prefer @ode/components (react-web or react-native) so that primitives (Button, Input, Badge, Card, etc.) are consistent and token-driven.
• Documentation and governance: Document which app uses which stack (portal = ODE components + tokens; formplayer = MUI + tokens; formulus = RN components + ?), and define a path toward greater alignment (e.g. sub-issues per app or per component type).

This parent issue tracks the overall frontend alignment initiative; concrete work (e.g. adopting tokens/components in formulus and formulus-formplayer) is tracked in child issues.

Alternatives Considered

• Replace MUI in formulus-formplayer with ODE components: Possible but larger refactor; can be a separate sub-issue if desired.

Success Criteria

• All web frontends (portal, formplayer) use @ode/tokens as the source of design values.
• No regression in functionality or accessibility in any app.