# Nike Run Club (iOS) — Jetpack Compose Implementation Guide

Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports NRC's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, the signature Volt run-tracking ring, 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 (NRC's true-black stadium void, radioactive Volt accent, screaming Trade Gothic Condensed) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, a `drawArc` `Canvas` ring instead of a SwiftUI `Circle().trim`, `sp`/`dp` instead of `pt`.

Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and Coil `2.6+` for plan-card photography. No color extraction — NRC's accent system is fixed Volt/Red, so Palette is not needed.

## 1. Color Tokens

```kotlin
// ui/theme/NikeColors.kt
import androidx.compose.ui.graphics.Color

object NikeColors {
    // Nike Brand
    val Volt        = Color(0xFFCCFF00)
    val VoltPressed = Color(0xFF9FCC00)
    val VoltDim     = Color(0xFF8AA800) // light-mode accessible accent
    val Red         = Color(0xFFFA5400)
    val BrakeRed    = Color(0xFFE50916)

    // Canvas & Surfaces
    val Canvas    = Color(0xFF000000) // true black — Nike's stadium void
    val Charcoal  = Color(0xFF0A0A0A)
    val Surface1  = Color(0xFF1A1A1A)
    val Surface2  = Color(0xFF2B2B2B)
    val Divider   = Color(0xFF333333)

    // Text
    val White = Color(0xFFFFFFFF)
    val Gray1 = Color(0xFFB3B3B3)
    val Gray2 = Color(0xFF8E8E8E)
    val Gray3 = Color(0xFF5C5C5C)

    // Heart Rate Zones (workout results "training effect" page)
    val HR1Blue   = Color(0xFF3D87F4)
    val HR2Green  = Color(0xFF48C77E)
    val HR3Yellow = Color(0xFFFFD600)
    val HR4Orange = Color(0xFFFA5400) // same as Red
    val HR5Red    = Color(0xFFE50916)

    // Semantic
    val Warning = Color(0xFFFFC400)
}
```

Wire it into a Material 3 `darkColorScheme` so ripples, dividers, and default component colors inherit the brand. NRC is dark-first by brand design; a light scheme exists only for accessibility — keep the app dark regardless of the system setting.

```kotlin
// ui/theme/Theme.kt
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.MaterialTheme

private val NikeScheme = darkColorScheme(
    primary        = NikeColors.Volt,
    onPrimary      = NikeColors.Canvas,   // black on Volt
    secondary      = NikeColors.Red,
    background      = NikeColors.Canvas,
    onBackground   = NikeColors.White,
    surface        = NikeColors.Surface1,
    onSurface      = NikeColors.White,
    surfaceVariant = NikeColors.Surface2,
    outline        = NikeColors.Divider,
    error          = NikeColors.BrakeRed,
)

@Composable
fun NikeTheme(content: @Composable () -> Unit) =
    MaterialTheme(colorScheme = NikeScheme, typography = NikeTypography, content = content)
```

## 2. Typography

Trade Gothic Next LT (Heavy/Bold Condensed) is proprietary (Linotype/Monotype). Drop the TTFs in `res/font/` (lowercase, snake_case) and build a `FontFamily`. Fall back to **Oswald** (a close geometric-condensed Google Font) or system condensed. Body/metadata use the system font (Roboto, the SF Pro analog). Stats are tabular — set `fontFeatureSettings = "tnum"`.

