designmd-forge 1.2.0

package/dist/data/designs/ios-apple-fitness-android.md

@@ -0,0 +1,462 @@
+# Apple Fitness (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Apple Fitness's rings-on-black visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s for the Activity rings + Summary + Fitness+ shelf, navigation, motion, and haptics.
+
+> Why a Compose guide for an Apple app? The DESIGN.md tokens are platform-neutral. This file keeps the *visual* identity (true-black canvas, the three immutable ring colors on 22%-opacity tracks, grouped rounded cards, the label-opacity text ramp, cinematic Fitness+ artwork) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `Canvas` for the rings, a Material `Surface` instead of a grouped UITableView cell, `sp`/`dp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and [Coil](https://coil-kt.github.io/coil/) `2.6+` for Fitness+ artwork. Apple Fitness is **dark-first**. **Do not** enable Material You dynamic color — the three ring colors are the brand and must never be re-themed to the wallpaper.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/AFColors.kt
+import androidx.compose.ui.graphics.Color
+
+object AFColors {
+    // The three Activity rings (the brand — immutable, theme-invariant)
+    val Move       = Color(0xFFFA114F)
+    val MoveLabel  = Color(0xFFFF375F)   // brightened on dark for text
+    val Exercise   = Color(0xFF92E82A)
+    val ExerciseHi = Color(0xFF66FF00)
+    val Stand      = Color(0xFF1EE4E1)
+    val StandHi    = Color(0xFF00F0FF)
+
+    // Ring tracks = ring color @ 22% opacity
+    val MoveTrack     = Move.copy(alpha = 0.22f)
+    val ExerciseTrack = Exercise.copy(alpha = 0.22f)
+    val StandTrack    = Stand.copy(alpha = 0.22f)
+
+    // Chrome accent (single)
+    val Accent        = Color(0xFFFF375F)
+    val AccentPressed = Color(0xFFD80E45)
+    val FitnessPlus   = Color(0xFFC969E0)
+
+    // Surfaces (dark — primary)
+    val Canvas    = Color(0xFF000000)
+    val Grouped1  = Color(0xFF1C1C1E)
+    val Grouped2  = Color(0xFF2C2C2E)
+    val Grouped3  = Color(0xFF3A3A3C)
+    val Separator = Color(0xFF38383A)
+    val Fill      = Color(0xFF767680).copy(alpha = 0.24f)
+
+    // Surfaces (light — tablet / system light)
+    val LightCanvas    = Color(0xFFF2F2F7)
+    val LightSurface   = Color(0xFFFFFFFF)
+    val LightSeparator = Color(0xFFC6C6C8)
+
+    // Text — Apple label-opacity ramp (white-on-dark)
+    val LabelPrimary   = Color(0xFFFFFFFF)
+    val LabelSecondary = Color(0xFFEBEBF5).copy(alpha = 0.60f)
+    val LabelTertiary  = Color(0xFFEBEBF5).copy(alpha = 0.30f)
+
+    // Semantic
+    val Success   = Color(0xFF30D158)
+    val Error     = Color(0xFFFF453A)
+    val AwardGold = Color(0xFFFFD60A)
+}
+```
+
+Wire it into a dark-first scheme. The ring colors live outside the M3 scheme on purpose — they are brand constants, not theme roles.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+
+private val AFDark = darkColorScheme(
+    primary        = AFColors.Accent,        // Move-pink chrome accent
+    onPrimary      = AFColors.LabelPrimary,
+    background     = AFColors.Canvas,
+    onBackground   = AFColors.LabelPrimary,
+    surface        = AFColors.Grouped1,
+    onSurface      = AFColors.LabelPrimary,
+    surfaceVariant = AFColors.Grouped2,
+    outline        = AFColors.Separator,
+    error          = AFColors.Error,
+)
+
+private val AFLight = lightColorScheme(
+    primary        = AFColors.Accent,
+    onPrimary      = AFColors.LabelPrimary,
+    background     = AFColors.LightCanvas,
+    onBackground   = Color(0xFF000000),
+    surface        = AFColors.LightSurface,
+    onSurface      = Color(0xFF000000),
+    surfaceVariant = Color(0xFFE5E5EA),
+    outline        = AFColors.LightSeparator,
+    error          = AFColors.Error,
+)
+
+@Composable
+fun AFTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) AFDark else AFLight,   // dark is the intended default (phone)
+    typography  = AFTypography,
+    content     = content,
+)
+```
+
+## 2. Typography
+
+Apple Fitness uses SF Pro (iOS system). On Android the closest substitute is **Inter** (SIL OFL) — drop the TTFs in `res/font/`. Follow Apple's text-style ramp; numerals tabular; secondary/tertiary text via the label-opacity colors above.
+
+```kotlin
+// ui/theme/AFType.kt
+import androidx.compose.material3.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+val Inter = FontFamily(
+    Font(R.font.inter_regular,   FontWeight.Normal),
+    Font(R.font.inter_medium,    FontWeight.Medium),
+    Font(R.font.inter_semibold,  FontWeight.SemiBold),
+    Font(R.font.inter_bold,      FontWeight.Bold),
+    Font(R.font.inter_extrabold, FontWeight.ExtraBold),
+)
+
+private const val TNUM = "tnum"   // tabular figures
+
+object AFText {
+    val LargeTitle = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 40.sp, lineHeight = 44.sp, letterSpacing = (-1.0).sp)
+    val Date       = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 32.sp, lineHeight = 35.sp, letterSpacing = (-0.6).sp)
+    val Header     = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 26.sp, lineHeight = 30.sp, letterSpacing = (-0.5).sp)
+    val Section    = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 22.sp, lineHeight = 26.sp, letterSpacing = (-0.4).sp)
+    val Title3     = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 20.sp, lineHeight = 25.sp, letterSpacing = (-0.3).sp)
+    val Body       = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 17.sp, lineHeight = 24.sp, letterSpacing = (-0.2).sp)
+    val BodyReg    = TextStyle(Inter, fontWeight = FontWeight.Normal,    fontSize = 17.sp, lineHeight = 26.sp, letterSpacing = (-0.2).sp)
+    val RingValue  = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 19.sp, lineHeight = 21.sp, fontFeatureSettings = TNUM)
+    val TileValue  = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 22.sp, lineHeight = 24.sp, fontFeatureSettings = TNUM)
+    val CardTitle  = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 15.sp, lineHeight = 20.sp, letterSpacing = (-0.2).sp)
+    val Footnote   = TextStyle(Inter, fontWeight = FontWeight.Normal,    fontSize = 13.sp, lineHeight = 18.sp)
+    val Eyebrow    = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 12.sp, lineHeight = 15.sp, letterSpacing = 0.4.sp)
+    val Button     = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 17.sp, lineHeight = 17.sp, letterSpacing = (-0.2).sp)
+    val Tab        = TextStyle(Inter, fontWeight = FontWeight.Medium,    fontSize = 10.sp, lineHeight = 10.sp)
+    val Badge      = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.5.sp)
+}
+
+val AFTypography = Typography(
+    headlineLarge = AFText.LargeTitle,
+    titleLarge    = AFText.Section,
+    bodyLarge     = AFText.Body,
+    labelSmall    = AFText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Activity Rings (Canvas)
+
+```kotlin
+import androidx.compose.animation.core.*
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun ActivityRings(
+    move: Float, exercise: Float, stand: Float,
+    size: Dp = 130.dp, lineWidth: Dp = 14.dp,
+) {
+    val m = remember { Animatable(0f) }
+    val e = remember { Animatable(0f) }
+    val s = remember { Animatable(0f) }
+    LaunchedEffect(Unit) {
+        val spec = tween<Float>(1000, easing = LinearOutSlowInEasing)
+        launch { m.animateTo(move.coerceAtMost(1f), spec) }
+        launch { delay(80);  e.animateTo(exercise.coerceAtMost(1f), spec) }
+        launch { delay(160); s.animateTo(stand.coerceAtMost(1f), spec) }
+    }
+
+    Canvas(Modifier.size(size)) {
+        val sw = lineWidth.toPx()
+        val gap = sw + 3.dp.toPx()
+        fun ring(progress: Float, color: Color, track: Color, inset: Float) {
+            val d = this.size.minDimension - sw - inset * 2
+            val topLeft = Offset(sw / 2 + inset, sw / 2 + inset)
+            val arc = Size(d, d)
+            drawArc(track, 0f, 360f, false, topLeft, arc, style = Stroke(sw))
+            drawArc(color, -90f, 360f * progress, false, topLeft, arc,
+                style = Stroke(sw, cap = StrokeCap.Round))
+        }
+        ring(m.value, AFColors.Move,     AFColors.MoveTrack,     0f)
+        ring(e.value, AFColors.Exercise, AFColors.ExerciseTrack, gap)
+        ring(s.value, AFColors.Stand,    AFColors.StandTrack,    gap * 2)
+    }
+}
+```
+
+### Ring Legend + Hero Card
+
+```kotlin
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.Alignment
+
+private data class Leg(val name: String, val value: String, val goal: String, val color: Color)
+
+@Composable
+fun RingHeroCard() {
+    val legs = listOf(
+        Leg("Move", "486", "/620 KCAL", AFColors.MoveLabel),
+        Leg("Exercise", "38", "/30 MIN", AFColors.Exercise),
+        Leg("Stand", "9", "/12 HR", AFColors.Stand),
+    )
+    Row(
+        Modifier
+            .padding(horizontal = 16.dp)
+            .clip(RoundedCornerShape(18.dp))
+            .background(AFColors.Grouped1)
+            .padding(22.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(20.dp),
+    ) {
+        ActivityRings(move = 0.80f, exercise = 1.27f, stand = 0.75f, size = 130.dp)
+        Column(verticalArrangement = Arrangement.spacedBy(14.dp), modifier = Modifier.weight(1f)) {
+            legs.forEach { l ->
+                Column {
+                    Text(l.name.uppercase(), style = AFText.Eyebrow, color = l.color)
+                    Row(verticalAlignment = Alignment.Bottom) {
+                        Text(l.value, style = AFText.RingValue, color = AFColors.LabelPrimary)
+                        Text(" ${l.goal}", style = AFText.Footnote.copy(fontSize = 12.sp),
+                            color = AFColors.LabelSecondary)
+                    }
+                }
+            }
+        }
+    }
+}
+```
+
+### Metric Tile
+
+```kotlin
+import androidx.compose.material3.Icon
+import androidx.compose.ui.graphics.vector.ImageVector
+
+@Composable
+fun MetricTile(
+    icon: ImageVector, tint: Color, name: String,
+    value: String, unit: String = "", sub: String,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier
+            .clip(RoundedCornerShape(14.dp))
+            .background(AFColors.Grouped1)
+            .padding(14.dp),
+    ) {
+        Row(verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(6.dp)) {
+            Icon(icon, null, tint = tint, modifier = Modifier.size(16.dp))
+            Text(name, style = AFText.Footnote.copy(fontSize = 12.sp), color = AFColors.LabelSecondary)
+        }
+        Row(verticalAlignment = Alignment.Bottom, modifier = Modifier.padding(top = 8.dp)) {
+            Text(value, style = AFText.TileValue, color = AFColors.LabelPrimary)
+            if (unit.isNotEmpty())
+                Text(" $unit", style = AFText.Footnote, color = AFColors.LabelSecondary)
+        }
+        Text(sub, style = AFText.Footnote, color = AFColors.LabelTertiary,
+            modifier = Modifier.padding(top = 2.dp))
+    }
+}
+```
+
+### Fitness+ Card
+
+```kotlin
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.PlayArrow
+import androidx.compose.ui.graphics.Brush
+
+@Composable
+fun FitnessPlusCard(
+    badge: String, type: String, title: String, meta: String,
+    gradient: List<Color>,
+) {
+    Column(Modifier.width(168.dp)) {
+        Box(
+            Modifier
+                .width(168.dp).height(200.dp)
+                .clip(RoundedCornerShape(16.dp))
+                .background(Brush.linearGradient(gradient)),
+        ) {
+            // Android has no live blur — translucent dark scrim approximates the frosted badge
+            Text(
+                badge.uppercase(), style = AFText.Badge, color = Color.White,
+                modifier = Modifier
+                    .align(Alignment.TopStart).padding(12.dp)
+                    .clip(RoundedCornerShape(6.dp))
+                    .background(Color.Black.copy(alpha = 0.40f))
+                    .padding(horizontal = 8.dp, vertical = 4.dp),
+            )
+            Box(
+                Modifier
+                    .align(Alignment.BottomStart).padding(14.dp)
+                    .size(34.dp).clip(CircleShape)
+                    .background(Color.White.copy(alpha = 0.22f)),
+                contentAlignment = Alignment.Center,
+            ) {
+                Icon(Icons.Filled.PlayArrow, null, tint = Color.White, modifier = Modifier.size(18.dp))
+            }
+        }
+        Text(type.uppercase(), style = AFText.Eyebrow, color = AFColors.MoveLabel,
+            modifier = Modifier.padding(top = 10.dp))
+        Text(title, style = AFText.CardTitle, color = AFColors.LabelPrimary,
+            modifier = Modifier.padding(top = 3.dp))
+        Text(meta, style = AFText.Footnote, color = AFColors.LabelSecondary,
+            modifier = Modifier.padding(top = 2.dp))
+    }
+}
+```
+
+### Buttons
+
+```kotlin
+import androidx.compose.foundation.clickable
+
+@Composable
+fun AFPrimaryButton(title: String, onClick: () -> Unit, modifier: Modifier = Modifier) {
+    Box(
+        modifier
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(14.dp))
+            .background(AFColors.Move)
+            .clickable(onClick = onClick)
+            .padding(vertical = 15.dp),
+        contentAlignment = Alignment.Center,
+    ) { Text(title, style = AFText.Button, color = Color.White) }
+}
+
+@Composable
+fun AFTintedButton(title: String, onClick: () -> Unit) {
+    Box(
+        Modifier
+            .clip(RoundedCornerShape(12.dp))
+            .background(AFColors.Move.copy(alpha = 0.18f))
+            .clickable(onClick = onClick)
+            .padding(horizontal = 22.dp, vertical = 12.dp),
+    ) { Text(title, style = AFText.Button.copy(fontSize = 15.sp), color = AFColors.Accent) }
+}
+```
+
+## 4. Navigation
+
+Apple Fitness has a 3-tab bottom strip with **no tint pill** — active is the Move-pink accent only. The header is a day eyebrow + large date + avatar.
+
+```kotlin
+import androidx.compose.material3.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.*
+
+@Composable
+fun AFBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(containerColor = AFColors.Grouped1, tonalElevation = 0.dp) {
+        val items = listOf(
+            "Summary"  to Icons.Filled.RadioButtonChecked,
+            "Fitness+" to Icons.Filled.PlayCircleFilled,
+            "Sharing"  to Icons.Filled.Group,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = { Icon(icon, contentDescription = label, modifier = Modifier.size(24.dp)) },
+                label = { Text(label, style = AFText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor   = AFColors.Accent,    // Move-pink, no pill
+                    selectedTextColor   = AFColors.Accent,
+                    unselectedIconColor = AFColors.LabelTertiary,
+                    unselectedTextColor = AFColors.LabelTertiary,
+                    indicatorColor      = Color.Transparent,  // no Material pill — Apple uses tint only
+                ),
+            )
+        }
+    }
+}
+```
+
+The Summary header is a `Column` with a day eyebrow (`AFText.Eyebrow` in `MoveLabel`), the date (`AFText.Date`), and a trailing 32.dp avatar; the "Summary" large title collapses with a `TopAppBar` + nested scroll. The Fitness+ shelf is a `LazyRow` of `FitnessPlusCard`s with `snapFlingBehavior`.
+
+## 5. Motion
+
+Apple Fitness motion: the rings carry the energy; chrome stays calm. 200–1000ms ease-out.
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Rings sweep from 0 | three `Animatable` 0→value `tween(1000, LinearOutSlowInEasing)`, staggered 80ms (Move→Exercise→Stand) |
+| Ring close | particle burst (a `Canvas`/`InfiniteTransition` emitter in the ring color) + success haptic at progress ≥ 1 |
+| All rings closed | larger celebration + stronger haptic |
+| Card press | `Modifier.scale` via `animateFloatAsState(spring(dampingRatio = 0.7f))` 1→0.97 on press |
+| Tab switch | `Crossfade(tween(200))`; glyph tint tween 150ms |
+| Fitness+ shelf | `LazyRow` + `rememberSnapFlingBehavior`; parallax via `lazyListState` item offset |
+| Sheet present | `ModalBottomSheet` slide-up (Material default ~300ms) + scrim |
+| Live HUD (in-workout) | rings `animateFloatAsState(tween(300))` as metrics change |
+| Award flip | `graphicsLayer { rotationY }` `animateFloatAsState(tween(500))` |
+
+```kotlin
+// Canonical Apple Fitness motion — staggered ring sweep
+LaunchedEffect(Unit) {
+    val spec = tween<Float>(1000, easing = LinearOutSlowInEasing)
+    launch { move.animateTo(targetMove, spec) }
+    launch { delay(80);  exercise.animateTo(targetExercise, spec) }
+    launch { delay(160); stand.animateTo(targetStand, spec) }
+}
+```
+
+Haptics: `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.TextHandleMove)` (selection analog) on tab/segment change; a success pattern on ring close / all-rings-closed; `HapticFeedbackType.LongPress` (medium impact analog) on Start Workout. Reduce motion replaces the sweep with an instant final value via `Crossfade`.
+
+## 6. Icons
+
+Apple Fitness uses SF Symbols; the closest first-party set is `androidx.compose.material:material-icons-extended`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Summary (tab) | `circle.circle.fill` | `Icons.Filled.RadioButtonChecked` |
+| Fitness+ (tab) | `play.rectangle.fill` | `Icons.Filled.PlayCircleFilled` |
+| Sharing (tab) | `person.2.fill` | `Icons.Filled.Group` |
+| Steps | `figure.walk` | `Icons.Filled.DirectionsWalk` |
+| Distance | (curved path) | `Icons.Filled.Straighten` |
+| Heart Rate | `heart.fill` | `Icons.Filled.Favorite` |
+| Workouts | `figure.run` | `Icons.Filled.DirectionsRun` |
+| Play (card) | `play.fill` | `Icons.Filled.PlayArrow` |
+| Move detail | `flame.fill` | `Icons.Filled.LocalFireDepartment` |
+| Exercise detail | `figure.run` | `Icons.Filled.DirectionsRun` |
+| Stand detail | `figure.stand` | `Icons.Filled.Accessibility` |
+| Award | `medal.fill` | `Icons.Filled.EmojiEvents` |
+| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
+| See All | `chevron.right` | `Icons.Filled.ChevronRight` |
+| Trends up / down | `arrow.up.right` / `arrow.down.right` | `Icons.Filled.TrendingUp` / `Icons.Filled.TrendingDown` |
+
+## 7. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; `Canvas` rings + modern motion comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; true-black canvas wants light-content system bars in dark mode. The bottom bar respects the navigation inset; the in-workout HUD must respect all insets over video.
+- **Tabular numerals**: every numeric `TextStyle` sets `fontFeatureSettings = "tnum"` so the ring legend, metric tiles, and live HUD don't jitter.
+- **No live blur on Android**: Apple's frosted badges/play buttons and blurred tab bar are approximated with translucent scrims (`Color.Black.copy(alpha = 0.40f)` / `Color.White.copy(alpha = 0.22f)`) or a `RenderEffect.createBlurEffect` on API 31+; provide the scrim fallback below 31 and when reduce-transparency is requested.
+- **Font scaling**: `sp` honors the user's font scale — keep it on titles/body/footnotes. Pin layout-sensitive text (ring legend numerals, in-workout HUD, 10sp tab labels, frosted badges) via `dp` or a fixed-density `CompositionLocalProvider`; ring `size` scales with container width, not font scale.
+- **TalkBack**: announce rings via `Modifier.semantics(mergeDescendants = true) { contentDescription = "Move ring, 486 of 620 kilocalories, 78 percent" }`; metric tiles "Steps, 8214, average 7540"; Fitness+ cards "20 minute HIIT with Bakari, Pop Anthems playlist".
+- **Color is never the only signal**: ring legend rows carry the text label + value beside the colored ring; rings are also distinguishable by radius/position; trend arrows pair color with an up/down glyph.
+- **Touch targets**: Material guidance is 48.dp — metric tiles full-tile tappable (≥ 72.dp), Fitness+ cards full-card (≥ 280.dp), buttons ≥ 48.dp, tab icons 24.dp glyph in the 56.dp bar.
+- **Contrast**: white on `#000000` is maximal; `#FF375F` on `#000000` passes WCAG AA for the accent; keep ring *labels* at the brightened variants for text contrast (raw `#FA114F` text on black is borderline).
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, set the rings to their final value via `Crossfade`, drop the particle burst (static "closed" check), no card scale, no shelf parallax, awards crossfade instead of 3D flip.
+- **Dark mode**: dark is the default (phone); surfaces step `#000000 → #1C1C1E → #2C2C2E`; light is allowed on tablet via the M3 light scheme. **The three ring colors and their 22%-opacity tracks NEVER change between modes — they are the brand.** **Do not** enable Material You `dynamicColorScheme()` — the rings must never re-theme to the wallpaper.