Multi-platform

Platforms

Foundational

The TpGroup design system targets every surface our products appear on: Web, native Mobile (iOS, Android), native Desktop (macOS, Windows), Print, and Multimedia. Tokens and React Native–universal components give each product a single codebase that renders correctly on every platform.

Platforms in scope

Status reflects src/app/components/platforms/status.json, last updated . Edit that file to change a platform’s status without touching code.

Web

Production
Rendering
React Native Web
Build path
Vite + RNW adapter (current) · Metro → web (Phase 7+)

This showcase is the reference web implementation.

iOS

Roadmap
Rendering
React Native (Expo or bare)
Build path
Metro → iOS archive

Token outputs ready; Expo pilot in Phase 7.

Android

Roadmap
Rendering
React Native (Expo or bare)
Build path
Metro → Android APK / AAB

Token outputs ready; Expo pilot in Phase 7.

macOS

Roadmap
Rendering
React Native macOS
Build path
Metro → .app bundle

Depends on Phase 8 native build infrastructure.

Windows

Roadmap
Rendering
React Native Windows
Build path
Metro → MSIX / WinUI 3

Depends on Phase 8 native build infrastructure.

Print

Scaffolded
Rendering
InDesign / Illustrator via brand kit
Build path
Style Dictionary → CMYK swatches + ASE

Brand ink values captured; ASE export pending Phase 8.

Multimedia

Scaffolded
Rendering
After Effects / Premiere / Lottie
Build path
Style Dictionary → motion JSON + AE presets

Motion tokens defined; AE/Premiere presets pending.

Principles across platforms

  • Tokens are platform-agnostic. Every surface draws from the same source of truth (see Token Pipeline).
  • One product, one codebase. Each TpGroup product ships web, mobile, and desktop from a single React Native codebase.
  • Platform-respectful, not platform-identical. Navigation, haptics, density and typography follow each platform’s native conventions.
  • Accessibility is per-platform. WCAG is the baseline for web; VoiceOver, TalkBack and Narrator parity is required for native apps.
  • Print and multimedia are first-class. Not an afterthought — brand tokens include CMYK/Pantone and motion specs.