```kotlin
// ui/theme/NikeType.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 TradeGothic = FontFamily(
    Font(R.font.trade_gothic_next_bold,  FontWeight.Bold),   // 700 Bold Condensed
    Font(R.font.trade_gothic_next_heavy, FontWeight.Black),  // 900 Heavy Condensed
)
// Body / metadata — system (Roboto) is the SF Pro analog
val NikeBodyFamily = FontFamily.Default

private const val TNUM = "tnum" // tabular digits — pace columns must align

// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1, ALL CAPS at call sites)
object NikeText {
    val RunHero     = TextStyle(TradeGothic, fontWeight = FontWeight.Black, fontSize = 88.sp, lineHeight = 84.sp, letterSpacing = 0.5.sp, fontFeatureSettings = TNUM)
    val PreHero     = TextStyle(TradeGothic, fontWeight = FontWeight.Black, fontSize = 64.sp, lineHeight = 61.sp, letterSpacing = 0.4.sp, fontFeatureSettings = TNUM)
    val Headline    = TextStyle(TradeGothic, fontWeight = FontWeight.Black, fontSize = 48.sp, lineHeight = 46.sp, letterSpacing = 0.3.sp)
    val ScreamHdr   = TextStyle(TradeGothic, fontWeight = FontWeight.Black, fontSize = 32.sp, lineHeight = 32.sp, letterSpacing = 0.3.sp)
    val SubHdr      = TextStyle(TradeGothic, fontWeight = FontWeight.Bold,  fontSize = 22.sp, lineHeight = 24.sp, letterSpacing = 0.3.sp)
    val StatLabel   = TextStyle(TradeGothic, fontWeight = FontWeight.Bold,  fontSize = 13.sp, lineHeight = 13.sp, letterSpacing = 1.0.sp)
    val StatValue   = TextStyle(TradeGothic, fontWeight = FontWeight.Black, fontSize = 64.sp, lineHeight = 61.sp, letterSpacing = 0.4.sp, fontFeatureSettings = TNUM)
    val Button      = TextStyle(TradeGothic, fontWeight = FontWeight.Black, fontSize = 17.sp, lineHeight = 17.sp, letterSpacing = 0.5.sp)
    val Achievement = TextStyle(TradeGothic, fontWeight = FontWeight.Black, fontSize = 56.sp, lineHeight = 53.sp, fontFeatureSettings = TNUM)

    // SF Pro analog (Roboto) for body / metadata — mixed case allowed
    val CardTitle = TextStyle(NikeBodyFamily, fontWeight = FontWeight.Bold,     fontSize = 17.sp, lineHeight = 20.sp, letterSpacing = (-0.2).sp)
    val Body      = TextStyle(NikeBodyFamily, fontWeight = FontWeight.Normal,   fontSize = 15.sp, lineHeight = 22.sp, letterSpacing = (-0.1).sp)
    val BodyBold  = TextStyle(NikeBodyFamily, fontWeight = FontWeight.SemiBold, fontSize = 15.sp, lineHeight = 22.sp, letterSpacing = (-0.1).sp)
    val Meta      = TextStyle(NikeBodyFamily, fontWeight = FontWeight.Normal,   fontSize = 13.sp, lineHeight = 17.sp)
    val Caption   = TextStyle(NikeBodyFamily, fontWeight = FontWeight.Medium,   fontSize = 11.sp, lineHeight = 14.sp, letterSpacing = 0.1.sp)
    val Tab       = TextStyle(NikeBodyFamily, fontWeight = FontWeight.SemiBold, fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.3.sp)
}

// Map onto Material 3 slots so stock components inherit the brand
val NikeTypography = Typography(
    displayLarge  = NikeText.RunHero,
    headlineLarge = NikeText.ScreamHdr,
    titleMedium   = NikeText.CardTitle,
    bodyMedium    = NikeText.Body,
    labelSmall    = NikeText.Tab,
)
```

## 3. Signature Components

### Primary Action Button ("START RUN" / "LET'S DO THIS" / "FINISH")

