What Is a Mobile Design System?
A design system is a collection of reusable components, design tokens, and guidelines that ensure visual and behavioral consistency across an application. Without one, mobile apps accumulate visual debt: five slightly different button styles, three shades of "primary blue," inconsistent spacing, and navigation patterns that change between screens. This happens naturally as teams grow and features are added.
A well-maintained design system eliminates this drift and makes development faster, not slower.
The Three Layers
1. Design Tokens
Design tokens are the atomic building blocks of your visual language. They are named values representing every visual decision:
Color tokens: primary, primaryContainer, onPrimary, onPrimaryContainer, surface, surfaceVariant, onSurface, error, warning, success, info, background, outline, shadow.
Spacing tokens: xs (4dp), sm (8dp), md (16dp), lg (24dp), xl (32dp). Consistent spacing creates rhythm. Using arbitrary values like 13dp or 17dp creates visual noise that users perceive subconsciously.
Typography tokens: displayLarge through labelSmall, each with font family, size, weight, and line height defined.
Shape tokens: cornerRadius from none (0) through full (999dp) in consistent steps.
Tokens should be platform-agnostic at the definition level. Define them in JSON, YAML, or Figma variables and generate platform-specific code automatically.
2. Components
Components are reusable UI elements built from tokens. Each component includes variants (primary, secondary, destructive), sizes (small, medium, large), states (default, pressed, disabled, loading, focused), content options (label only, icon plus label, icon only), behavior specifications, and accessibility requirements (minimum touch target, label, role).
Essential mobile components for a minimum viable design system: Button, Text field, Card, List item, Navigation bar, Tab bar, Bottom sheet, Dialog/Alert, Badge/Chip/Tag, Avatar, Loading indicator, Toggle/Switch, and Snackbar/Toast.
3. Patterns and Guidelines
Beyond individual components, document how they combine to create screens: layout patterns (list, detail, form, dashboard), navigation patterns, error handling standards, content guidelines (tone, terminology, capitalization, date formatting), and interaction patterns (standard gestures, animations, transitions).
Token-Driven Theming
Multi-Theme Support
With tokens, supporting multiple themes becomes a matter of swapping values. Light theme maps background to #FFFFFF and text to #1C1C1E. Dark theme reverses them. High contrast maps to #000000 and #FFFFFF. Components reference token names, not values. When the theme changes, everything updates automatically.
Platform-Specific Generation
Tools like Style Dictionary, Figma Tokens, or Supernova convert your definitions into platform-native code. iOS gets a Swift struct with UIColor and SwiftUI Color values. Android gets a Kotlin object with Compose Color or XML resources. React Native gets a TypeScript theme object. Flutter gets ThemeData with ColorScheme and TextTheme.
Component Architecture
Isolation: Each component is self-contained. It receives data through props or parameters and communicates back through callbacks. No component should reach into another's internals.
Composition over configuration: Instead of one mega-component with dozens of parameters, build small composable pieces. A "user card" is not one component with 15 props. It is a Card containing an Avatar, a Text, and a Button, each independently reusable.
Catalog app: Build a catalog displaying every component in every variant and state. This serves as documentation for designers, a testing surface for visual regression, and a playground for experimentation. Use Storybook for React Native or dedicated SwiftUI/Compose preview catalogs.
Maintenance
Versioning: Semantic versioning where breaking component changes are major versions and new components are minor versions.
Contribution process: Identify need, check existing components, design with all variants and accessibility, review with the team, implement on all platforms, document in the catalog.
Auditing: Periodically scan for custom colors instead of tokens, one-off components that belong in the system, and components drifting from spec. Automated linting can catch many violations.