designmd-forge 1.2.0

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

@@ -0,0 +1,656 @@
+# Strava (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Strava's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, `Modifier`s, 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 (the single Strava-Orange accent, the haloed route polyline, the universal 3-up stat grid, coal-black dark mode) while making everything idiomatic Android — `NavigationBar` with a protruding center FAB instead of a UITabBar, Google Maps Compose `Polyline` instead of `MapPolyline`, `sp`/`dp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, `com.google.maps.android:maps-compose` `4.3+` for the route snapshot, and [Coil](https://coil-kt.github.io/coil/) `2.6+` for athlete avatars. No color extraction — Strava is monochromatically Orange, so `androidx.palette` is not required.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/StravaColors.kt
+import androidx.compose.ui.graphics.Color
+
+object StravaColors {
+    // Strava Orange — the only accent
+    val Orange        = Color(0xFFFC4C02)
+    val OrangePressed = Color(0xFFD44002)
+    val OrangeHalo    = Color(0xFFFC4C02).copy(alpha = 0.3f) // luminance ring under the polyline
+
+    // Canvas, Surface, Divider (Light)
+    val Canvas      = Color(0xFFFFFFFF)
+    val SurfaceWarm = Color(0xFFF5F4F2)
+    val SurfaceCool = Color(0xFFF0F0F0)
+    val Divider     = Color(0xFFE5E5E5)
+    val MapTile     = Color(0xFFE8E5DD) // warm parchment base — never gray
+
+    // Text (Light)
+    val InkPrimary   = Color(0xFF0E0E0E)
+    val InkSecondary = Color(0xFF666666)
+    val InkTertiary  = Color(0xFF9A9A9A)
+
+    // Dark mode — coal, not pure black
+    val DarkCanvas    = Color(0xFF0F0F0F)
+    val DarkSurface   = Color(0xFF1A1A1A)
+    val DarkSurface2  = Color(0xFF262626)
+    val DarkDivider   = Color(0xFF2A2A2A)
+    val DarkText      = Color(0xFFF2F2F2)
+    val DarkTextSec   = Color(0xFFA0A0A0)
+    val DarkMapTile   = Color(0xFF1B1B1B)
+
+    // Achievement & rank
+    val PRGold   = Color(0xFFF5C24A)
+    val Silver   = Color(0xFFC6C6C6)
+    val Bronze   = Color(0xFFCD7F32)
+    val KOMCrown = Color(0xFFFFD700)
+
+    // Chart & semantic
+    val Success   = Color(0xFF22C55E)
+    val HeartRed  = Color(0xFFE74C3C)
+    val PaceBlue  = Color(0xFF3B82F6)
+    val ElevBrown = Color(0xFF8B6F47)
+    val WarningAmber = Color(0xFFF59E0B)
+    val ErrorRed  = Color(0xFFEF4444)
+}
+```
+
+Strava is white-first; supply a Material 3 `lightColorScheme` and a coal `darkColorScheme`. Orange is identical in both — it glows on coal.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.foundation.isSystemInDarkTheme
+
+private val StravaLight = lightColorScheme(
+    primary        = StravaColors.Orange,
+    onPrimary      = StravaColors.Canvas,
+    background     = StravaColors.Canvas,
+    onBackground   = StravaColors.InkPrimary,
+    surface        = StravaColors.Canvas,
+    onSurface      = StravaColors.InkPrimary,
+    surfaceVariant = StravaColors.SurfaceCool,
+    outline        = StravaColors.Divider,
+    error          = StravaColors.ErrorRed,
+)
+
+private val StravaDark = darkColorScheme(
+    primary        = StravaColors.Orange,
+    onPrimary      = StravaColors.Canvas,
+    background     = StravaColors.DarkCanvas,   // coal #0F0F0F, not pure black
+    onBackground   = StravaColors.DarkText,
+    surface        = StravaColors.DarkSurface,
+    onSurface      = StravaColors.DarkText,
+    surfaceVariant = StravaColors.DarkSurface2,
+    outline        = StravaColors.DarkDivider,
+    error          = StravaColors.ErrorRed,
+)
+
+@Composable
+fun StravaTheme(
+    darkTheme: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (darkTheme) StravaDark else StravaLight,
+    typography  = StravaTypography,
+    content     = content,
+)
+```
+
+## 2. Typography
+
+Inside the iOS app Strava leans on SF Pro for its numeric weight stack. On Android the system equivalent is Roboto — but the Strava data voice depends on **tabular figures**, so the closest free substitute is `Roboto` with `FontFeatureSetting("tnum")`. Bundle the marketing face (Maison Neue) only if you have a license; otherwise Roboto holds.
+
+```kotlin
+// ui/theme/StravaType.kt
+import androidx.compose.material3.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+private val Sans = FontFamily.Default // Roboto on Android — closest to SF Pro
+private const val TNUM = "tnum"        // tabular figures — Strava's column alignment depends on it
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1, weights preserved)
+object StravaText {
+    val HeroStat      = TextStyle(Sans, fontWeight = FontWeight.Black,    fontSize = 44.sp, lineHeight = 44.sp, letterSpacing = (-0.6).sp, fontFeatureSettings = TNUM)
+    val HeroUnit      = TextStyle(Sans, fontWeight = FontWeight.SemiBold, fontSize = 13.sp, lineHeight = 13.sp, letterSpacing = 0.5.sp)
+    val LargeNav      = TextStyle(Sans, fontWeight = FontWeight.Bold,     fontSize = 28.sp, lineHeight = 31.sp, letterSpacing = (-0.4).sp)
+    val ActivityTitle = TextStyle(Sans, fontWeight = FontWeight.SemiBold, fontSize = 17.sp, lineHeight = 20.sp, letterSpacing = (-0.2).sp)
+    val Athlete       = TextStyle(Sans, fontWeight = FontWeight.SemiBold, fontSize = 15.sp, lineHeight = 18.sp, letterSpacing = (-0.1).sp)
+    val SectionHdr    = TextStyle(Sans, fontWeight = FontWeight.Bold,     fontSize = 13.sp, lineHeight = 16.sp, letterSpacing = 0.5.sp)
+    val Body          = TextStyle(Sans, fontWeight = FontWeight.Normal,   fontSize = 15.sp, lineHeight = 21.sp, letterSpacing = (-0.2).sp)
+    val BodySmall     = TextStyle(Sans, fontWeight = FontWeight.Normal,   fontSize = 13.sp, lineHeight = 18.sp, letterSpacing = (-0.1).sp)
+    val StatLabel     = TextStyle(Sans, fontWeight = FontWeight.SemiBold, fontSize = 11.sp, lineHeight = 13.sp, letterSpacing = 0.6.sp)
+    val StatValue     = TextStyle(Sans, fontWeight = FontWeight.Bold,     fontSize = 17.sp, lineHeight = 19.sp, fontFeatureSettings = TNUM)
+    val KudosCount    = TextStyle(Sans, fontWeight = FontWeight.SemiBold, fontSize = 13.sp, lineHeight = 13.sp, fontFeatureSettings = TNUM)
+    val Meta          = TextStyle(Sans, fontWeight = FontWeight.Normal,   fontSize = 13.sp, lineHeight = 17.sp, letterSpacing = (-0.1).sp)
+    val Button        = TextStyle(Sans, fontWeight = FontWeight.SemiBold, fontSize = 17.sp, lineHeight = 17.sp, letterSpacing = (-0.2).sp)
+    val ButtonSm      = TextStyle(Sans, fontWeight = FontWeight.SemiBold, fontSize = 15.sp, lineHeight = 15.sp, letterSpacing = (-0.1).sp)
+    val Tab           = TextStyle(Sans, fontWeight = FontWeight.SemiBold, fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.2.sp)
+    val Rank          = TextStyle(Sans, fontWeight = FontWeight.Black,    fontSize = 13.sp, lineHeight = 13.sp, fontFeatureSettings = TNUM)
+}
+
+// Map onto Material 3 slots so stock components inherit the brand
+val StravaTypography = Typography(
+    headlineMedium = StravaText.LargeNav,
+    titleMedium    = StravaText.ActivityTitle,
+    bodyMedium     = StravaText.Body,
+    labelLarge     = StravaText.Button,
+    labelSmall     = StravaText.Tab,
+)
+```
+
+> Every numeric style sets `fontFeatureSettings = "tnum"`. This is the Compose analog of SwiftUI's `.monospacedDigit()` — without it, pace columns and split tables misalign and Strava users notice.
+
+## 3. Signature Components
+
+### Stat Cell + 3-Up Grid (the universal activity-card primitive)
+
+```kotlin
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun StatCell(label: String, value: String, modifier: Modifier = Modifier) {
+    Column(
+        modifier = modifier.padding(vertical = 16.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        Text(label.uppercase(), style = StravaText.StatLabel, color = StravaColors.InkSecondary)
+        Text(value, style = StravaText.StatValue, color = StravaColors.InkPrimary)
+    }
+}
+
+@Composable
+fun StatGrid(stats: List<Pair<String, String>>, modifier: Modifier = Modifier) {
+    Row(modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
+        stats.forEachIndexed { idx, (label, value) ->
+            StatCell(label, value, Modifier.weight(1f))
+            if (idx < stats.lastIndex) {
+                // 1pt vertical divider only in light mode (DESIGN.md §4)
+                Box(
+                    Modifier
+                        .width(1.dp)
+                        .height(40.dp)
+                        .background(StravaColors.SurfaceCool)
+                )
+            }
+        }
+    }
+}
+```
+
+### Route Map Snapshot with Polyline Halo
+
+iOS draws two `MapPolyline`s on a `Map`. On Android use Google Maps Compose: draw the **halo polyline first** (width ~12px, `OrangeHalo`), then the **main stroke on top** (width ~8px, `Orange`). Round caps + round joins so switchbacks don't miter.
+
+```kotlin
+import com.google.android.gms.maps.model.LatLng
+import com.google.maps.android.compose.*
+import com.google.android.gms.maps.model.JointType
+import com.google.android.gms.maps.model.RoundCap
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.draw.clip
+
+@Composable
+fun RouteMapSnapshot(
+    route: List<LatLng>,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier
+            .fillMaxWidth()
+            .aspectRatio(16f / 9f)
+            .clip(RoundedCornerShape(6.dp)),
+    ) {
+        GoogleMap(
+            modifier = Modifier.fillMaxSize(),
+            uiSettings = MapUiSettings(
+                zoomControlsEnabled = false,
+                scrollGesturesEnabled = false,
+                tiltGesturesEnabled = false,
+            ),
+            properties = MapProperties(mapStyleOptions = stravaMapStyle()), // warm parchment / coal dark JSON
+        ) {
+            // halo first
+            Polyline(
+                points = route,
+                color = StravaColors.OrangeHalo,
+                width = 12f,
+                startCap = RoundCap(), endCap = RoundCap(),
+                jointType = JointType.ROUND,
+            )
+            // main stroke on top — 4dp scaled (≈8px); thins to ≈6px for long activities
+            Polyline(
+                points = route,
+                color = StravaColors.Orange,
+                width = 8f,
+                startCap = RoundCap(), endCap = RoundCap(),
+                jointType = JointType.ROUND,
+            )
+            route.firstOrNull()?.let {
+                MarkerComposable(state = MarkerState(it)) { RouteDot(filled = false) }
+            }
+            route.lastOrNull()?.let {
+                MarkerComposable(state = MarkerState(it)) { RouteDot(filled = true) }
+            }
+        }
+    }
+}
+
+@Composable
+private fun RouteDot(filled: Boolean) {
+    Box(
+        Modifier
+            .size(12.dp)
+            .clip(androidx.compose.foundation.shape.CircleShape)
+            .background(if (filled) StravaColors.Orange else StravaColors.Canvas)
+            .then(
+                if (filled) Modifier.border(2.dp, StravaColors.Canvas, androidx.compose.foundation.shape.CircleShape)
+                else Modifier.border(2.dp, StravaColors.Orange, androidx.compose.foundation.shape.CircleShape)
+            )
+    )
+}
+
+// Supply a styled-map JSON in res/raw (warm parchment light, charcoal dark)
+private fun stravaMapStyle(): com.google.android.gms.maps.model.MapStyleOptions? = null
+```
+
+### Kudos Button (spring bounce + confetti)
+
+```kotlin
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.spring
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ThumbUp
+import androidx.compose.material.icons.outlined.ThumbUp
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.*
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+import kotlin.math.cos
+import kotlin.math.sin
+
+@Composable
+fun KudosButton(
+    initialCount: Int,
+    modifier: Modifier = Modifier,
+) {
+    var given by remember { mutableStateOf(false) }
+    var count by remember { mutableIntStateOf(initialCount) }
+    val scale = remember { Animatable(1f) }
+    var burst by remember { mutableStateOf(false) }
+    val haptics = LocalHapticFeedback.current
+    val interaction = remember { MutableInteractionSource() }
+
+    LaunchedEffect(given) {
+        if (given) {
+            // 1.0 → 1.3 → 1.0 spring (damping 0.6)
+            scale.animateTo(1.3f, spring(dampingRatio = 0.6f, stiffness = 500f))
+            scale.animateTo(1.0f, spring(dampingRatio = 0.6f))
+        }
+    }
+
+    Box(modifier) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(6.dp),
+            modifier = Modifier
+                .clip(androidx.compose.foundation.shape.CircleShape)
+                .clickable(interaction, indication = null) {
+                    given = !given
+                    count += if (given) 1 else -1
+                    burst = given
+                    haptics.performHapticFeedback(HapticFeedbackType.LongPress) // ~iOS medium impact
+                }
+                .padding(horizontal = 4.dp, vertical = 8.dp),
+        ) {
+            Icon(
+                imageVector = if (given) Icons.Filled.ThumbUp else Icons.Outlined.ThumbUp,
+                contentDescription = if (given) "Kudos given, $count" else "Give kudos, $count",
+                tint = if (given) StravaColors.Orange else StravaColors.InkSecondary,
+                modifier = Modifier.size(18.dp).scale(scale.value),
+            )
+            Text("$count", style = StravaText.KudosCount, color = StravaColors.InkPrimary)
+        }
+        if (burst) ConfettiBurst(onDone = { burst = false })
+    }
+}
+
+@Composable
+private fun ConfettiBurst(onDone: () -> Unit) {
+    val rise = remember { Animatable(0f) }
+    LaunchedEffect(Unit) {
+        rise.animateTo(1f, androidx.compose.animation.core.tween(600))
+        onDone()
+    }
+    Box(Modifier.size(40.dp), contentAlignment = Alignment.Center) {
+        repeat(8) { i ->
+            val angle = i * Math.PI / 4
+            Box(
+                Modifier
+                    .size(4.dp)
+                    .offset(
+                        x = (cos(angle) * 30 * rise.value).dp,
+                        y = (-sin(angle) * 30 * rise.value).dp,
+                    )
+                    .clip(androidx.compose.foundation.shape.CircleShape)
+                    .background(StravaColors.Orange.copy(alpha = 1f - rise.value))
+            )
+        }
+    }
+}
+```
+
+### Activity Feed Card (the hero component)
+
+```kotlin
+import androidx.compose.material.icons.filled.DirectionsRun
+import androidx.compose.material.icons.outlined.ChatBubbleOutline
+import androidx.compose.material3.HorizontalDivider
+import coil.compose.AsyncImage
+import androidx.compose.ui.layout.ContentScale
+
+@Composable
+fun ActivityCard(
+    athleteAvatarUrl: String,
+    athleteName: String,
+    timestamp: String,
+    activityTitle: String,
+    route: List<LatLng>,
+    distance: String,
+    elapsed: String,
+    pace: String,
+    kudosCount: Int,
+    commentCount: Int,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(StravaColors.Canvas) // flat — no shadow, no border
+            .padding(horizontal = 16.dp, vertical = 16.dp),
+        verticalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(12.dp)) {
+            AsyncImage(
+                model = athleteAvatarUrl,
+                contentDescription = null,
+                modifier = Modifier.size(40.dp).clip(androidx.compose.foundation.shape.CircleShape),
+                contentScale = ContentScale.Crop,
+            )
+            Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(2.dp)) {
+                Text(athleteName, style = StravaText.Athlete, color = StravaColors.InkPrimary)
+                Text(timestamp, style = StravaText.Meta, color = StravaColors.InkSecondary)
+            }
+            Icon(Icons.Filled.DirectionsRun, null, tint = StravaColors.Orange, modifier = Modifier.size(18.dp))
+        }
+
+        Text(activityTitle, style = StravaText.ActivityTitle, color = StravaColors.InkPrimary, maxLines = 2)
+
+        RouteMapSnapshot(route)
+
+        StatGrid(listOf("Distance" to distance, "Time" to elapsed, "Pace" to pace))
+
+        HorizontalDivider(color = StravaColors.Divider)
+
+        Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(16.dp)) {
+            KudosButton(initialCount = kudosCount)
+            Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(6.dp)) {
+                Icon(Icons.Outlined.ChatBubbleOutline, null, tint = StravaColors.InkSecondary, modifier = Modifier.size(16.dp))
+                Text("$commentCount", style = StravaText.KudosCount, color = StravaColors.InkSecondary)
+            }
+            Spacer(Modifier.weight(1f))
+            Text("View Activity", style = StravaText.ButtonSm, color = StravaColors.Orange)
+        }
+    }
+}
+```
+
+### Segment Leaderboard Row
+
+```kotlin
+@Composable
+fun LeaderboardRow(
+    rank: Int,
+    avatarUrl: String,
+    name: String,
+    date: String,
+    time: String,
+    gap: String,
+    modifier: Modifier = Modifier,
+) {
+    val rankBg = when (rank) {
+        1 -> StravaColors.PRGold
+        2 -> StravaColors.Silver
+        3 -> StravaColors.Bronze
+        else -> StravaColors.SurfaceCool
+    }
+    val rankFg = if (rank <= 3) StravaColors.Canvas else StravaColors.InkPrimary
+
+    Column(modifier.fillMaxWidth()) {
+        Row(
+            Modifier.height(56.dp).padding(horizontal = 16.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+            Box(
+                Modifier.size(32.dp).clip(androidx.compose.foundation.shape.CircleShape).background(rankBg),
+                contentAlignment = Alignment.Center,
+            ) { Text("$rank", style = StravaText.Rank, color = rankFg) }
+            AsyncImage(
+                model = avatarUrl, contentDescription = null,
+                modifier = Modifier.size(36.dp).clip(androidx.compose.foundation.shape.CircleShape),
+                contentScale = ContentScale.Crop,
+            )
+            Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(2.dp)) {
+                Text(name, style = StravaText.Athlete, color = StravaColors.InkPrimary)
+                Text(date, style = StravaText.Meta, color = StravaColors.InkSecondary)
+            }
+            Column(horizontalAlignment = Alignment.End, verticalArrangement = Arrangement.spacedBy(2.dp)) {
+                Text(time, style = StravaText.StatValue, color = StravaColors.InkPrimary)
+                Text(gap, style = StravaText.Meta, color = StravaColors.InkSecondary)
+            }
+        }
+        HorizontalDivider(color = StravaColors.Divider, thickness = 0.5.dp)
+    }
+}
+```
+
+### Achievement Badge
+
+```kotlin
+import androidx.compose.material.icons.filled.EmojiEvents
+
+@Composable
+fun AchievementBadge(text: String, modifier: Modifier = Modifier) {
+    Row(
+        modifier
+            .clip(RoundedCornerShape(50))
+            .background(StravaColors.Orange.copy(alpha = 0.08f))
+            .padding(horizontal = 10.dp, vertical = 4.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        Icon(Icons.Filled.EmojiEvents, null, tint = StravaColors.Orange, modifier = Modifier.size(14.dp))
+        Text(text, style = StravaText.KudosCount, color = StravaColors.InkPrimary)
+    }
+}
+```
+
+## 4. The Center Record Button (the signature elevated control)
+
+Strava's only elevated element is the **center Record button** — it protrudes 8dp above a 5-item bottom bar with a glowing orange shadow and fires the *heaviest* haptic in the app. Compose has no center-FAB `NavigationBar` slot, so compose a `Box` overlay above a `NavigationBar` (the iOS pattern is a placeholder center tab + a floating button).
+
+```kotlin
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.*
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.draw.scale
+import androidx.compose.animation.core.animateFloatAsState
+
+@Composable
+fun StravaRecordButton(
+    onRecord: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by animateFloatAsState(if (pressed) 0.95f else 1f, label = "recordScale")
+    val haptics = LocalHapticFeedback.current
+
+    Box(
+        modifier = modifier
+            .offset(y = (-8).dp)      // protrudes 8dp above the bar
+            .size(56.dp)
+            .scale(scale)
+            // glowing orange aura — rgba(252,76,2,0.4) 0 8px 16px
+            .shadow(16.dp, CircleShape, spotColor = StravaColors.Orange.copy(alpha = 0.4f))
+            .clip(CircleShape)
+            .background(StravaColors.Orange)
+            .clickable(interaction, indication = null) {
+                haptics.performHapticFeedback(HapticFeedbackType.LongPress) // heaviest tap in the app
+                onRecord()
+            },
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(Icons.Filled.RadioButtonChecked, "Record", tint = StravaColors.Canvas, modifier = Modifier.size(22.dp))
+    }
+}
+
+@Composable
+fun StravaScaffold(content: @Composable (PaddingValues) -> Unit) {
+    var tab by remember { mutableIntStateOf(0) }
+    Scaffold(
+        bottomBar = {
+            Box(contentAlignment = Alignment.TopCenter) {
+                NavigationBar(containerColor = StravaColors.Canvas, tonalElevation = 0.dp) {
+                    val items = listOf(
+                        "Home" to Icons.Filled.Home,
+                        "Maps" to Icons.Filled.Map,
+                        null to null,                       // placeholder slot for Record
+                        "Groups" to Icons.Filled.Groups,
+                        "You" to Icons.Filled.Person,
+                    )
+                    items.forEachIndexed { i, (label, icon) ->
+                        if (icon == null) {
+                            NavigationBarItem(false, onClick = {}, enabled = false, icon = { Spacer(Modifier.size(24.dp)) })
+                        } else {
+                            NavigationBarItem(
+                                selected = tab == i,
+                                onClick = { tab = i },
+                                icon = { Icon(icon, label, modifier = Modifier.size(24.dp)) },
+                                label = { Text(label!!, style = StravaText.Tab) },
+                                colors = NavigationBarItemDefaults.colors(
+                                    selectedIconColor   = StravaColors.Orange,
+                                    selectedTextColor   = StravaColors.Orange,
+                                    unselectedIconColor = StravaColors.InkSecondary,
+                                    unselectedTextColor = StravaColors.InkSecondary,
+                                    indicatorColor      = Color.Transparent,
+                                ),
+                            )
+                        }
+                    }
+                }
+                StravaRecordButton(onRecord = { /* present record sheet */ })
+            }
+        },
+        content = content,
+    )
+}
+```
+
+Note: Android has no first-class live blur. Strava's iOS bottom bar is already a solid `#FFFFFF`/`#0F0F0F` with a 0.5pt top divider (no blur), so an opaque `containerColor` is exact — add a `HorizontalDivider(thickness = 0.5.dp)` above the bar.
+
+## 5. Navigation
+
+Strava's nav model is a 5-tab bottom bar with the protruding center Record button (see §4) plus per-screen top app bars (large `SF Pro Display 28pt Bold` titles → `StravaText.LargeNav`, trailing 22dp action icons). No rail, no drawer. The active tab tint is Strava Orange; inactive is `#666666`. Because there is no Material pill indicator in Strava's design, set `indicatorColor = Color.Transparent`.
+
+## 6. Motion
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Kudos tap | `Animatable` 1 → 1.3 → 1.0 `spring(dampingRatio=0.6f)` + 8-particle `ConfettiBurst` over `tween(600)`; `HapticFeedbackType.LongPress` (medium) |
+| Record button tap | `animateFloatAsState` 1 → 0.95 + heaviest haptic, then record sheet rises `tween(350)` |
+| Activity card tap | very subtle scale 1 → 0.99, then nav push (`tween(280)`) |
+| Tab switch | recolor outlined → Orange over ~200ms; selection haptic |
+| Pace chart scrub | real-time, no haptic — value badge follows finger |
+| PR celebration | trophy `Animatable` 1 → 1.1 → 1.0 `spring` (600ms feel); `HapticFeedbackType.LongPress` (success) |
+| Pull-to-refresh | Material `PullToRefreshBox` tinted `StravaColors.Orange` |
+
+```kotlin
+// PR celebration pulse on first view of an activity with a PR
+@Composable
+fun PRTrophy(seen: Boolean) {
+    val scale = remember { Animatable(1f) }
+    val haptics = LocalHapticFeedback.current
+    LaunchedEffect(seen) {
+        if (seen) {
+            haptics.performHapticFeedback(HapticFeedbackType.LongPress)
+            scale.animateTo(1.1f, spring(dampingRatio = 0.7f, stiffness = 400f))
+            scale.animateTo(1.0f, spring(dampingRatio = 0.7f))
+        }
+    }
+    Icon(
+        Icons.Filled.EmojiEvents, "Personal Record",
+        tint = StravaColors.PRGold,
+        modifier = Modifier.size(28.dp).scale(scale.value),
+    )
+}
+```
+
+Haptics: `LocalHapticFeedback` covers light/medium/heavy needs via `TextHandleMove` / `LongPress`. For a true graded heavy cue on Record, use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.LONG_PRESS)` or a `Vibrator` `VibrationEffect.createOneShot(20, 255)` — Record is the most serious tap in the app.
+
+## 7. Icons
+
+Strava ships custom activity-type glyphs; the closest first-party set is `androidx.compose.material:material-icons-extended`. For exact parity (the Strava trophy, the activity-type strip) export them as vector drawables and load via `ImageVector.vectorResource(R.drawable.…)`.
+
+| Component | SF Symbol (iOS) | Material Icon (Compose) |
+|-----------|-----------------|--------------------------|
+| Kudos (un-given / given) | `hand.thumbsup` / `hand.thumbsup.fill` | `Icons.Outlined.ThumbUp` / `Icons.Filled.ThumbUp` |
+| Comment | `bubble.left` | `Icons.Outlined.ChatBubbleOutline` |
+| Activity — Run | `figure.run` | `Icons.Filled.DirectionsRun` |
+| Activity — Ride | `figure.outdoor.cycle` | `Icons.Filled.DirectionsBike` |
+| Activity — Swim | `figure.pool.swim` | `Icons.Filled.Pool` |
+| Activity — Hike | `figure.hiking` | `Icons.Filled.Hiking` |
+| Activity — Walk | `figure.walk` | `Icons.Filled.DirectionsWalk` |
+| Record (center) | `record.circle` | `Icons.Filled.RadioButtonChecked` |
+| Trophy / PR | `trophy.fill` | `Icons.Filled.EmojiEvents` |
+| Crown / KOM | `crown.fill` | `Icons.Filled.WorkspacePremium` |
+| Maps tab | `map` | `Icons.Filled.Map` |
+| Groups tab | `person.3` | `Icons.Filled.Groups` |
+| Profile tab | `person.crop.circle` | `Icons.Filled.Person` |
+| Search | `magnifyingglass` | `Icons.Filled.Search` |
+| Filter | `slider.horizontal.3` | `Icons.Filled.Tune` |
+| Share | `square.and.arrow.up` | `Icons.Filled.Share` |
+| Heart rate | `heart.fill` | `Icons.Filled.Favorite` |
+| Elevation | `mountain.2.fill` | `Icons.Filled.Terrain` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; Maps Compose + motion are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()` in the `Activity`. Light mode wants dark status-bar icons over the white canvas; coal dark wants light icons. The Record button's glow extends below the gesture-nav inset — let it draw into the bottom inset, but keep the tappable bar inside `Scaffold` insets.
+- **Font scaling**: `sp` honors the user's font scale automatically — scale activity titles, body, metadata. **Pin** the layout-sensitive trio: the **44sp Black hero stats**, the **11sp/17sp 3-up stat grid** (clamp via `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))` around the grid), tab labels, and rank chips — the column alignment breaks if they scale.
+- **TalkBack**: group the activity card as one element — `Modifier.semantics(mergeDescendants = true) { contentDescription = "Casey Reardon's run, Tuesday Morning Run, 8.2 miles in 1:14:23, 9:03 per mile, 27 kudos, 12 comments, 2 hours ago" }`. The Kudos button is a separate node ("Give kudos, 27" / "Kudos given, 28").
+- **Touch targets**: Material guidance is 48.dp. The 56.dp Record button is clear; the kudos thumb is a 36.dp glyph on a 44–48.dp target via padding — verify with `Modifier.minimumInteractiveComponentSize()`.
+- **Contrast**: Strava Orange `#FC4C02` on white passes WCAG AA at 17sp+ SemiBold — do not use it for small body text; keep it on the 17sp `Button` / `View Activity` link and the 15sp `ButtonSm`.
+- **Tabular figures**: `fontFeatureSettings = "tnum"` everywhere there's a stat (pace columns, splits, times) — the Compose equivalent of `.monospacedDigit()`.
+- **Reduce motion**: detect `Settings.Global.ANIMATOR_DURATION_SCALE == 0f` (or a stored pref) — skip the kudos scale bounce + confetti and fall back to an instant color change.
+- **Dynamic color**: do **not** enable Material You `dynamicLightColorScheme()` / `dynamicDarkColorScheme()` — Strava's discipline is a single fixed Orange accent and the coal `#0F0F0F` dark canvas regardless of wallpaper.