```kotlin
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.spring
import androidx.compose.foundation.background
import androidx.compose.foundation.border
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.graphics.Color
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.platform.LocalHapticFeedback
import androidx.compose.ui.unit.dp

enum class NikeButtonStyle { White, Volt, Outline }

@Composable
fun NikeActionButton(
    title: String, // pass already-UPPERCASE
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    style: NikeButtonStyle = NikeButtonStyle.White,
) {
    val interaction = remember { MutableInteractionSource() }
    val pressed by interaction.collectIsPressedAsState()
    val scale by animateFloatAsState(
        targetValue = if (pressed) 0.98f else 1f,
        animationSpec = spring(dampingRatio = 0.7f, stiffness = 700f),
        label = "ctaScale",
    )
    val haptics = LocalHapticFeedback.current
    val bg = when (style) {
        NikeButtonStyle.White   -> NikeColors.White
        NikeButtonStyle.Volt    -> NikeColors.Volt
        NikeButtonStyle.Outline -> Color.Transparent
    }
    val fg = if (style == NikeButtonStyle.Outline) NikeColors.White else NikeColors.Canvas

    Box(
        modifier = modifier
            .fillMaxWidth()
            .height(56.dp)
            .scale(scale)
            .clip(RoundedCornerShape(32.dp)) // very rounded, not a full pill
            .background(bg)
            .then(if (style == NikeButtonStyle.Outline) Modifier.border(2.dp, NikeColors.White, RoundedCornerShape(32.dp)) else Modifier)
            .clickable(interaction, indication = null) {
                haptics.performHapticFeedback(HapticFeedbackType.LongPress) // heaviest — Nike's committed CTA
                onClick()
            },
        contentAlignment = Alignment.Center,
    ) {
        Text(title, style = NikeText.Button, color = fg)
    }
}
```

### Volt Progress Ring + Run Tracking Screen

```kotlin
import androidx.compose.foundation.Canvas
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.Stroke

@Composable
fun VoltProgressRing(
    progress: Float, // 0f..1f
    modifier: Modifier = Modifier,
    diameter: Dp = 280.dp,
    strokeWidth: Dp = 6.dp,
) {
    val animated by animateFloatAsState(
        targetValue = progress.coerceIn(0f, 1f),
        animationSpec = spring(stiffness = 50f), // smooth fill toward the goal
        label = "ringProgress",
    )
    Canvas(modifier.size(diameter)) {
        val sw = strokeWidth.toPx()
        val inset = sw / 2
        val arcSize = Size(size.width - sw, size.height - sw)
        // Track
        drawArc(
            color = NikeColors.White.copy(alpha = 0.1f),
            startAngle = 0f, sweepAngle = 360f, useCenter = false,
            topLeft = androidx.compose.ui.geometry.Offset(inset, inset),
            size = arcSize,
            style = Stroke(width = sw, cap = StrokeCap.Round),
        )
        // Volt fill — starts at 12 o'clock (-90°), clockwise
        drawArc(
            color = NikeColors.Volt,
            startAngle = -90f, sweepAngle = 360f * animated, useCenter = false,
            topLeft = androidx.compose.ui.geometry.Offset(inset, inset),
            size = arcSize,
            style = Stroke(width = sw, cap = StrokeCap.Round),
        )
    }
}

@Composable
fun NRCStat(label: String, value: String, modifier: Modifier = Modifier) {
    Column(modifier, horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(4.dp)) {
        Text(label.uppercase(), style = NikeText.StatLabel, color = NikeColors.White.copy(alpha = 0.7f))
        Text(value, style = NikeText.StatValue, color = NikeColors.White)
    }
}

@Composable
fun RunTrackingScreen(
    elapsed: String,  // "12:34"
    distance: String, // "1.4"
    pace: String,     // "8:42"
    hr: String,       // "152"
    progress: Float,
    paused: Boolean,
    onPauseToggle: () -> Unit,
    onLock: () -> Unit,
) {
    val haptics = LocalHapticFeedback.current
    Box(
        Modifier.fillMaxSize().background(NikeColors.Canvas),
        contentAlignment = Alignment.TopCenter,
    ) {
        Column(
            Modifier.fillMaxSize().padding(top = 64.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(32.dp),
        ) {
            Row(
                Modifier.fillMaxWidth().padding(horizontal = 24.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
            ) {
                NRCStat("Distance", distance, Modifier.weight(1f))
                NRCStat("Min/Mi", pace, Modifier.weight(1f))
                NRCStat("BPM", hr, Modifier.weight(1f))
            }
            Box(contentAlignment = Alignment.Center) {
                VoltProgressRing(progress)
                Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(4.dp)) {
                    Text(elapsed, style = NikeText.RunHero, color = NikeColors.White)
                    Text("ELAPSED", style = NikeText.StatLabel, color = NikeColors.White.copy(alpha = 0.7f))
                }
            }
            Spacer(Modifier.weight(1f))
            Row(
                Modifier.fillMaxWidth().padding(bottom = 48.dp, end = 16.dp),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Box(
                    Modifier
                        .size(72.dp)
                        .clip(androidx.compose.foundation.shape.CircleShape)
                        .background(if (paused) NikeColors.Volt else NikeColors.White)
                        .clickable {
                            haptics.performHapticFeedback(HapticFeedbackType.LongPress) // heavy
                            onPauseToggle()
                        },
                    contentAlignment = Alignment.Center,
                ) {
                    Icon(
                        if (paused) Icons.Filled.PlayArrow else Icons.Filled.Pause,
                        contentDescription = if (paused) "Resume" else "Pause",
                        tint = NikeColors.Canvas,
                        modifier = Modifier.size(28.dp),
                    )
                }
            }
        }
    }
}
```

