designmd-forge 1.2.0

package/dist/data/designs/ios-peloton-android.md

@@ -0,0 +1,470 @@
+# Peloton (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Peloton's studio-black visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s for class browse + in-class metrics (class card, LIVE badge, output ring, metric column, real-time leaderboard), navigation, motion, and haptics.
+
+> Why a Compose guide for an iOS-referenced app? The DESIGN.md tokens are platform-neutral. This file keeps the *visual* identity (pure-black studio canvas, single Peloton-Red accent, cinematic thumbnails, the pulsing LIVE badge, the output ring, the white-chip selected pill, fixed-meaning metric colors) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `Canvas` for the rings, `LazyColumn` + `animateItemPlacement` for the live leaderboard, `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 class thumbnails and avatars. Peloton is **dark-only** — there is no light scheme. **Do not** enable Material You dynamic color: the identity is the fixed pure-black + single Peloton-Red, and metric colors are semantic.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/PLColors.kt
+import androidx.compose.ui.graphics.Color
+
+object PLColors {
+    // Canvas & Surfaces (Dark — the only mode)
+    val Canvas   = Color(0xFF000000)   // pure black studio canvas
+    val Surface1 = Color(0xFF121212)
+    val Surface2 = Color(0xFF1C1C1E)
+    val Surface3 = Color(0xFF262629)
+    val Divider  = Color(0xFF2C2C2E)
+
+    // Text
+    val TextPrimary   = Color(0xFFFFFFFF)
+    val TextSecondary = Color(0xFFB5B5BA)
+    val TextTertiary  = Color(0xFF7A7A80)
+
+    // Brand (single accent)
+    val Red        = Color(0xFFDF1E2E)   // fills (CTA, LIVE, output ring, your row)
+    val RedOnDark  = Color(0xFFFF4B57)   // text / active on black (AA)
+    val RedPressed = Color(0xFFB81825)
+    val WhiteChip  = Color(0xFFFFFFFF)   // selected pill / secondary CTA
+
+    // Functional / in-class metrics (fixed meaning — theme-invariant)
+    val Cadence    = Color(0xFFE5402A)
+    val Resistance = Color(0xFFF0A030)
+    val Output     = Color(0xFFDF1E2E)
+    val HeartRate  = Color(0xFFFF4B57)
+    val Strive     = Color(0xFF3DB8E0)
+    val PR         = Color(0xFF2ECC71)
+
+    // Semantic
+    val Success = Color(0xFF2ECC71)
+    val Warning = Color(0xFFF0A030)
+    val Error   = Color(0xFFDF1E2E)
+    val Track   = Color(0xFF262629)
+}
+```
+
+Wire it into a **dark-only** scheme — Peloton has no light mode.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+
+private val PLDark = darkColorScheme(
+    primary        = PLColors.Red,
+    onPrimary      = PLColors.TextPrimary,
+    background     = PLColors.Canvas,
+    onBackground   = PLColors.TextPrimary,
+    surface        = PLColors.Surface1,
+    onSurface      = PLColors.TextPrimary,
+    surfaceVariant = PLColors.Surface2,
+    outline        = PLColors.Divider,
+    error          = PLColors.Error,
+)
+
+@Composable
+fun PLTheme(content: @Composable () -> Unit) = MaterialTheme(
+    colorScheme = PLDark,           // always studio-black; no light scheme
+    typography  = PLTypography,
+    content     = content,
+)
+```
+
+## 2. Typography
+
+Peloton sets **Inter** heavy and tight. Drop the TTFs (through Black) in `res/font/`. SIL OFL. Numerals tabular; the metric is the visual hero, labels are small uppercase whispers.
+
+```kotlin
+// ui/theme/PLType.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_semibold,   FontWeight.SemiBold),
+    Font(R.font.inter_bold,       FontWeight.Bold),
+    Font(R.font.inter_extrabold,  FontWeight.ExtraBold),
+    Font(R.font.inter_black,      FontWeight.Black),
+)
+
+private const val TNUM = "tnum"   // tabular figures
+
+object PLText {
+    val OutputNumber = TextStyle(Inter, fontWeight = FontWeight.Black,     fontSize = 44.sp, lineHeight = 44.sp, letterSpacing = (-1.0).sp, fontFeatureSettings = TNUM)
+    val ScreenTitle  = TextStyle(Inter, fontWeight = FontWeight.Black,     fontSize = 32.sp, lineHeight = 35.sp, letterSpacing = (-0.6).sp)
+    val HeroTitle    = 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 ClassTitle   = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 17.sp, lineHeight = 20.sp, letterSpacing = (-0.3).sp)
+    val MetricValue  = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 18.sp, lineHeight = 20.sp, fontFeatureSettings = TNUM)
+    val LbOutput     = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 14.sp, lineHeight = 14.sp, fontFeatureSettings = TNUM)
+    val Body         = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 15.sp, lineHeight = 22.sp)
+    val Meta         = TextStyle(Inter, fontWeight = FontWeight.Normal,    fontSize = 14.sp, lineHeight = 20.sp)
+    val Eyebrow      = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 12.sp, lineHeight = 15.sp, letterSpacing = 0.6.sp)
+    val MetricLabel  = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 11.sp, lineHeight = 13.sp, letterSpacing = 0.4.sp)
+    val Caption      = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 11.sp, lineHeight = 14.sp)
+    val Button       = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 15.sp, lineHeight = 15.sp, letterSpacing = 0.2.sp)
+    val Tab          = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.1.sp)
+    val Badge        = TextStyle(Inter, fontWeight = FontWeight.Black,     fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.6.sp)
+}
+
+val PLTypography = Typography(
+    headlineLarge = PLText.ScreenTitle,
+    titleLarge    = PLText.Section,
+    bodyLarge     = PLText.Body,
+    labelSmall    = PLText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Class Card
+
+```kotlin
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun ClassCard(
+    discipline: String, title: String, instructor: String,
+    duration: String, isLive: Boolean, rating: String,
+) {
+    Column(
+        Modifier
+            .clip(RoundedCornerShape(14.dp))
+            .background(PLColors.Surface1)
+            .border(1.dp, PLColors.Divider, RoundedCornerShape(14.dp)),
+    ) {
+        Box(
+            Modifier
+                .fillMaxWidth()
+                .height(150.dp)
+                .background(Brush.linearGradient(listOf(Color(0xFF4A1014), Color(0xFF160508)))),
+        ) {
+            if (isLive) LiveBadge(Modifier.align(Alignment.TopStart).padding(14.dp))
+            Text(
+                duration, style = PLText.Caption, color = PLColors.TextPrimary,
+                modifier = Modifier
+                    .align(Alignment.TopEnd).padding(14.dp)
+                    .clip(RoundedCornerShape(5.dp))
+                    .background(Color.Black.copy(alpha = 0.6f))
+                    .padding(horizontal = 9.dp, vertical = 5.dp),
+            )
+        }
+        Column(Modifier.padding(horizontal = 16.dp, vertical = 14.dp)) {
+            Text(discipline.uppercase(), style = PLText.Eyebrow, color = PLColors.RedOnDark)
+            Text(title, style = PLText.ClassTitle, color = PLColors.TextPrimary, modifier = Modifier.padding(top = 4.dp))
+            Text(instructor, style = PLText.Body, color = PLColors.TextSecondary, modifier = Modifier.padding(top = 3.dp))
+            Row(Modifier.padding(top = 8.dp), verticalAlignment = Alignment.CenterVertically) {
+                Icon(Icons.Filled.Star, null, tint = PLColors.Resistance, modifier = Modifier.size(11.dp))
+                Text(" $rating", style = PLText.Caption, color = PLColors.TextTertiary)
+            }
+        }
+    }
+}
+```
+
+### LIVE Badge (pulsing dot)
+
+```kotlin
+import androidx.compose.animation.core.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Star
+import androidx.compose.material3.Icon
+
+@Composable
+fun LiveBadge(modifier: Modifier = Modifier) {
+    val t = rememberInfiniteTransition(label = "live")
+    val o by t.animateFloat(
+        1f, 0.4f,
+        infiniteRepeatable(tween(700), RepeatMode.Reverse), label = "dot",
+    )
+    Row(
+        modifier
+            .clip(RoundedCornerShape(5.dp))
+            .background(PLColors.Red)
+            .padding(horizontal = 9.dp, vertical = 5.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(6.dp),
+    ) {
+        Box(Modifier.size(6.dp).clip(CircleShape)
+            .background(Color.White.copy(alpha = o)))
+        Text("LIVE", style = PLText.Badge, color = Color.White)
+    }
+}
+```
+
+### Output Ring (Canvas)
+
+```kotlin
+import androidx.compose.foundation.Canvas
+import androidx.compose.runtime.*
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.drawscope.Stroke
+
+@Composable
+fun OutputRing(progress: Float, totalKJ: Int) {
+    val p = remember { Animatable(0f) }
+    LaunchedEffect(progress) {
+        p.animateTo(progress, tween(600, easing = LinearOutSlowInEasing))
+    }
+    Box(Modifier.size(96.dp), contentAlignment = Alignment.Center) {
+        Canvas(Modifier.fillMaxSize()) {
+            val sw = 9.dp.toPx()
+            drawArc(PLColors.Track, 0f, 360f, false, style = Stroke(sw))
+            drawArc(PLColors.Red, -90f, 360f * p.value, false,
+                style = Stroke(sw, cap = StrokeCap.Round))
+        }
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            Text("$totalKJ", style = PLText.OutputNumber.copy(fontSize = 26.sp),
+                color = PLColors.TextPrimary)
+            Text("TOTAL kJ", style = PLText.Badge.copy(fontSize = 9.sp),
+                color = PLColors.TextTertiary, modifier = Modifier.padding(top = 3.dp))
+        }
+    }
+}
+```
+
+### In-Class Metric Column
+
+```kotlin
+data class Metric(val label: String, val value: String, val unit: String = "", val color: Color)
+
+@Composable
+fun MetricColumn(metrics: List<Metric>, modifier: Modifier = Modifier) {
+    Column(modifier.fillMaxWidth()) {
+        metrics.forEachIndexed { i, m ->
+            Row(
+                Modifier.fillMaxWidth().padding(vertical = 7.dp),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.Bottom,
+            ) {
+                Text(m.label.uppercase(), style = PLText.MetricLabel, color = PLColors.TextSecondary)
+                Row(verticalAlignment = Alignment.Bottom) {
+                    Text(m.value, style = PLText.MetricValue, color = m.color)
+                    if (m.unit.isNotEmpty())
+                        Text(" ${m.unit}", style = PLText.Caption, color = PLColors.TextTertiary)
+                }
+            }
+            if (i < metrics.lastIndex)
+                Box(Modifier.fillMaxWidth().height(1.dp).background(PLColors.Divider))
+        }
+    }
+}
+```
+
+### Real-Time Leaderboard
+
+```kotlin
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.ui.text.style.TextAlign
+
+data class Rider(val id: Long, val rank: Int, val name: String, val output: Int, val isMe: Boolean)
+
+@Composable
+fun Leaderboard(riders: List<Rider>, total: Int) {
+    Column(
+        Modifier
+            .clip(RoundedCornerShape(14.dp))
+            .background(PLColors.Surface1)
+            .border(1.dp, PLColors.Divider, RoundedCornerShape(14.dp)),
+    ) {
+        Text(
+            "LEADERBOARD · $total RIDERS", style = PLText.MetricLabel,
+            color = PLColors.TextSecondary,
+            modifier = Modifier.padding(start = 16.dp, top = 14.dp, bottom = 10.dp),
+        )
+        LazyColumn(Modifier.heightIn(max = 600.dp)) {
+            items(riders, key = { it.id }) { r ->
+                Row(
+                    Modifier
+                        .fillMaxWidth()
+                        .animateItemPlacement(tween(250))     // live reorder
+                        .background(if (r.isMe) PLColors.Red.copy(alpha = 0.12f) else Color.Transparent)
+                        .padding(horizontal = 16.dp, vertical = 10.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(12.dp),
+                ) {
+                    Text("${r.rank}", style = PLText.LbOutput,
+                        color = if (r.isMe) PLColors.RedOnDark else PLColors.TextSecondary,
+                        modifier = Modifier.width(26.dp))
+                    Box(Modifier.size(30.dp).clip(CircleShape)
+                        .background(Brush.linearGradient(listOf(Color(0xFF5A2B82), PLColors.Red))))
+                    Text(r.name, style = PLText.Body, color = Color.White, modifier = Modifier.weight(1f))
+                    Text("${r.output}", style = PLText.LbOutput, color = Color.White,
+                        textAlign = TextAlign.End)
+                }
+                Box(Modifier.fillMaxWidth().height(1.dp).background(PLColors.Divider))
+            }
+        }
+    }
+}
+```
+
+### Filter Pill (white-chip) + Primary Button
+
+```kotlin
+import androidx.compose.foundation.clickable
+
+@Composable
+fun FilterPill(title: String, selected: Boolean, onClick: () -> Unit) {
+    Box(
+        Modifier
+            .clip(RoundedCornerShape(500.dp))
+            .background(if (selected) PLColors.WhiteChip else PLColors.Surface2)
+            .then(if (selected) Modifier else Modifier.border(1.dp, PLColors.Divider, RoundedCornerShape(500.dp)))
+            .clickable(onClick = onClick)
+            .padding(horizontal = 16.dp, vertical = 8.dp),
+    ) {
+        Text(title,
+            style = PLText.Body.copy(fontSize = 13.sp),
+            color = if (selected) Color.Black else PLColors.TextSecondary)
+    }
+}
+
+@Composable
+fun PLButton(
+    title: String,
+    variant: PLButtonVariant = PLButtonVariant.Red,
+    onClick: () -> Unit,
+) {
+    val bg = when (variant) {
+        PLButtonVariant.Red -> PLColors.Red
+        PLButtonVariant.White -> Color.White
+        PLButtonVariant.Outline -> Color.Transparent
+    }
+    Box(
+        Modifier
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(500.dp))
+            .background(bg)
+            .then(if (variant == PLButtonVariant.Outline)
+                Modifier.border(1.5.dp, Color.White.copy(alpha = 0.4f), RoundedCornerShape(500.dp)) else Modifier)
+            .clickable(onClick = onClick)
+            .padding(vertical = 15.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(title, style = PLText.Button,
+            color = if (variant == PLButtonVariant.White) Color.Black else Color.White)
+    }
+}
+enum class PLButtonVariant { Red, White, Outline }
+```
+
+## 4. Navigation
+
+Peloton has a 4-tab bottom strip with **no tint pill** — active is just white. The header is a large title or back chevron.
+
+```kotlin
+import androidx.compose.material3.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.*
+
+@Composable
+fun PLBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(containerColor = PLColors.Surface1, tonalElevation = 0.dp) {
+        val items = listOf(
+            "Home"     to Icons.Filled.Home,
+            "Classes"  to Icons.Filled.PlayCircleFilled,
+            "Schedule" to Icons.Filled.BarChart,
+            "Profile"  to Icons.Filled.AccountCircle,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = { Icon(icon, contentDescription = label, modifier = Modifier.size(22.dp)) },
+                label = { Text(label, style = PLText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor   = Color.White,        // active is white
+                    selectedTextColor   = Color.White,
+                    unselectedIconColor = PLColors.TextTertiary,
+                    unselectedTextColor = PLColors.TextTertiary,
+                    indicatorColor      = Color.Transparent,  // no Material pill — Peloton has none
+                ),
+            )
+        }
+    }
+}
+```
+
+The class-detail screen uses a full-bleed instructor image with a black gradient foot, the discipline eyebrow + 26sp/Black title, and a sticky red `PLButton` "Take Class" pinned above the navigation-bar inset.
+
+## 5. Motion
+
+Peloton motion is the LIVE pulse, the ring fill, and the leaderboard reorder; quiet elsewhere.
+
+| Moment | Compose recipe |
+|--------|----------------|
+| LIVE dot pulse | `rememberInfiniteTransition` `animateFloat` 1→0.4 `infiniteRepeatable(tween(700), Reverse)` |
+| Output ring fill | `Animatable` 0→progress `tween(600, LinearOutSlowInEasing)` at start; live `tween(300)` |
+| Card tap | `Modifier.scale` 1→0.98 `animateFloatAsState(tween(120))` on press |
+| Leaderboard reorder | `LazyColumn` items keyed by id + `Modifier.animateItemPlacement(tween(250))` |
+| Pill select | `Crossfade`/`animateColorAsState(tween(150))` on the white fill |
+| PR burst | `AnimatedVisibility` `scaleIn(spring(dampingRatio = 0.6f)) + fadeIn`, 1.2s, then auto-dismiss |
+| Tab switch | `Crossfade(tween(150))`; glyph color tween 120ms |
+| Filter sheet | `ModalBottomSheet` slide-up (Material default ~300ms) |
+
+```kotlin
+// Canonical Peloton motion — output ring filling from zero at class start
+val p = remember { Animatable(0f) }
+LaunchedEffect(start) { p.animateTo(target, tween(600, easing = LinearOutSlowInEasing)) }
+```
+
+Haptics: `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.TextHandleMove)` (selection analog) on pill select / tab change; `HapticFeedbackType.LongPress` (medium impact analog) on "Take Class"; a success pattern on PR / class complete. The LIVE pulse is silent (visual only).
+
+## 6. Icons
+
+Peloton ships custom metric glyphs; the closest first-party set is `androidx.compose.material:material-icons-extended`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Home (tab) | `house.fill` | `Icons.Filled.Home` |
+| Classes (tab) | `play.rectangle.fill` | `Icons.Filled.PlayCircleFilled` |
+| Schedule (tab) | `chart.bar.fill` | `Icons.Filled.BarChart` |
+| Profile (tab) | `person.crop.circle.fill` | `Icons.Filled.AccountCircle` |
+| Search | `magnifyingglass` | `Icons.Filled.Search` |
+| Filter | `line.3.horizontal.decrease` | `Icons.Filled.Tune` |
+| Play (thumbnail) | `play.fill` | `Icons.Filled.PlayArrow` |
+| Rating star | `star.fill` | `Icons.Filled.Star` |
+| Add to Stack | `plus.circle` | `Icons.Filled.AddCircleOutline` |
+| Cadence | `metronome.fill` | `Icons.Filled.Speed` |
+| Resistance | `dial.medium.fill` | `Icons.Filled.Tune` |
+| Output / power | `bolt.fill` | `Icons.Filled.Bolt` |
+| Heart rate | `heart.fill` | `Icons.Filled.Favorite` |
+| Leaderboard | `list.number` | `Icons.Filled.FormatListNumbered` |
+| PR / trophy | `trophy.fill` | `Icons.Filled.EmojiEvents` |
+| Music | `music.note` | `Icons.Filled.MusicNote` |
+
+## 7. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; `Canvas` rings + `animateItemPlacement` are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; pure-black canvas wants light-content system bars. The sticky "Take Class" pill respects the navigation-bar inset via `Modifier.navigationBarsPadding()`; the in-class metric overlay must respect all insets over the video.
+- **Tabular numerals**: every metric `TextStyle` sets `fontFeatureSettings = "tnum"` so the output number, metric column, and leaderboard don't shift as values tick and rows reorder.
+- **Font scaling**: `sp` honors the user's font scale — keep it on screen/hero/section titles, body, meta. Pin layout-sensitive text (output number, metric values/labels, leaderboard, 10sp tab labels, badges) via `dp` or `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`.
+- **TalkBack**: announce the LIVE badge as "Live class"; metric rows merged as "Cadence 94"; leaderboard rows as "Rank 3, You, 312 output" via `Modifier.semantics(mergeDescendants = true)`; the output `Canvas` as "Total energy 312 kilojoules".
+- **Color is never the only signal**: the LIVE badge carries the word "LIVE"; metrics carry text labels beside the colored value; your leaderboard row is named "You" plus the red wash.
+- **Touch targets**: Material guidance is 48.dp — class card full-card tappable (≥ 200.dp), filter pills ≥ 36.dp with ≥ 48.dp hit, leaderboard rows full-row tappable (≥ 50.dp), buttons ≥ 48.dp.
+- **Contrast**: white on `#000000` is maximal; `#FF4B57` on `#000000` passes WCAG AA — never render small text in raw `#DF1E2E` on black; the white-chip pill is black-on-white (AA+).
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, hold the LIVE dot solid, set the output ring to final value via `Crossfade`, drop the card scale, reorder the leaderboard instantly, and show the PR as a static badge.
+- **Dark mode**: the **only** mode — never provide a light scheme; surfaces step `#000000 → #121212 → #1C1C1E`; floating layers (filter sheet, dialogs) get `#1C1C1E` + a soft `0.7` black shadow. **Do not** enable Material You `dynamicColorScheme()` — the pure-black + Peloton-Red identity and semantic metric colors must hold regardless of wallpaper.