Platform

Android

Roadmap

Android clients share the React Native codebase with iOS, web, and desktop. Tokens map cleanly to Material 3 conventions: Roboto as the default face, dp-based spacing, elevation in dp, ripple effects on press, and Adaptive Layouts for foldables and tablets.

Android-specific mapping

Design-system concern	Android rendering
Typography	Roboto / Roboto Flex; scale density adapts to system font-size preference.
Color	sRGB tokens with Material You dynamic-color opt-in for OS theme harmonization.
Density units	Spacing tokens map to dp; text to sp.
Elevation	Token elevation 1–4 maps to Material elevation (1dp, 3dp, 6dp, 12dp) with matching tonal surface tints.
Feedback	Ripple on Pressable; Haptics.Soft/Medium via expo-haptics on impactful actions.
Navigation	React Navigation mapped to Navigation component; bottom nav / nav drawer follow Material 3 guidance.
Accessibility	TalkBack; contentDescription, accessibilityState, and touch targets ≥48dp.

Token consumption

Android tokens are exported as colors.xml, dimens.xml, and a Jetpack Compose Kotlin object so native Kotlin modules share the same ink with RN screens.

// Tokens.kt — generated by Style Dictionary
package com.tpgroup.designsystem
import androidx.compose.ui.graphics.Color

object TpTokens {
  val color_navy_900  = Color(0xFF194A8D)
  val color_state_success = Color(0xFF10B981)
  // ...
}

@Composable
fun Badge(text: String) {
  Surface(color = TpTokens.color_state_success, shape = RoundedCornerShape(999.dp)) {
    Text(text, color = Color.White, modifier = Modifier.padding(horizontal = 12.dp, vertical = 4.dp))
  }
}