### Run Plan Card (Home Feed)

```kotlin
import coil.compose.AsyncImage
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.layout.ContentScale

@Composable
fun RunPlanCard(
    photoUrl: String,
    eyebrow: String,     // "GUIDED RUN · 25 MIN"
    title: String,       // "RECOVERY MILE"
    description: String,  // "Coach Bennett · Easy effort"
    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 = "planScale")
    val haptics = LocalHapticFeedback.current

    Box(
        modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp)
            .height(320.dp)
            .scale(scale)
            .clip(RoundedCornerShape(16.dp)) // no shadow — Nike is flat on black
            .clickable(interaction, indication = null) {
                haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove)
                onClick()
            },
        contentAlignment = Alignment.BottomStart,
    ) {
        AsyncImage(model = photoUrl, contentDescription = null, modifier = Modifier.fillMaxSize(), contentScale = ContentScale.Crop)
        Box(
            Modifier
                .fillMaxSize()
                .background(Brush.verticalGradient(listOf(Color.Transparent, Color.Black.copy(alpha = 0.6f), Color.Black.copy(alpha = 0.85f)))),
        )
        Column(Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(6.dp)) {
            Text(eyebrow.uppercase(), style = NikeText.Caption, color = NikeColors.White.copy(alpha = 0.8f))
            Text(title.uppercase(), style = NikeText.ScreamHdr, color = NikeColors.White)
            Text(description, style = NikeText.Meta, color = NikeColors.White.copy(alpha = 0.85f))
        }
    }
}
```

### Achievement Medal (hexagonal reveal)

