Mobtranslate Design System
Foundations, components and task patterns for MobTranslate’s React web interface.
Architecture
Rendered CSS roles, component specifications and explicit behavior contracts.
Layer 1: Primitives
Raw color palettes, spacing scale, type scale, shadows. No semantic meaning.
Layer 2: Semantic
Role-based CSS values: primary, destructive, background and foreground. Pair text with its intended surface.
Component specifications
Sizes, states and behavior in the shared wrappers and stylesheet. Legacy JavaScript presets still need reconciliation with rendered CSS.
Getting Started
Use the private workspace package and its actual stylesheets.
@import "tailwindcss";
@import "@mobtranslate/ui/src/tokens/tokens.css";
@import "@mobtranslate/ui/src/components/components.css";Coverage and verification
The foundations and developer examples include live controls and checked source. Component depth, task patterns and the broader accessibility audit are still being expanded. Topic counts describe documentation routes, not conformance certification.