designmd-forge 1.2.0

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

@@ -0,0 +1,635 @@
+# WHOOP (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports WHOOP's instrument-panel aesthetic to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, the Recovery ring with red→yellow→green interpolation, the strain bar, the sleep stage chart, neon glows, 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 (WHOOP's pitch-black cockpit canvas, neon Strain Green, the score-driven Recovery ramp, tabular DIN numerals, neon-glow elevation) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `drawArc`/`Canvas` instead of SwiftUI `Path`, a translucent `Surface` instead of `.systemThinMaterialDark`, `sp`/`dp` instead of `pt`. WHOOP is dark-canvas-only by design — there is no light scheme.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3. No remote-image or color-extraction libraries are needed — WHOOP's palette is fixed brand chrome and the Recovery color is computed, not extracted.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/WhoopColors.kt
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.lerp
+
+object WhoopColors {
+    // Canvas & surfaces (dark-only)
+    val Canvas   = Color(0xFF0A0A0A)
+    val Surface1 = Color(0xFF1C1C1E)
+    val Surface2 = Color(0xFF2A2A2A)
+    val Surface3 = Color(0xFF3A3A3A)
+    val Divider  = Color(0xFF252525)
+    val Hairline = Color(0xFF1A1A1A)
+
+    // Strain (primary brand)
+    val Strain       = Color(0xFF00FF7B)
+    val StrainBright = Color(0xFF67E26B)
+    val StrainDim    = Color(0xFF005F2F)
+
+    // Recovery spectrum
+    val RecoveryRed    = Color(0xFFFF0026)
+    val RecoveryYellow = Color(0xFFFFDE00)
+    val RecoveryGreen  = Color(0xFF16EC06)
+
+    // Sleep
+    val SleepBlue       = Color(0xFF0093E7)
+    val SleepBlueBright = Color(0xFF4FB8FF)
+    val REMPurple       = Color(0xFF9C4DFF)
+    val DeepIndigo      = Color(0xFF3D3DFF)
+    val LightCyan       = Color(0xFF3DD9FF)
+
+    // Text
+    val BrightWhite = Color(0xFFFFFFFF)
+    val SoftWhite   = Color(0xFFF5F5F7)
+    val Gray400     = Color(0xFFA1A1AA)
+    val Gray600     = Color(0xFF5F5F65)
+    val Gray700     = Color(0xFF3F3F45)
+
+    // Semantic
+    val AlertRed   = Color(0xFFFF453A)
+    val WarningAmber = Color(0xFFFFAA00)
+    val InfoBlue   = Color(0xFF0A84FF)
+    val Success    = Color(0xFF30D158)
+    val PremiumGold = Color(0xFFD4AF37)
+
+    /** Recovery ring color for a score 0..100, lerped red→yellow→green. */
+    fun recoveryColor(percent: Float): Color {
+        val p = percent.coerceIn(0f, 100f) / 100f
+        return when {
+            p < 0.33f -> RecoveryRed
+            p < 0.67f -> lerp(RecoveryRed, RecoveryYellow, (p - 0.33f) / 0.34f)
+            else      -> lerp(RecoveryYellow, RecoveryGreen, (p - 0.67f) / 0.33f)
+        }
+    }
+}
+```
+
+WHOOP has **no light mode**. Provide a single `darkColorScheme` — the dark canvas and neon Strain Green are inseparable from the brand.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+
+private val WhoopScheme = darkColorScheme(
+    primary        = WhoopColors.Strain,
+    onPrimary      = WhoopColors.Canvas,   // intentional: black on neon green
+    background     = WhoopColors.Canvas,
+    onBackground   = WhoopColors.SoftWhite,
+    surface        = WhoopColors.Surface1,
+    onSurface      = WhoopColors.SoftWhite,
+    surfaceVariant = WhoopColors.Surface2,
+    outline        = WhoopColors.Divider,
+    error          = WhoopColors.AlertRed,
+)
+
+@Composable
+fun WhoopTheme(content: @Composable () -> Unit) =
+    MaterialTheme(colorScheme = WhoopScheme, typography = WhoopTypography, content = content)
+```
+
+## 2. Typography
+
+WHOOP licenses **DIN 2014**. Drop the TTFs in `res/font/` (lowercase, snake_case) and build a `FontFamily`. Fall back to a tabular sans — bundle Inter (`res/font/inter_*`), the only acceptable substitute because it shares DIN's mechanical, slightly condensed proportions and ships tabular figures.
+
+```kotlin
+// ui/theme/WhoopType.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.text.style.TextGeometricTransform
+import androidx.compose.ui.unit.sp
+
+val Din2014 = FontFamily(
+    Font(R.font.din2014_regular,   FontWeight.Normal),    // 400
+    Font(R.font.din2014_demi,      FontWeight.Medium),    // 500
+    Font(R.font.din2014_bold,      FontWeight.Bold),      // 700
+    Font(R.font.din2014_extrabold, FontWeight.ExtraBold), // 800
+    // Fallback chain: Inter ships tabular figures with similar proportions
+    Font(R.font.inter_regular,     FontWeight.Normal),
+    Font(R.font.inter_bold,        FontWeight.Bold),
+)
+
+// Tabular figures are non-negotiable — apply to every metric value.
+import androidx.compose.ui.text.font.FontFeatureSetting
+private const val TNUM = "tnum"
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1).
+object WhoopText {
+    val RecoveryHero = TextStyle(Din2014, fontWeight = FontWeight.ExtraBold, fontSize = 76.sp, lineHeight = 76.sp, letterSpacing = (-1.6).sp, fontFeatureSettings = TNUM)
+    val StrainHero   = TextStyle(Din2014, fontWeight = FontWeight.ExtraBold, fontSize = 56.sp, lineHeight = 56.sp, letterSpacing = (-1.0).sp, fontFeatureSettings = TNUM)
+    val SleepHero    = TextStyle(Din2014, fontWeight = FontWeight.ExtraBold, fontSize = 48.sp, lineHeight = 48.sp, letterSpacing = (-0.8).sp, fontFeatureSettings = TNUM)
+    val SectionCaps  = TextStyle(Din2014, fontWeight = FontWeight.Bold,      fontSize = 14.sp, lineHeight = 14.sp, letterSpacing = 1.6.sp)  // UPPERCASE
+    val LargeNav     = TextStyle(Din2014, fontWeight = FontWeight.Bold,      fontSize = 24.sp, lineHeight = 28.sp, letterSpacing = (-0.2).sp)
+    val Subhead      = TextStyle(Din2014, fontWeight = FontWeight.Bold,      fontSize = 18.sp, lineHeight = 22.sp)
+    val CardTitle    = TextStyle(Din2014, fontWeight = FontWeight.Medium,    fontSize = 15.sp, lineHeight = 19.sp, letterSpacing = (-0.05).sp)
+    val Body         = TextStyle(Din2014, fontWeight = FontWeight.Normal,    fontSize = 14.sp, lineHeight = 20.sp)
+    val MetaCaps     = TextStyle(Din2014, fontWeight = FontWeight.Bold,      fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 1.2.sp)  // UPPERCASE
+    val MetricValue  = TextStyle(Din2014, fontWeight = FontWeight.Bold,      fontSize = 18.sp, lineHeight = 18.sp, fontFeatureSettings = TNUM)
+    val MetricLabel  = TextStyle(Din2014, fontWeight = FontWeight.Medium,    fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.6.sp)  // UPPERCASE
+    val Button       = TextStyle(Din2014, fontWeight = FontWeight.Bold,      fontSize = 14.sp, lineHeight = 14.sp, letterSpacing = 1.0.sp)  // UPPERCASE
+    val Tab          = TextStyle(Din2014, fontWeight = FontWeight.Bold,      fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.8.sp)  // UPPERCASE
+    val ChartAxis    = TextStyle(Din2014, fontWeight = FontWeight.Medium,    fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.2.sp, fontFeatureSettings = TNUM)
+}
+
+// Headers/labels are uppercased at the call site (text.uppercase()) — Compose has no text-transform.
+
+val WhoopTypography = Typography(
+    displayLarge  = WhoopText.RecoveryHero,
+    headlineLarge = WhoopText.LargeNav,
+    titleLarge    = WhoopText.Subhead,
+    titleMedium   = WhoopText.CardTitle,
+    bodyMedium    = WhoopText.Body,
+    labelSmall    = WhoopText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Primary CTA (instrument-panel button — 4dp radius, never a pill)
+
+```kotlin
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.spring
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun WhoopPrimaryButton(
+    label: String, // pass already-uppercase or call label.uppercase()
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by animateFloatAsState(if (pressed) 0.98f else 1f, label = "ctaScale")
+    val haptics = LocalHapticFeedback.current
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .heightIn(min = 48.dp)
+            .scale(scale)
+            .clip(RoundedCornerShape(4.dp)) // instrument-panel rectangle
+            .background(if (pressed) WhoopColors.StrainBright else WhoopColors.Strain)
+            .clickable(interaction, indication = null) {
+                haptics.performHapticFeedback(HapticFeedbackType.LongPress) // ~iOS medium impact
+                onClick()
+            }
+            .padding(horizontal = 28.dp, vertical = 14.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(label.uppercase(), style = WhoopText.Button, color = WhoopColors.Canvas)
+    }
+}
+
+@Composable
+fun WhoopOutlineButton(label: String, onClick: () -> Unit, modifier: Modifier = Modifier) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .heightIn(min = 48.dp)
+            .clip(RoundedCornerShape(4.dp))
+            .border(1.5.dp, WhoopColors.Strain, RoundedCornerShape(4.dp))
+            .clickable(onClick = onClick)
+            .padding(horizontal = 28.dp, vertical = 14.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(label.uppercase(), style = WhoopText.Button, color = WhoopColors.Strain)
+    }
+}
+```
+
+### Strain Bar (gradient fill + sliding white marker)
+
+```kotlin
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.unit.Dp
+
+@Composable
+fun StrainBar(
+    currentStrain: Float, // 0f..21f
+    modifier: Modifier = Modifier,
+    height: Dp = 12.dp,
+) {
+    val fraction = (currentStrain / 21f).coerceIn(0f, 1f)
+    val animFraction by animateFloatAsState(
+        targetValue = fraction,
+        animationSpec = spring(dampingRatio = 0.7f, stiffness = 250f), // response ~0.5
+        label = "strainFill",
+    )
+    Column(verticalArrangement = Arrangement.spacedBy(6.dp)) {
+        // Tick labels at 8/10/14/18 → 0.4/0.5/0.7/0.9
+        BoxWithConstraints(Modifier.fillMaxWidth().height(14.dp)) {
+            val w = maxWidth
+            listOf(0.4f to "LOW", 0.5f to "MOD", 0.7f to "HIGH", 0.9f to "ALL-OUT").forEach { (pos, lbl) ->
+                Text(
+                    lbl,
+                    style = WhoopText.ChartAxis,
+                    color = WhoopColors.Gray400,
+                    modifier = Modifier.offset(x = w * pos),
+                )
+            }
+        }
+        BoxWithConstraints(Modifier.fillMaxWidth().height(height)) {
+            val w = maxWidth
+            Box(Modifier.fillMaxSize().clip(RoundedCornerShape(6.dp)).background(WhoopColors.Surface2))
+            Box(
+                Modifier
+                    .fillMaxHeight()
+                    .width(w * animFraction)
+                    .clip(RoundedCornerShape(6.dp))
+                    .background(
+                        Brush.horizontalGradient(
+                            listOf(WhoopColors.StrainDim, WhoopColors.Strain, WhoopColors.StrainBright)
+                        )
+                    )
+            )
+            Box(
+                Modifier
+                    .offset(x = (w * animFraction - 8.dp).coerceAtLeast(0.dp))
+                    .align(Alignment.CenterStart)
+                    .size(16.dp)
+                    .clip(CircleShape)
+                    .background(WhoopColors.BrightWhite)
+            )
+        }
+    }
+}
+```
+
+### Sleep Stage Chart (horizontal stacked bar)
+
+```kotlin
+enum class SleepStage(val color: Color) {
+    Awake(WhoopColors.Gray600),
+    Light(WhoopColors.LightCyan),
+    Deep(WhoopColors.DeepIndigo),
+    Rem(WhoopColors.REMPurple),
+}
+
+data class SleepSegment(val stage: SleepStage, val durationMin: Int)
+
+@Composable
+fun SleepStageChart(
+    segments: List<SleepSegment>,
+    startLabel: String, // "11 PM"
+    endLabel: String,   // "7 AM"
+    modifier: Modifier = Modifier,
+) {
+    val total = segments.sumOf { it.durationMin }.coerceAtLeast(1)
+    Column(modifier, verticalArrangement = Arrangement.spacedBy(6.dp)) {
+        Row(
+            Modifier
+                .fillMaxWidth()
+                .height(32.dp)
+                .clip(RoundedCornerShape(4.dp)),
+            horizontalArrangement = Arrangement.spacedBy(1.dp),
+        ) {
+            segments.forEach { seg ->
+                Box(
+                    Modifier
+                        .weight(seg.durationMin.toFloat() / total)
+                        .fillMaxHeight()
+                        .background(seg.stage.color)
+                )
+            }
+        }
+        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
+            Text(startLabel, style = WhoopText.ChartAxis, color = WhoopColors.Gray400)
+            Text(endLabel, style = WhoopText.ChartAxis, color = WhoopColors.Gray400)
+        }
+    }
+}
+```
+
+### Activity Row
+
+```kotlin
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ChevronRight
+import androidx.compose.material.icons.filled.DirectionsRun
+import androidx.compose.material3.Icon
+import androidx.compose.ui.graphics.SolidColor
+
+@Composable
+fun ActivityRow(
+    icon: androidx.compose.ui.graphics.vector.ImageVector,
+    name: String,
+    strain: Float,
+    duration: String,
+    startTime: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column {
+        Row(
+            modifier = modifier
+                .fillMaxWidth()
+                .height(72.dp)
+                .background(WhoopColors.Canvas)
+                .clickable(onClick = onClick)
+                .padding(horizontal = 16.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+            Box(
+                Modifier
+                    .size(40.dp)
+                    .border(1.5.dp, WhoopColors.Strain, CircleShape),
+                contentAlignment = Alignment.Center,
+            ) {
+                Icon(icon, contentDescription = null, tint = WhoopColors.Strain, modifier = Modifier.size(18.dp))
+            }
+            Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(2.dp)) {
+                Text(name, style = WhoopText.CardTitle, color = WhoopColors.BrightWhite)
+                Text("%.1f".format(strain), style = WhoopText.MetricValue, color = WhoopColors.Strain)
+            }
+            Column(horizontalAlignment = Alignment.End, verticalArrangement = Arrangement.spacedBy(2.dp)) {
+                Text(duration, style = WhoopText.Body, color = WhoopColors.SoftWhite)
+                Text(startTime, style = WhoopText.ChartAxis, color = WhoopColors.Gray400)
+            }
+            Icon(Icons.Filled.ChevronRight, contentDescription = null, tint = WhoopColors.Gray600, modifier = Modifier.size(12.dp))
+        }
+        Box(Modifier.fillMaxWidth().height(0.5.dp).background(WhoopColors.Divider))
+    }
+}
+```
+
+### Metric Card (hairline border, no shadow)
+
+```kotlin
+@Composable
+fun MetricCard(label: String, modifier: Modifier = Modifier, content: @Composable ColumnScope.() -> Unit) {
+    Column(
+        modifier = modifier
+            .clip(RoundedCornerShape(12.dp))
+            .background(WhoopColors.Surface1)
+            .border(1.dp, WhoopColors.Divider, RoundedCornerShape(12.dp))
+            .padding(20.dp),
+        verticalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        Text(label.uppercase(), style = WhoopText.MetricLabel, color = WhoopColors.Gray400)
+        content()
+    }
+}
+```
+
+## 4. Recovery Ring (red→yellow→green interpolation) + Neon Glows
+
+WHOOP's hero. The ring is **open at the top** (a small gap between stroke start and end), drawn with `Canvas`/`drawArc`. Its color is computed by score via `WhoopColors.recoveryColor`. Active/live elements get a **neon glow** instead of a neutral shadow — Android has no live blur, so approximate the iOS `rgba(0,255,123,0.18) 0 0 12px` halo with a stacked, blurred `Box` (`Modifier.blur` + `RenderEffect`) or a soft radial-gradient backdrop.
+
+```kotlin
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.Dp
+
+@Composable
+fun RecoveryRing(
+    percent: Float, // 0f..100f
+    modifier: Modifier = Modifier,
+    diameter: Dp = 240.dp,
+    strokeWidth: Dp = 10.dp,
+) {
+    val animPercent by animateFloatAsState(
+        targetValue = percent,
+        animationSpec = spring(dampingRatio = 0.78f, stiffness = 80f), // ~1200ms ease-out w/ slight overshoot
+        label = "recoveryFill",
+    )
+    val ringColor = WhoopColors.recoveryColor(percent)
+
+    Box(modifier.size(diameter), contentAlignment = Alignment.Center) {
+        Canvas(Modifier.size(diameter)) {
+            val sw = strokeWidth.toPx()
+            val inset = sw / 2
+            val arcSize = Size(size.width - sw, size.height - sw)
+            val topLeft = Offset(inset, inset)
+            val gapDeg = 4f // ~2pt visual gap, "open" at top
+            val startAngle = -90f + gapDeg / 2f
+            val sweepFull = 360f - gapDeg
+            // Track
+            drawArc(
+                color = WhoopColors.Surface2,
+                startAngle = startAngle,
+                sweepAngle = sweepFull,
+                useCenter = false,
+                topLeft = topLeft,
+                size = arcSize,
+                style = Stroke(width = sw, cap = StrokeCap.Round),
+            )
+            // Fill — proportional to score
+            drawArc(
+                color = ringColor,
+                startAngle = startAngle,
+                sweepAngle = sweepFull * (animPercent / 100f),
+                useCenter = false,
+                topLeft = topLeft,
+                size = arcSize,
+                style = Stroke(width = sw, cap = StrokeCap.Round),
+            )
+        }
+        Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(4.dp)) {
+            Text("RECOVERY", style = WhoopText.SectionCaps, color = WhoopColors.Gray400)
+            Row(verticalAlignment = Alignment.Bottom) {
+                Text("${percent.toInt()}", style = WhoopText.RecoveryHero, color = WhoopColors.BrightWhite)
+                Text("%", style = WhoopText.SectionCaps.copy(fontSize = 24.sp), color = WhoopColors.BrightWhite)
+            }
+        }
+    }
+}
+
+/** Soft neon halo — Android's analog to iOS's `0 0 12px rgba(0,255,123,0.18)` glow. */
+fun Modifier.neonGlow(color: Color, radius: Dp, alpha: Float): Modifier = this.then(
+    Modifier.drawBehind {
+        drawCircle(
+            brush = Brush.radialGradient(
+                colors = listOf(color.copy(alpha = alpha), Color.Transparent),
+                radius = radius.toPx(),
+            ),
+            radius = radius.toPx(),
+        )
+    }
+)
+```
+
+### Live Workout Banner (heavy green glow + pulsing dot)
+
+```kotlin
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
+
+@Composable
+fun LiveWorkoutBanner(elapsed: String, currentStrain: Float, modifier: Modifier = Modifier) {
+    val t = rememberInfiniteTransition(label = "liveBanner")
+    val dotAlpha by t.animateFloat(
+        initialValue = 0.4f, targetValue = 1f,
+        animationSpec = infiniteRepeatable(tween(1200), RepeatMode.Reverse),
+        label = "dotPulse",
+    )
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(28.dp)
+            .background(WhoopColors.Strain)
+            .neonGlow(WhoopColors.Strain, radius = 48.dp, alpha = 0.32f)
+            .padding(horizontal = 16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        Box(
+            Modifier
+                .size(8.dp)
+                .clip(CircleShape)
+                .background(WhoopColors.Canvas.copy(alpha = dotAlpha))
+        )
+        Text(
+            "LIVE — $elapsed · STRAIN ${"%.1f".format(currentStrain)}",
+            style = WhoopText.MetaCaps,
+            color = WhoopColors.Canvas,
+        )
+    }
+}
+```
+
+## 5. Bottom Navigation (Tab Bar)
+
+Use Material 3 `NavigationBar` with the four canonical tabs (Overview, Coaching, Community, Stats). WHOOP's iOS tab bar uses `.systemThinMaterialDark` blur; Android has no first-class live blur, so use a 92%-opaque `Surface1`. **Active tint is Strain Green with a soft glow** — apply `neonGlow` behind the selected icon.
+
+```kotlin
+import androidx.compose.material.icons.filled.BarChart
+import androidx.compose.material.icons.filled.Dashboard
+import androidx.compose.material.icons.filled.Groups
+import androidx.compose.material.icons.filled.SelfImprovement
+import androidx.compose.material3.NavigationBar
+import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.NavigationBarItemDefaults
+
+@Composable
+fun WhoopBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(
+        containerColor = WhoopColors.Surface1.copy(alpha = 0.92f),
+        tonalElevation = 0.dp,
+    ) {
+        val items = listOf(
+            "OVERVIEW"  to Icons.Filled.Dashboard,
+            "COACHING"  to Icons.Filled.SelfImprovement,
+            "COMMUNITY" to Icons.Filled.Groups,
+            "STATS"     to Icons.Filled.BarChart,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = {
+                    val m = if (selected == i)
+                        Modifier.size(22.dp).neonGlow(WhoopColors.Strain, 18.dp, 0.18f)
+                    else Modifier.size(22.dp)
+                    Icon(icon, contentDescription = label, modifier = m)
+                },
+                label = { Text(label, style = WhoopText.Tab) },
+                alwaysShowLabel = true,
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor   = WhoopColors.Strain,
+                    selectedTextColor   = WhoopColors.Strain,
+                    unselectedIconColor = WhoopColors.Gray600,
+                    unselectedTextColor = WhoopColors.Gray600,
+                    indicatorColor      = Color.Transparent, // no Material pill — WHOOP has none
+                ),
+            )
+        }
+    }
+}
+```
+
+## 6. Motion
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Recovery ring fill | `animateFloatAsState` with `spring(dampingRatio = 0.78f, stiffness = 80f)` — ~1200ms ease-out + slight overshoot |
+| Strain marker slide | `animateFloatAsState` with `spring(dampingRatio = 0.7f, stiffness = 250f)` (iOS response 0.5) |
+| Heart-rate beat pulse | `Animatable` keyframes `scale` 1 → 1.15 → 1 over 600ms, looped per beat |
+| Live banner dot | `rememberInfiniteTransition` alpha 0.4 ↔ 1 every 1200ms |
+| Day switcher tap | `animateFloatAsState` scale 1 → 1.08 (spring); `HapticFeedbackType.SegmentTick` |
+| Primary CTA tap | scale 1 → 0.98 over 100ms, then `HapticFeedbackType.LongPress` (~medium impact) |
+| Sleep segment tap | callout `AnimatedVisibility` `slideInVertically + fadeIn` 200ms; `HapticFeedbackType.TextHandleMove` |
+| Sync complete | `Animatable` scale 1 → 1.3 → 1 once; `HapticFeedbackType.Confirm` (API 34) |
+
+```kotlin
+// Heart-rate beat pulse — syncs the heart glyph to the live BPM
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.keyframes
+
+@Composable
+fun HeartPulse(bpm: Int, content: @Composable () -> Unit) {
+    val scale = remember { Animatable(1f) }
+    LaunchedEffect(bpm) {
+        while (true) {
+            scale.animateTo(1.15f, keyframes { durationMillis = 200; 1.15f at 100 })
+            scale.animateTo(1f, tween(400))
+            kotlinx.coroutines.delay((60_000L / bpm.coerceAtLeast(40)) - 600)
+        }
+    }
+    Box(Modifier.scale(scale.value)) { content() }
+}
+```
+
+Haptics: prefer `LocalHapticFeedback`. `HapticFeedbackType.SegmentTick` ≈ iOS `.selection` for the day switcher and strain scrub; `HapticFeedbackType.LongPress` ≈ `.impact(.medium)` for CTAs. For richer control use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CONFIRM)` (API 30+) or a `Vibrator` `VibrationEffect.createOneShot(12, 80)`.
+
+## 7. Icons
+
+WHOOP ships a **proprietary DIN-icon set** — none of the tab glyphs have exact Material twins. Use `androidx.compose.material:material-icons-extended` as a substitute and ship WHOOP's real glyphs as vector drawables loaded via `ImageVector.vectorResource(R.drawable.…)`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Overview tab | `circle.dashed` | `Icons.Filled.Dashboard` (or vector drawable) |
+| Coaching tab | `person.crop.square` | `Icons.Filled.SelfImprovement` |
+| Community tab | `person.3` | `Icons.Filled.Groups` |
+| Stats tab | `chart.bar` | `Icons.Filled.BarChart` |
+| Activity — run | `figure.run` | `Icons.Filled.DirectionsRun` |
+| Activity — cycling | `figure.outdoor.cycle` | `Icons.Filled.DirectionsBike` |
+| Activity — yoga | `figure.yoga` | `Icons.Filled.SelfImprovement` |
+| Activity — strength | `dumbbell.fill` | `Icons.Filled.FitnessCenter` |
+| Heart-rate live | `heart.fill` | `Icons.Filled.Favorite` |
+| Battery | `battery.75` | `Icons.Filled.BatteryFull` |
+| Sync | `arrow.triangle.2.circlepath` | `Icons.Filled.Sync` |
+| Search | `magnifyingglass` | `Icons.Filled.Search` |
+| Row chevron | `chevron.right` | `Icons.Filled.ChevronRight` |
+| Live banner dot | `circle.fill` | `Icons.Filled.Circle` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; `drawArc`, springs, and `RenderEffect` blur are comfortable at 24+; `Modifier.blur` for true glow needs API 31, so the radial-gradient `neonGlow` fallback covers 24–30). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()` in the `Activity` with light-content system bars (the canvas is near-black). The live workout banner should sit *above* the status-bar inset, replacing its background; apply `Scaffold` insets so the tab bar clears the gesture nav.
+- **Font scaling**: `sp` honors the user's font scale — keep it on body, card titles, coaching headlines, and the large nav title. **Pin** every hero metric (76sp Recovery, 56sp Strain, 48sp Sleep), tab labels, chart axes, and metric labels by deriving them from a fixed-`fontScale` `LocalDensity` — they are layout-critical and the ring/bar geometry depends on them not reflowing.
+- **TalkBack**: announce the Recovery ring as `"Recovery 73 percent, high recovery"`; the strain bar as `"Current strain 11.8 out of 21, high range"`; the sleep chart as a single merged node summarizing total + stage percentages. Use `Modifier.semantics(mergeDescendants = true)` on the activity row and CTA.
+- **Touch targets**: Material guidance is 48.dp minimum. Day-switcher chips render at 36.dp visual — pad to 48.dp hit area. The primary CTA is already 48.dp; sleep-stage segments need a 24.dp minimum hit-width even when visually thinner.
+- **Reduce Motion**: respect the system "remove animations" setting — skip the Recovery ring fill (snap to value), the heart-beat pulse, and the live-banner dot pulse; the day switcher should not scale.
+- **Contrast**: Bright White on `#0A0A0A` exceeds AAA. Strain Green `#00FF7B` on `#0A0A0A` meets AA only at large/heavy sizes — keep it for short caps labels, ring/bar fills, and icons, **never body text**. `#A1A1AA` Gray400 is the secondary-text floor; do not push secondary text dimmer than this on the black canvas.
+- **No light mode & no dynamic color**: there is no light scheme, and Material You `dynamicColorScheme()` must stay **off** — WHOOP's identity is the fixed black canvas, neon Strain Green, and the computed Recovery ramp regardless of wallpaper. Force the dark scheme at the root.