```kotlin
import androidx.compose.animation.core.Animatable
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.drawscope.DrawScope

fun DrawScope.hexagonPath(): Path = Path().apply {
    val w = size.width; val h = size.height
    moveTo(w * 0.5f, 0f)
    lineTo(w, h * 0.25f)
    lineTo(w, h * 0.75f)
    lineTo(w * 0.5f, h)
    lineTo(0f, h * 0.75f)
    lineTo(0f, h * 0.25f)
    close()
}

@Composable
fun AchievementMedal(
    milestone: String, // "100"
    label: String,     // "100 MILES"
    subtitle: String,   // "Lifetime distance"
) {
    val scale = remember { Animatable(0.5f) }
    val alpha = remember { Animatable(0f) }
    val haptics = LocalHapticFeedback.current
    LaunchedEffect(Unit) {
        haptics.performHapticFeedback(HapticFeedbackType.Confirm) // .success analog
        alpha.animateTo(1f, spring(stiffness = 200f))
        scale.animateTo(1f, spring(dampingRatio = 0.6f, stiffness = 400f))
    }
    Column(
        Modifier.padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(16.dp),
    ) {
        Box(contentAlignment = Alignment.Center) {
            Canvas(
                Modifier
                    .size(200.dp)
                    .scale(scale.value)
                    .graphicsLayer { this.alpha = alpha.value },
            ) {
                drawPath(
                    hexagonPath(),
                    brush = Brush.linearGradient(listOf(NikeColors.Volt, NikeColors.Red)),
                )
            }
            Text(milestone, style = NikeText.Achievement, color = NikeColors.Canvas, modifier = Modifier.scale(scale.value))
        }
        Text(label.uppercase(), style = NikeText.SubHdr, color = NikeColors.White)
        Text(subtitle, style = NikeText.Body, color = NikeColors.Gray1)
    }
}
```

### Heart Rate Zone Bar

```kotlin
@Composable
fun HRZoneBar(times: List<Float>, modifier: Modifier = Modifier) {
    val zones = listOf(
        NikeColors.HR1Blue to "Z1 Easy",
        NikeColors.HR2Green to "Z2 Steady",
        NikeColors.HR3Yellow to "Z3 Mod",
        NikeColors.HR4Orange to "Z4 Hard",
        NikeColors.HR5Red to "Z5 Max",
    )
    val total = times.sum().coerceAtLeast(1f)
    Column(modifier, verticalArrangement = Arrangement.spacedBy(12.dp)) {
        Row(
            Modifier.fillMaxWidth().height(8.dp).clip(RoundedCornerShape(4.dp)),
        ) {
            times.forEachIndexed { i, t ->
                Box(Modifier.fillMaxHeight().weight((t / total).coerceAtLeast(0.001f)).background(zones[i].first))
            }
        }
        Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
            zones.forEach { (c, label) ->
                Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(4.dp)) {
                    Box(Modifier.size(6.dp).clip(androidx.compose.foundation.shape.CircleShape).background(c))
                    Text(label.uppercase(), style = NikeText.Caption, color = NikeColors.White)
                }
            }
        }
    }
}
```

## 4. The Volt Progress Ring (signature interaction)

The 280.dp Volt ring inside the Run Tracking screen is NRC's defining moment — the closest a phone gets to feeling like a piece of equipment. Implemented above in §3 via `Canvas` + `drawArc`: a `rgba(255,255,255,0.1)` full-circle track, a Volt sweep from `-90°` (12 o'clock) clockwise, both with `StrokeCap.Round` (never sharp caps). The 88.sp Trade Gothic elapsed time sits dead-center, cropped tight by the `84.sp` line height so it kisses the ring's inner edge — that tight crop is intentional Nike.

Drive `progress` from the run goal and let the ring tick discretely per mile/km/interval:

```kotlin
// In the run ViewModel — emit progress toward the goal each tick
val progress by produceState(0f, distanceMeters, goalMeters) {
    value = (distanceMeters / goalMeters).coerceIn(0f, 1f)
}
// Pass straight into VoltProgressRing(progress) — the spring(stiffness = 50f) gives the
// smooth linear-feeling fill; for hard 1s ticks per unit swap to tween(1000, easing = LinearEasing).
```

A `lock` affordance (48.dp `Surface2` circle, white lock glyph, top-right inset 16.dp) disables accidental mid-run taps; render it as an overlay aligned `Alignment.TopEnd`.

## 5. Bottom Navigation (Tab Bar)

Use Material 3 `NavigationBar`. NRC's iOS tab bar is a plain black bar with a 0.5pt `#333333` hairline — Android has no live blur but none is needed here (the bar is opaque `#000000`). 5 tabs: Home / Activity / Coach / Goal / Profile. Active is **white icon + a 4.dp Volt dot** under it; Material's pill indicator is suppressed.

