designmd-forge 1.2.0

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

@@ -0,0 +1,485 @@
+# Runna (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Runna's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, the signature week strip + session card + structure breakdown as `@Composable`s, navigation, motion, and haptics.
+
+> Why a Compose guide for an iOS-referenced app? The DESIGN.md tokens are platform-neutral. This keeps the *visual* identity (the Indigo-tinted dark canvas, the color-coded plan week strip, the two-color Indigo/Lime system, Lime as action-only) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `Canvas`/`Row(weight)` instead of SwiftUI layout, `dp`/`sp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3. No color extraction — Runna's two-color brand and run-type system are fixed and learned, so Palette is not used. Runna is **dark-first**; an optional light scheme is provided.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/RunnaColors.kt
+import androidx.compose.ui.graphics.Color
+
+object RunColors {
+    // Brand
+    val Indigo        = Color(0xFF4F46E5)
+    val IndigoBright  = Color(0xFF6366F1)
+    val IndigoPressed = Color(0xFF4338CA)
+    val Lime          = Color(0xFFC2F94E)
+    val LimePressed   = Color(0xFFA3D93B)
+
+    // Canvas & Surfaces (Dark, default)
+    val Canvas   = Color(0xFF0E0E16) // Indigo-tinted blue-black, NOT neutral
+    val Surface1 = Color(0xFF181826)
+    val Surface2 = Color(0xFF222234)
+    val Divider  = Color(0xFF2C2C42)
+
+    // Canvas & Surfaces (Light, optional)
+    val LightCanvas  = Color(0xFFF6F6FB)
+    val LightSurface = Color(0xFFFFFFFF)
+    val LightDivider = Color(0xFFE5E5F0)
+
+    // Text
+    val TextPrimary   = Color(0xFFF3F3FB)
+    val TextSecondary = Color(0xFF9C9CB8)
+    val TextTertiary  = Color(0xFF65657E)
+    val TextOnLime    = Color(0xFF1A1A1A) // ONLY text color on Lime
+
+    // Run-type system (FIXED both themes)
+    val RtEasy     = Color(0xFF34D399)
+    val RtTempo    = Color(0xFFFBBF24)
+    val RtInterval = Color(0xFFFB7185)
+    val RtLong     = Color(0xFF4F46E5) // Indigo
+
+    // Semantic
+    val Success = Color(0xFF34D399)
+    val Error   = Color(0xFFFB7185)
+    val Warning = Color(0xFFFBBF24)
+    val PR      = Color(0xFFC2F94E)
+}
+
+enum class RunType(val color: Color, val onColor: Color) {
+    Easy(RunColors.RtEasy, RunColors.TextOnLime),
+    Tempo(RunColors.RtTempo, RunColors.TextOnLime),
+    Interval(RunColors.RtInterval, RunColors.TextOnLime),
+    Long(RunColors.RtLong, Color.White),
+}
+```
+
+Wire it into both schemes. Runna is dark-first; the dark scheme is the signature.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+
+private val RunDark = darkColorScheme(
+    primary        = RunColors.Lime,           // the "go" color
+    onPrimary      = RunColors.TextOnLime,
+    secondary      = RunColors.Indigo,          // structural
+    onSecondary    = Color.White,
+    background     = RunColors.Canvas,
+    onBackground   = RunColors.TextPrimary,
+    surface        = RunColors.Surface1,
+    onSurface      = RunColors.TextPrimary,
+    surfaceVariant = RunColors.Surface2,
+    outline        = RunColors.Divider,
+    error          = RunColors.Error,
+)
+
+private val RunLight = lightColorScheme(
+    primary        = RunColors.Lime,
+    onPrimary      = RunColors.TextOnLime,
+    secondary      = RunColors.Indigo,
+    onSecondary    = Color.White,
+    background     = RunColors.LightCanvas,
+    onBackground   = Color(0xFF15151F),
+    surface        = RunColors.LightSurface,
+    onSurface      = Color(0xFF15151F),
+    surfaceVariant = RunColors.LightDivider,
+    outline        = RunColors.LightDivider,
+    error          = RunColors.Error,
+)
+
+@Composable
+fun RunnaTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) RunDark else RunLight,
+    typography = RunTypography,
+    content = content,
+)
+```
+
+## 2. Typography (M3)
+
+Runna uses **Sora** (Google Fonts, SIL OFL). Drop the TTFs in `res/font/`. Heavy stats, regular prose.
+
+```kotlin
+// ui/theme/RunType.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 Sora = FontFamily(
+    Font(R.font.sora_regular,   FontWeight.Normal),
+    Font(R.font.sora_medium,    FontWeight.Medium),
+    Font(R.font.sora_semibold,  FontWeight.SemiBold),
+    Font(R.font.sora_bold,      FontWeight.Bold),
+    Font(R.font.sora_extrabold, FontWeight.ExtraBold),
+)
+
+object RunText {
+    val ScreenTitle  = TextStyle(Sora, fontWeight = FontWeight.ExtraBold, fontSize = 32.sp, lineHeight = 37.sp, letterSpacing = (-0.4).sp)
+    val PlanTitle    = TextStyle(Sora, fontWeight = FontWeight.ExtraBold, fontSize = 26.sp, lineHeight = 31.sp, letterSpacing = (-0.3).sp)
+    val SessionTitle = TextStyle(Sora, fontWeight = FontWeight.ExtraBold, fontSize = 21.sp, lineHeight = 25.sp, letterSpacing = (-0.3).sp)
+    val Section      = TextStyle(Sora, fontWeight = FontWeight.Bold,      fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = (-0.2).sp)
+    val CardTitle    = TextStyle(Sora, fontWeight = FontWeight.Bold,      fontSize = 18.sp, lineHeight = 23.sp)
+    val Body         = TextStyle(Sora, fontWeight = FontWeight.Normal,    fontSize = 16.sp, lineHeight = 24.sp)
+    val StepItem     = TextStyle(Sora, fontWeight = FontWeight.SemiBold,  fontSize = 15.sp, lineHeight = 21.sp)
+    val Meta         = TextStyle(Sora, fontWeight = FontWeight.Normal,    fontSize = 14.sp, lineHeight = 20.sp)
+    val StatValue    = TextStyle(Sora, fontWeight = FontWeight.ExtraBold, fontSize = 18.sp, lineHeight = 20.sp)
+    val Eyebrow      = TextStyle(Sora, fontWeight = FontWeight.Bold,      fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 1.2.sp)
+    val Button       = TextStyle(Sora, fontWeight = FontWeight.ExtraBold, fontSize = 16.sp, lineHeight = 16.sp, letterSpacing = 0.1.sp)
+    val Pace         = TextStyle(Sora, fontWeight = FontWeight.Bold,      fontSize = 12.sp, lineHeight = 12.sp, letterSpacing = 0.2.sp)
+    val DayNum       = TextStyle(Sora, fontWeight = FontWeight.ExtraBold, fontSize = 14.sp, lineHeight = 14.sp)
+    val Tab          = TextStyle(Sora, fontWeight = FontWeight.SemiBold,  fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.1.sp)
+}
+
+val RunTypography = Typography(
+    headlineLarge = RunText.ScreenTitle,
+    headlineMedium = RunText.Section,
+    titleMedium   = RunText.CardTitle,
+    bodyMedium    = RunText.Body,
+    labelSmall    = RunText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Training-Plan Week Strip
+
+```kotlin
+import androidx.compose.animation.core.*
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+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.alpha
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+
+sealed interface DayState {
+    data object Done : DayState
+    data object Today : DayState
+    data object Rest : DayState
+    data class Upcoming(val type: RunType) : DayState
+}
+data class Day(val weekday: String, val date: Int, val state: DayState)
+
+@Composable
+fun WeekStrip(days: List<Day>, modifier: Modifier = Modifier) {
+    Row(modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(7.dp)) {
+        days.forEachIndexed { i, d ->
+            val a = remember { Animatable(0f) }
+            LaunchedEffect(Unit) { a.animateTo(1f, tween(220, delayMillis = i * 40, easing = EaseOutCubic)) }
+            DayCell(d, Modifier.weight(1f).alpha(a.value))
+        }
+    }
+}
+
+@Composable
+private fun DayCell(d: Day, modifier: Modifier) {
+    val today = d.state is DayState.Today
+    val dateColor = when (d.state) {
+        is DayState.Done -> RunColors.RtEasy
+        is DayState.Today -> Color.White
+        is DayState.Rest -> RunColors.TextTertiary
+        is DayState.Upcoming -> RunColors.TextPrimary
+    }
+    val dotColor = when (val s = d.state) {
+        is DayState.Done -> RunColors.RtEasy
+        is DayState.Today -> RunColors.Lime
+        is DayState.Rest -> RunColors.Divider
+        is DayState.Upcoming -> s.type.color
+    }
+    val bg = when (d.state) {
+        is DayState.Done -> RunColors.RtEasy.copy(alpha = 0.12f)
+        is DayState.Today -> RunColors.Indigo
+        else -> RunColors.Surface1
+    }
+    val border = when (d.state) {
+        is DayState.Done -> RunColors.RtEasy.copy(alpha = 0.35f)
+        is DayState.Today -> RunColors.IndigoBright
+        else -> RunColors.Divider
+    }
+
+    Column(
+        modifier
+            .aspectRatio(0.62f)
+            .clip(RoundedCornerShape(14.dp))
+            .background(bg)
+            .border(1.dp, border, RoundedCornerShape(14.dp))
+            .padding(vertical = 9.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Text(d.weekday, style = RunText.Tab.copy(fontWeight = androidx.compose.ui.text.font.FontWeight.Bold),
+            color = if (today) Color.White else RunColors.TextTertiary)
+        Spacer(Modifier.weight(1f))
+        Text("${d.date}", style = RunText.DayNum, color = dateColor)
+        Box(Modifier.padding(top = 6.dp).size(7.dp).clip(CircleShape).background(dotColor))
+    }
+}
+```
+
+### Guided Run-Session Card
+
+```kotlin
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.PlayArrow
+import androidx.compose.material3.Icon
+import androidx.compose.ui.draw.*
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.text.style.TextAlign
+
+@Composable
+fun SessionCard(
+    tag: String, title: String, distance: String, duration: String, pace: String,
+    onStart: () -> Unit, modifier: Modifier = Modifier,
+) {
+    val appear = remember { Animatable(0.97f) }
+    LaunchedEffect(Unit) { appear.animateTo(1f, tween(300, easing = EaseOutCubic)) }
+    val ix = remember { MutableInteractionSource() }
+    val pressed by ix.collectIsPressedAsState()
+
+    Box(
+        modifier
+            .fillMaxWidth()
+            .scale(appear.value)
+            .alpha(((appear.value - 0.97f) / 0.03f).coerceIn(0f, 1f))
+            .shadow(28.dp, RoundedCornerShape(22.dp), spotColor = RunColors.Indigo.copy(alpha = 0.30f))
+            .clip(RoundedCornerShape(22.dp))
+            .background(Brush.linearGradient(listOf(RunColors.Indigo, Color(0xFF3A33B8))))
+            .padding(18.dp),
+    ) {
+        Box(
+            Modifier.align(Alignment.BottomEnd).offset(x = 34.dp, y = 34.dp)
+                .size(130.dp).clip(CircleShape).background(RunColors.Lime.copy(alpha = 0.14f))
+        )
+        Column {
+            Box(Modifier.clip(RoundedCornerShape(999.dp)).background(RunColors.Lime)
+                .padding(horizontal = 10.dp, vertical = 4.dp)) {
+                Text(tag.uppercase(), style = RunText.Eyebrow.copy(fontSize = 10.sp), color = RunColors.TextOnLime)
+            }
+            Text(title, style = RunText.SessionTitle, color = Color.White, modifier = Modifier.padding(top = 12.dp))
+            Row(Modifier.padding(top = 12.dp), horizontalArrangement = Arrangement.spacedBy(18.dp)) {
+                Stat(distance, "Distance"); Stat(duration, "Duration"); Stat(pace, "Avg pace")
+            }
+            Row(
+                Modifier.padding(top = 16.dp).fillMaxWidth()
+                    .clip(RoundedCornerShape(14.dp))
+                    .background(if (pressed) RunColors.LimePressed else RunColors.Lime)
+                    .clickable(ix, indication = null, onClick = onStart)
+                    .padding(vertical = 13.dp),
+                horizontalArrangement = Arrangement.Center,
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Icon(Icons.Filled.PlayArrow, null, tint = RunColors.TextOnLime, modifier = Modifier.size(16.dp))
+                Spacer(Modifier.width(8.dp))
+                Text("Start guided run", style = RunText.Button, color = RunColors.TextOnLime)
+            }
+        }
+    }
+}
+
+@Composable
+private fun Stat(v: String, l: String) {
+    Column {
+        Text(v, style = RunText.StatValue, color = Color.White)
+        Text(l.uppercase(), style = RunText.Tab.copy(fontSize = 10.sp), color = Color.White.copy(alpha = 0.7f))
+    }
+}
+```
+
+### Workout-Structure Breakdown
+
+```kotlin
+data class WorkoutStep(val code: String, val title: String, val detail: String, val pace: String, val color: Color, val flex: Float)
+
+@Composable
+fun StructureBreakdown(steps: List<WorkoutStep>, modifier: Modifier = Modifier) {
+    val grow = remember { Animatable(0f) }
+    LaunchedEffect(Unit) { grow.animateTo(1f, tween(500, easing = EaseOutCubic)) }
+
+    Column(modifier.fillMaxWidth()) {
+        Text("Workout structure", style = RunText.CardTitle.copy(fontSize = 13.sp),
+            color = RunColors.TextPrimary, modifier = Modifier.padding(bottom = 10.dp))
+
+        Row(Modifier.fillMaxWidth().height(30.dp).clip(RoundedCornerShape(8.dp)),
+            horizontalArrangement = Arrangement.spacedBy(3.dp)) {
+            steps.forEach { s ->
+                Box(Modifier.weight((s.flex * grow.value).coerceAtLeast(0.0001f)).fillMaxHeight().background(s.color))
+            }
+        }
+
+        steps.forEachIndexed { i, s ->
+            Row(
+                Modifier.fillMaxWidth().padding(vertical = 10.dp)
+                    .then(if (i < steps.lastIndex) Modifier.drawBehind {
+                        drawLine(RunColors.Divider, androidx.compose.ui.geometry.Offset(0f, size.height),
+                            androidx.compose.ui.geometry.Offset(size.width, size.height), 1f)
+                    } else Modifier),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(12.dp),
+            ) {
+                Box(Modifier.size(32.dp).clip(RoundedCornerShape(9.dp)).background(s.color),
+                    contentAlignment = Alignment.Center) {
+                    Text(s.code, style = RunText.Eyebrow.copy(fontSize = 11.sp), color = RunColors.TextOnLime)
+                }
+                Column(Modifier.weight(1f)) {
+                    Text(s.title, style = RunText.StepItem.copy(fontWeight = androidx.compose.ui.text.font.FontWeight.Bold), color = RunColors.TextPrimary)
+                    Text(s.detail, style = RunText.Pace.copy(fontWeight = androidx.compose.ui.text.font.FontWeight.Medium, letterSpacing = 0.sp), color = RunColors.TextSecondary)
+                }
+                Column(horizontalAlignment = Alignment.End) {
+                    Text(s.pace, style = RunText.StatValue.copy(fontSize = 13.sp), color = RunColors.TextPrimary)
+                    Text("/km", style = RunText.Tab.copy(fontSize = 10.sp), color = RunColors.TextTertiary)
+                }
+            }
+        }
+    }
+}
+```
+
+### Primary "Go" Button
+
+```kotlin
+@Composable
+fun RunGoButton(title: String, onClick: () -> Unit, modifier: Modifier = Modifier) {
+    val ix = remember { MutableInteractionSource() }
+    val pressed by ix.collectIsPressedAsState()
+    Row(
+        modifier
+            .fillMaxWidth()
+            .scale(if (pressed) 0.98f else 1f)
+            .clip(RoundedCornerShape(14.dp))
+            .background(if (pressed) RunColors.LimePressed else RunColors.Lime)
+            .clickable(ix, indication = null, onClick = onClick)
+            .padding(vertical = 15.dp),
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Icon(Icons.Filled.PlayArrow, null, tint = RunColors.TextOnLime, modifier = Modifier.size(16.dp))
+        Spacer(Modifier.width(8.dp))
+        Text(title, style = RunText.Button, color = RunColors.TextOnLime)
+    }
+}
+```
+
+## 4. Navigation
+
+Runna has a 5-tab bottom strip and no opaque top bar (the plan header lives in scroll content). Active state is just the Lime color — **no Material tint pill**.
+
+```kotlin
+import androidx.compose.material.icons.filled.*
+
+@Composable
+fun RunBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(
+        containerColor = RunColors.Canvas.copy(alpha = 0.94f),
+        tonalElevation = 0.dp,
+    ) {
+        val items = listOf(
+            "Plan"     to Icons.Filled.CalendarMonth,
+            "Run"      to Icons.Filled.DirectionsRun,
+            "Progress" to Icons.Filled.TrendingUp,
+            "Club"     to Icons.Filled.Groups,
+            "Profile"  to Icons.Filled.AccountCircle,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = { Icon(icon, label, Modifier.size(22.dp)) },
+                label = { Text(label, style = RunText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor = RunColors.Lime,    // Lime, no pill
+                    selectedTextColor = RunColors.Lime,
+                    unselectedIconColor = RunColors.TextTertiary,
+                    unselectedTextColor = RunColors.TextTertiary,
+                    indicatorColor = Color.Transparent,    // Runna has no tint pill
+                ),
+            )
+        }
+    }
+}
+```
+
+The plan header is content, not a `TopAppBar`: an eyebrow ("5K PLAN · WEEK 4 OF 8", `RunText.Eyebrow` in `Lime`, 1.2sp tracking, uppercase), a plan title ("Build week", `RunText.PlanTitle`), a meta line, and a trailing "Week 4 ▾" pill (`Surface2`, `Divider` border, 999.dp) that opens a `ModalBottomSheet` week picker.
+
+## 5. Motion
+
+Runna motion is energetic but disciplined — 200–500ms ease-out. Lime presses give a soft haptic; km splits a medium one.
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Week strip load | each cell `Animatable` alpha 0→1 `tween(220, delayMillis = i*40, EaseOutCubic)` |
+| Today cell pulse | one-shot `Animatable` scale `1 → 1.04 → 1` via `animateTo` sequence |
+| Session card entrance | `Animatable` 0.97→1 `tween(300, EaseOutCubic)` + alpha fade |
+| Structure bar grow | each segment `weight` driven by an `Animatable` 0→1 `tween(500, EaseOutCubic)` |
+| Start run | Lime press scale 0.98 + `HapticFeedbackType.LongPress`, then slide-up to live run (Nav transition `tween(350)`) |
+| Live run km | `HapticFeedbackType.LongPress` (medium) on each km; pace counts via `animateIntAsState` |
+| Step complete (live) | row Lime sweep `clipRect` left→right `tween(300)` + check |
+| Tab switch | `Crossfade(tween(200))` |
+| PR celebration | badge `spring(dampingRatio = 0.6f, stiffness = 140f)` + `HapticFeedbackType.Confirm` |
+| Segmented control | indicator `animateDpAsState(tween(220, EaseOutCubic))` |
+
+```kotlin
+// Canonical week-strip stagger
+val a = remember { Animatable(0f) }
+LaunchedEffect(Unit) { a.animateTo(1f, tween(220, delayMillis = i * 40, easing = EaseOutCubic)) }
+// Modifier.alpha(a.value)
+```
+
+Haptics: `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` for the soft Start press and km splits; `HapticFeedbackType.Confirm` for a PR. Auto-sync of a completed run is silent — show a snackbar only on failure.
+
+## 6. Icons
+
+Closest first-party set is `androidx.compose.material:material-icons-extended`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Plan (tab) | `calendar` | `Icons.Filled.CalendarMonth` |
+| Run (tab) | `figure.run` | `Icons.Filled.DirectionsRun` |
+| Progress (tab) | `chart.line.uptrend.xyaxis` | `Icons.Filled.TrendingUp` |
+| Club (tab) | `person.2` / `.fill` | `Icons.Filled.Groups` |
+| Profile (tab) | `person.crop.circle` | `Icons.Filled.AccountCircle` |
+| Start run | `play.fill` | `Icons.Filled.PlayArrow` |
+| Pause / stop | `pause.fill` / `stop.fill` | `Icons.Filled.Pause` / `Icons.Filled.Stop` |
+| Week switcher | `chevron.down` | `Icons.Filled.ExpandMore` |
+| Completed step | `checkmark` | `Icons.Filled.Check` |
+| PR / achievement | `trophy.fill` / `bolt.fill` | `Icons.Filled.EmojiEvents` / `Icons.Filled.Bolt` |
+| Pace / speed | `speedometer` | `Icons.Filled.Speed` |
+| Route map | `map` | `Icons.Filled.Map` |
+| Kudos | `hand.thumbsup.fill` | `Icons.Filled.ThumbUp` |
+| Back / close | `chevron.left` / `xmark` | `Icons.AutoMirrored.Filled.ArrowBack` / `Icons.Filled.Close` |
+| Settings | `gearshape` | `Icons.Filled.Settings` |
+
+## 7. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; modern motion + `Canvas` are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; dark-first wants light-content system bars (dark-content on the optional light theme). The plan header respects the status-bar inset; add bottom content padding for the `NavigationBar` + insets; the run-setup sheet uses `Modifier.imePadding()`.
+- **Tabular numerals**: apply a tabular-figures `FontFeatureSetting` (or a Sora tabular variant) to the live clock/pace/distance so the run screen doesn't shift.
+- **Run-type accessibility**: never color-only — set `Modifier.semantics { contentDescription = "Friday 16, today, intervals" }` on week cells and include the run-type name in step descriptions; expose the structure bar as an ordered list with pace targets.
+- **TalkBack**: announce the session card as "Today, intervals: 6 by 800 meters at 5K pace, 8.4 km, about 48 minutes, average pace 4:52"; the live run speaks periodic pace/distance.
+- **Font scaling**: `sp` honors the user's font scale — keep it on screen/plan/session titles, section, card title, body, step item; pin layout-sensitive text (eyebrow, pace/tag, day-cell number, stat labels, 10sp tab) via `dp`-derived sizing. Cap session title scale so the card doesn't overflow.
+- **Touch targets**: Material guidance is 48.dp — day cells full-cell tappable ≥ 44.dp; Lime Start ≥ 48.dp tall; tab icons 22.dp with 48.dp hit; week-switcher pill ≥ 36.dp.
+- **Contrast**: `#F3F3FB` on `#0E0E16`/`#181826` passes WCAG AA; near-black `#1A1A1A` on Lime `#C2F94E` passes AA strongly; white on the Indigo gradient passes AA at 18sp weight 700 — if Dynamic Type shrinks it, keep weight ≥ Bold.
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, render week strip & structure bar at final state (no stagger/grow), substitute a `Crossfade`, drop the today-cell pulse, and show a static PR badge — keep the run-type colors (they convey state).
+- **Dark mode**: dark-first via `RunDark` (Indigo-tinted `#0E0E16`, NOT neutral). The optional `RunLight` uses `#F6F6FB`. **Runna Indigo `#4F46E5`, Lime `#C2F94E`, and the run-type system are identical in both themes** (athletes read effort/state by color); Lime always pairs with near-black text. Do **not** enable Material You `dynamicColorScheme()` — Runna's two-color brand identity must hold regardless of wallpaper.
+- **Wear OS (companion)**: if shipping a Wear module, mirror pace/distance/current step + Lime progress with large tabular numerals and maximal contrast for mid-run glance-ability.