```kotlin
@Composable
fun NikeBottomBar(selected: Int, onSelect: (Int) -> Unit) {
    val haptics = LocalHapticFeedback.current
    NavigationBar(
        containerColor = NikeColors.Canvas,
        tonalElevation = 0.dp,
    ) {
        val items = listOf(
            "Home"     to Icons.Filled.Home,
            "Activity" to Icons.Filled.BarChart,
            "Coach"    to Icons.Filled.Person,
            "Goal"     to Icons.Filled.TrackChanges,
            "Profile"  to Icons.Filled.AccountCircle,
        )
        items.forEachIndexed { i, (label, icon) ->
            val active = selected == i
            NavigationBarItem(
                selected = active,
                onClick = {
                    haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove) // .selection — never heavy on tabs
                    onSelect(i)
                },
                icon = {
                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
                        Icon(icon, contentDescription = label, modifier = Modifier.size(24.dp))
                        Spacer(Modifier.height(4.dp))
                        Box(
                            Modifier
                                .size(4.dp)
                                .clip(androidx.compose.foundation.shape.CircleShape)
                                .background(if (active) NikeColors.Volt else Color.Transparent),
                        )
                    }
                },
                label = { Text(label, style = NikeText.Tab) },
                colors = NavigationBarItemDefaults.colors(
                    selectedIconColor = NikeColors.White,
                    selectedTextColor = NikeColors.White,
                    unselectedIconColor = NikeColors.Gray3,   // #5C5C5C
                    unselectedTextColor = NikeColors.Gray2,   // #8E8E8E
                    indicatorColor = Color.Transparent, // no Material pill — NRC uses a Volt dot
                ),
            )
        }
    }
}
```

## 6. Motion

NRC motion is deterministic and committed — linear ticks on the ring, heavy haptics on commitment, springy medal reveals.

| Moment | Compose recipe |
|--------|----------------|
| Progress ring fill | `animateFloatAsState` `spring(stiffness = 50f)`, or `tween(1000, LinearEasing)` for hard per-unit ticks |
| START RUN tap | scale 1 → 0.98 `spring(0.7f)` + `HapticFeedbackType.LongPress` (heaviest), then 400ms `Crossfade` to Run Tracking |
| Pause tap | circle scale 1 → 0.95 + heavy haptic, morph to Resume (Volt) + Stop (red) over 250ms spring |
| Achievement reveal | `Animatable` scale 0.5 → 1 `spring(response 0.4, damping 0.6)` + alpha fade + Confirm haptic; confetti burst |
| Tab switch | Volt dot slides via `SharedTransitionLayout`/`animateDpAsState`, icon cross-fades 200ms, `TextHandleMove` haptic |
| PR confetti | 16-particle Volt burst + `LongPress` heavy haptic |

```kotlin
// Volt confetti burst on a PR / milestone — 16 particles
@Composable
fun VoltConfetti(trigger: Boolean) {
    val haptics = LocalHapticFeedback.current
    val t = remember { Animatable(0f) }
    LaunchedEffect(trigger) {
        if (trigger) {
            haptics.performHapticFeedback(HapticFeedbackType.LongPress) // heavy
            t.snapTo(0f); t.animateTo(1f, tween(600))
        }
    }
    Canvas(Modifier.fillMaxSize()) {
        if (t.value == 0f) return@Canvas
        val cx = size.width / 2; val cy = size.height / 2
        repeat(16) { i ->
            val angle = (i / 16f) * 2f * Math.PI
            val r = 320f * t.value
            drawCircle(
                color = NikeColors.Volt.copy(alpha = 1f - t.value),
                radius = 6f,
                center = androidx.compose.ui.geometry.Offset(
                    cx + (r * kotlin.math.cos(angle)).toFloat(),
                    cy + (r * kotlin.math.sin(angle)).toFloat(),
                ),
            )
        }
    }
}
```

Haptics: prefer `LocalHapticFeedback`. For the heaviest "START RUN"/"PAUSE" feel use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.LONG_PRESS)` or a `Vibrator` `VibrationEffect.createOneShot(25, VibrationEffect.DEFAULT_AMPLITUDE)`.

## 7. Icons

NRC ships custom glyphs; the closest first-party set is `androidx.compose.material:material-icons-extended`. The hexagonal medal is NOT an icon — draw it via `Canvas` (§3); the Volt active-tab dot is also drawn, not an icon.

| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
|---------|-----------------|--------------------------|
| Pause | `pause.fill` | `Icons.Filled.Pause` |
| Play / Resume | `play.fill` | `Icons.Filled.PlayArrow` |
| Stop | `stop.fill` | `Icons.Filled.Stop` |
| Lock | `lock.fill` | `Icons.Filled.Lock` |
| GPS strength | `location.fill` | `Icons.Filled.LocationOn` |
| Coach Bennett | `person.crop.circle.fill` | `Icons.Filled.AccountCircle` |
| Home (tab) | `house` / `house.fill` | `Icons.Filled.Home` |
| Activity (tab) | `chart.bar` / `.fill` | `Icons.Filled.BarChart` |
| Coach (tab) | `person.crop.square` / `.fill` | `Icons.Filled.Person` |
| Goal (tab) | `target` | `Icons.Filled.TrackChanges` |
| Profile (tab) | `person.circle` / `.fill` | `Icons.Filled.AccountCircle` |
| Heart rate | `heart.fill` | `Icons.Filled.Favorite` |
| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
| Settings | `gearshape.fill` | `Icons.Filled.Settings` |
| Music | `music.note` | `Icons.Filled.MusicNote` |

## 8. Minimum SDK & Accessibility Notes

- **minSdk 24** (Compose floor is 21; `Canvas`-based ring + modern motion are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
- **Edge-to-edge**: call `enableEdgeToEdge()` in the `Activity`; the true-black canvas wants `WindowCompat` light-content system bars. The top app bar / Run Tracking stats sit below the camera cutout; the pause control respects the gesture-nav inset via `Scaffold`/`windowInsetsPadding`.
- **Font scaling**: `sp` honors the user's font scale automatically — scale body, metadata, and plan-card titles. Pin the visual identity (88sp `RunHero`, 64sp `StatValue`, 17sp `Button`, 13sp `StatLabel`, 10sp tab labels) by deriving size from `dp` or wrapping in `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))` — NRC's identity depends on these exact sizes.
- **Tabular digits**: keep `fontFeatureSettings = "tnum"` on every stat (pace, distance, elapsed, BPM, splits) so columns align on the results page.
- **TalkBack**: make the Run Tracking screen read each stat as a separate node so a user can spot-check one at a time — e.g. "Run in progress, 12 minutes 34 seconds elapsed", "1.4 miles", "8 minute 42 second per mile pace", "heart rate 152 BPM", then "Pause button". Use `Modifier.semantics { contentDescription = ... }` per stat.
- **Touch targets**: Material guidance is 48.dp minimum. The 72.dp pause circle and 56.dp CTA clear it; give the 48.dp lock circle its full hit area.
- **Contrast**: Volt `#CCFF00` on `#000000` passes WCAG AAA at all sizes; Volt on white FAILS — use `VoltDim` `#8AA800` on any light surface. `#8E8E8E` tab labels on black pass AA at 10sp+; validate the 11sp `Caption`.
- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, skip the medal scale spring and the confetti burst — fade the medal in over 300ms with no scale change; keep the ring fill (it conveys state, not decoration).
- **Dynamic color**: do **not** enable Material You `dynamicDarkColorScheme()` — NRC's brand requires the fixed `#000000` canvas and the radioactive `#CCFF00` Volt regardless of wallpaper. Keep the app dark even when the system is light (light mode is an accessibility-only fallback using `VoltDim`).