designmd-forge 1.2.0

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

@@ -0,0 +1,455 @@
+# Noom (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Noom's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, the signature lesson card + food log + weight graph 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 blue→teal lesson card, the sacred green/yellow/red food-color system, fully pill-shaped buttons, the encouraging coach voice) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `Canvas`/`drawPath` instead of SwiftUI `Path`, `dp`/`sp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3. No color extraction — Noom's palette (and especially the food-color system) is a fixed, learned set, so Palette is not used. Noom is **light-first**; a dark scheme is provided.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/NoomColors.kt
+import androidx.compose.ui.graphics.Color
+
+object NoomColors {
+    // Brand
+    val Blue        = Color(0xFF2A5DF6)
+    val BluePressed = Color(0xFF1E47C8)
+    val Teal        = Color(0xFF1FC29B)
+    val Navy        = Color(0xFF0C1B4D)
+
+    // Canvas & Surfaces (Light)
+    val Canvas      = Color(0xFFFBFBFD)
+    val Surface     = Color(0xFFFFFFFF)
+    val SurfaceSub  = Color(0xFFF2F3F7)
+    val DividerLt   = Color(0xFFE6E7EC)
+
+    // Canvas & Surfaces (Dark)
+    val DarkCanvas  = Color(0xFF121212)
+    val DarkSurf1   = Color(0xFF1C1C1E)
+    val DarkSurf2   = Color(0xFF262629)
+    val DarkDivider = Color(0xFF2E2E31)
+
+    // Text
+    val TextPriLt = Color(0xFF1A1A1F)
+    val TextSecLt = Color(0xFF6A6A70)
+    val TextPriDk = Color(0xFFF0F0F2)
+    val TextSecDk = Color(0xFF9A9AA0)
+
+    // Food-color system (FIXED both modes)
+    val FoodGreen  = Color(0xFF34C759)
+    val FoodYellow = Color(0xFFFFC531)
+    val FoodRed    = Color(0xFFFF5A52)
+
+    // Coach
+    val CoachPurple = Color(0xFF7B61FF)
+
+    // Semantic
+    val Success = Color(0xFF34C759)
+    val Error   = Color(0xFFFF5A52)
+    val Flame   = Color(0xFFFF8A3D)
+}
+
+enum class FoodClass(val color: Color, val tintAlpha: Float, val label: String) {
+    Green(NoomColors.FoodGreen, 0.16f, "Green"),
+    Yellow(NoomColors.FoodYellow, 0.16f, "Yellow"),
+    Red(NoomColors.FoodRed, 0.16f, "Red"),
+}
+```
+
+Wire it into both schemes. Noom is light-first and cheerful; the dark scheme keeps brand energy.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+
+private val NoomLight = lightColorScheme(
+    primary        = NoomColors.Blue,
+    onPrimary      = Color(0xFFFFFFFF),
+    background     = NoomColors.Canvas,
+    onBackground   = NoomColors.TextPriLt,
+    surface        = NoomColors.Surface,
+    onSurface      = NoomColors.TextPriLt,
+    surfaceVariant = NoomColors.SurfaceSub,
+    outline        = NoomColors.DividerLt,
+    secondary      = NoomColors.Teal,
+    tertiary       = NoomColors.CoachPurple,
+    error          = NoomColors.Error,
+)
+
+private val NoomDark = darkColorScheme(
+    primary        = NoomColors.Blue,
+    onPrimary      = Color(0xFFFFFFFF),
+    background     = NoomColors.DarkCanvas,
+    onBackground   = NoomColors.TextPriDk,
+    surface        = NoomColors.DarkSurf1,
+    onSurface      = NoomColors.TextPriDk,
+    surfaceVariant = NoomColors.DarkSurf2,
+    outline        = NoomColors.DarkDivider,
+    secondary      = NoomColors.Teal,
+    tertiary       = NoomColors.CoachPurple,
+    error          = NoomColors.Error,
+)
+
+@Composable
+fun NoomTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) NoomDark else NoomLight,
+    typography = NoomTypography,
+    content = content,
+)
+```
+
+## 2. Typography (M3)
+
+Noom uses **Poppins** (Google Fonts, SIL OFL). Drop the TTFs in `res/font/`. Heavy numerals, conversational body.
+
+```kotlin
+// ui/theme/NoomType.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 Poppins = FontFamily(
+    Font(R.font.poppins_regular,   FontWeight.Normal),
+    Font(R.font.poppins_medium,    FontWeight.Medium),
+    Font(R.font.poppins_semibold,  FontWeight.SemiBold),
+    Font(R.font.poppins_bold,      FontWeight.Bold),
+    Font(R.font.poppins_extrabold, FontWeight.ExtraBold),
+)
+
+object NoomText {
+    val ScreenTitle = TextStyle(Poppins, fontWeight = FontWeight.ExtraBold, fontSize = 32.sp, lineHeight = 37.sp, letterSpacing = (-0.4).sp)
+    val Greeting    = TextStyle(Poppins, fontWeight = FontWeight.Bold,      fontSize = 26.sp, lineHeight = 31.sp, letterSpacing = (-0.3).sp)
+    val HeroStat    = TextStyle(Poppins, fontWeight = FontWeight.ExtraBold, fontSize = 24.sp, lineHeight = 27.sp, letterSpacing = (-0.3).sp)
+    val Section     = TextStyle(Poppins, fontWeight = FontWeight.Bold,      fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = (-0.2).sp)
+    val CardTitle   = TextStyle(Poppins, fontWeight = FontWeight.Bold,      fontSize = 18.sp, lineHeight = 23.sp)
+    val Body        = TextStyle(Poppins, fontWeight = FontWeight.Normal,    fontSize = 16.sp, lineHeight = 24.sp)
+    val ListItem    = TextStyle(Poppins, fontWeight = FontWeight.SemiBold,  fontSize = 15.sp, lineHeight = 21.sp)
+    val Meta        = TextStyle(Poppins, fontWeight = FontWeight.Normal,    fontSize = 14.sp, lineHeight = 20.sp)
+    val Eyebrow     = TextStyle(Poppins, fontWeight = FontWeight.SemiBold,  fontSize = 12.sp, lineHeight = 14.sp, letterSpacing = 1.0.sp)
+    val Button      = TextStyle(Poppins, fontWeight = FontWeight.Bold,      fontSize = 16.sp, lineHeight = 16.sp, letterSpacing = 0.1.sp)
+    val Pill        = TextStyle(Poppins, fontWeight = FontWeight.Bold,      fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.2.sp)
+    val Axis        = TextStyle(Poppins, fontWeight = FontWeight.Bold,      fontSize = 9.sp,  lineHeight = 9.sp)
+    val Tab         = TextStyle(Poppins, fontWeight = FontWeight.SemiBold,  fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.1.sp)
+}
+
+val NoomTypography = Typography(
+    headlineLarge = NoomText.ScreenTitle,
+    headlineMedium = NoomText.Section,
+    titleMedium   = NoomText.CardTitle,
+    bodyMedium    = NoomText.Body,
+    labelSmall    = NoomText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Daily Psychology Lesson Card
+
+```kotlin
+import androidx.compose.animation.core.*
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowForward
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.*
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun LessonCard(
+    eyebrow: String, title: String, step: Int, total: Int,
+    onContinue: () -> Unit, modifier: Modifier = Modifier,
+) {
+    val appear = remember { Animatable(0.96f) }
+    LaunchedEffect(Unit) { appear.animateTo(1f, tween(320, easing = EaseOutCubic)) }
+
+    Box(
+        modifier
+            .fillMaxWidth()
+            .scale(appear.value)
+            .alpha((appear.value - 0.96f) / 0.04f)
+            .shadow(26.dp, RoundedCornerShape(20.dp), spotColor = NoomColors.Blue.copy(alpha = 0.22f))
+            .clip(RoundedCornerShape(20.dp))
+            .background(Brush.linearGradient(listOf(NoomColors.Blue, NoomColors.Teal)))
+            .padding(18.dp),
+    ) {
+        // decorative translucent circle off the top-right
+        Box(
+            Modifier
+                .align(Alignment.TopEnd)
+                .offset(x = 30.dp, y = (-30).dp)
+                .size(110.dp)
+                .clip(androidx.compose.foundation.shape.CircleShape)
+                .background(Color.White.copy(alpha = 0.10f))
+        )
+        Column {
+            Text(eyebrow, style = NoomText.Eyebrow, color = Color.White.copy(alpha = 0.85f))
+            Text(title, style = NoomText.CardTitle, color = Color.White,
+                modifier = Modifier.padding(top = 8.dp).fillMaxWidth(0.8f))
+
+            Row(Modifier.padding(top = 14.dp), verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                Box(Modifier.weight(1f).height(6.dp).clip(RoundedCornerShape(3.dp))
+                    .background(Color.White.copy(alpha = 0.25f))) {
+                    Box(Modifier.fillMaxHeight().fillMaxWidth(step.toFloat() / total)
+                        .clip(RoundedCornerShape(3.dp)).background(Color.White))
+                }
+                Text("$step of $total", style = NoomText.Pill, color = Color.White)
+            }
+
+            Row(
+                Modifier.padding(top = 14.dp)
+                    .clip(RoundedCornerShape(999.dp))
+                    .background(Color.White)
+                    .clickable(onClick = onContinue)
+                    .padding(horizontal = 16.dp, vertical = 9.dp),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(6.dp),
+            ) {
+                Text("Continue lesson", style = NoomText.Pill.copy(fontSize = 13.sp), color = NoomColors.Blue)
+                Icon(Icons.AutoMirrored.Filled.ArrowForward, null, tint = NoomColors.Blue, modifier = Modifier.size(13.dp))
+            }
+        }
+    }
+}
+```
+
+### Food Log Row + Stacked Ratio Bar
+
+```kotlin
+import androidx.compose.foundation.shape.CircleShape
+
+@Composable
+fun FoodRatioBar(green: Float, yellow: Float, red: Float, modifier: Modifier = Modifier) {
+    val sum = (green + yellow + red).takeIf { it > 0f } ?: 1f
+    Row(modifier.fillMaxWidth().height(10.dp).clip(RoundedCornerShape(5.dp))) {
+        Box(Modifier.weight(green / sum).fillMaxHeight().background(NoomColors.FoodGreen))
+        Box(Modifier.weight(yellow / sum).fillMaxHeight().background(NoomColors.FoodYellow))
+        Box(Modifier.weight(red / sum).fillMaxHeight().background(NoomColors.FoodRed))
+    }
+}
+
+@Composable
+fun FoodRow(name: String, cls: FoodClass, kcal: Int, modifier: Modifier = Modifier) {
+    Row(
+        modifier
+            .fillMaxWidth()
+            .padding(vertical = 9.dp)
+            .drawBehind {
+                drawLine(NoomColors.DividerLt, androidx.compose.ui.geometry.Offset(0f, size.height),
+                    androidx.compose.ui.geometry.Offset(size.width, size.height), 1f)
+            },
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        Box(Modifier.size(10.dp).clip(CircleShape).background(cls.color))
+        Text(name, style = NoomText.ListItem, color = NoomColors.TextPriLt, modifier = Modifier.weight(1f))
+        Box(
+            Modifier.clip(RoundedCornerShape(999.dp))
+                .background(cls.color.copy(alpha = cls.tintAlpha))
+                .padding(horizontal = 9.dp, vertical = 3.dp)
+        ) { Text(cls.label, style = NoomText.Pill, color = cls.color) }
+        Text("$kcal", style = NoomText.Pill.copy(fontSize = 13.sp), color = NoomColors.TextSecLt,
+            modifier = Modifier.width(52.dp), textAlign = androidx.compose.ui.text.style.TextAlign.End)
+    }
+}
+```
+
+### Weight Graph Card
+
+```kotlin
+import androidx.compose.foundation.Canvas
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.*
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.graphics.drawscope.clipRect
+
+/** points: normalized x:0..1, y:0..1 (0=top). goalY normalized 0..1 */
+@Composable
+fun WeightGraphCard(points: List<Offset>, goalY: Float, modifier: Modifier = Modifier) {
+    val progress = remember { Animatable(0f) }
+    LaunchedEffect(Unit) { progress.animateTo(1f, tween(700, easing = EaseOutCubic)) }
+
+    Column(
+        modifier
+            .fillMaxWidth()
+            .shadow(18.dp, RoundedCornerShape(18.dp), spotColor = NoomColors.Navy.copy(alpha = 0.06f))
+            .clip(RoundedCornerShape(18.dp))
+            .background(NoomColors.Surface)
+            .border(1.dp, NoomColors.DividerLt, RoundedCornerShape(18.dp))
+            .padding(16.dp),
+    ) {
+        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
+            Text("Weight", style = NoomText.CardTitle.copy(fontSize = 14.sp), color = NoomColors.TextPriLt)
+            Text("Last 30 days", style = NoomText.Tab.copy(fontSize = 11.sp), color = NoomColors.TextSecLt)
+        }
+        Row(verticalAlignment = Alignment.Bottom, horizontalArrangement = Arrangement.spacedBy(8.dp),
+            modifier = Modifier.padding(top = 4.dp)) {
+            Text("164.2 lb", style = NoomText.HeroStat, color = NoomColors.TextPriLt)
+            Text("▼ 6.8 lb", style = NoomText.Tab.copy(fontSize = 13.sp, fontWeight = FontWeight.SemiBold),
+                color = NoomColors.Teal)
+        }
+
+        Canvas(Modifier.fillMaxWidth().height(90.dp).padding(top = 6.dp)) {
+            val w = size.width; val h = size.height
+            fun pt(o: Offset) = Offset(o.x * w, o.y * h)
+            val line = Path().apply {
+                moveTo(pt(points.first()).x, pt(points.first()).y)
+                points.drop(1).forEach { lineTo(pt(it).x, pt(it).y) }
+            }
+            val fill = Path().apply {
+                addPath(line); lineTo(w, h); lineTo(0f, h); close()
+            }
+            drawPath(fill, Brush.verticalGradient(
+                0f to NoomColors.Blue.copy(alpha = 0.30f),
+                1f to NoomColors.Blue.copy(alpha = 0.02f)), alpha = progress.value)
+            // dashed teal goal line
+            drawLine(NoomColors.Teal, Offset(4f, goalY * h), Offset(w - 4f, goalY * h), 1.5f,
+                pathEffect = PathEffect.dashPathEffect(floatArrayOf(3f, 4f)), alpha = progress.value)
+            // blue trend, clip-revealed left→right
+            clipRect(right = w * progress.value) {
+                drawPath(line, NoomColors.Blue, style = Stroke(width = 2.5.dp.toPx(), cap = StrokeCap.Round))
+            }
+        }
+
+        Row(Modifier.fillMaxWidth().padding(top = 6.dp), horizontalArrangement = Arrangement.SpaceBetween) {
+            listOf("Apr 14", "Apr 28", "May 12").forEach { Text(it, style = NoomText.Axis, color = NoomColors.TextSecLt) }
+        }
+    }
+}
+```
+
+### Primary Button (Pill)
+
+```kotlin
+@Composable
+fun NoomPrimaryButton(title: String, onClick: () -> Unit, modifier: Modifier = Modifier) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    Box(
+        modifier
+            .fillMaxWidth()
+            .scale(if (pressed) 0.98f else 1f)
+            .clip(RoundedCornerShape(999.dp))
+            .background(if (pressed) NoomColors.BluePressed else NoomColors.Blue)
+            .clickable(interaction, indication = null, onClick = onClick)
+            .padding(vertical = 15.dp, horizontal = 30.dp),
+        contentAlignment = Alignment.Center,
+    ) { Text(title, style = NoomText.Button, color = Color.White) }
+}
+```
+
+## 4. Navigation
+
+Noom has a 5-tab bottom strip and no opaque top bar (the greeting lives in scroll content). Active state is just the Noom Blue color — **no Material tint pill**.
+
+```kotlin
+import androidx.compose.material.icons.filled.*
+
+@Composable
+fun NoomBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(containerColor = NoomColors.Surface, tonalElevation = 0.dp) {
+        val items = listOf(
+            "Today"   to Icons.Filled.Home,
+            "Learn"   to Icons.Filled.MenuBook,
+            "Log"     to Icons.Filled.AddCircle,
+            "Coach"   to Icons.Filled.ChatBubble,
+            "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 = NoomText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor = NoomColors.Blue,   // Noom Blue, no pill
+                    selectedTextColor = NoomColors.Blue,
+                    unselectedIconColor = NoomColors.TextSecDk,
+                    unselectedTextColor = NoomColors.TextSecDk,
+                    indicatorColor = Color.Transparent,    // Noom has no tint pill
+                ),
+            )
+        }
+    }
+}
+```
+
+The screen header is content, not a `TopAppBar`: a greeting ("Good morning, Maya", `NoomText.Greeting`) and a momentum meta line ("Day 24 · You're building momentum", `NoomText.Meta` in `TextSecLt`). The coach surface uses `CoachPurple` accents and a `ModalBottomSheet` composer with a purple send button.
+
+## 5. Motion
+
+Noom motion is warm and encouraging — 200–700ms ease-out. The lesson card scales in; the graph draws; the food bar re-animates on add.
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Lesson card entrance | `Animatable` 0.96→1 `tween(320, EaseOutCubic)` + alpha fade |
+| Weight graph draw-in | `clipRect(right = w * progress)` reveal + fill `alpha = progress`, `tween(700, EaseOutCubic)` |
+| Food ratio bar update | animate each segment `weight` via `animateFloatAsState(tween(400))` when a food is added |
+| New food row | `AnimatedVisibility` `slideInVertically { -it } + fadeIn` `tween(250)` |
+| Segmented control | indicator `animateDpAsState(tween(220, EaseOutCubic))` |
+| Lesson complete | progress bar width `animateFloatAsState(tween(400))` + `HapticFeedbackType.Confirm` |
+| Tab switch | `Crossfade(tween(200))` between destinations |
+| Coach typing | 3 dots `infiniteRepeatable(tween(600), RepeatMode.Reverse)` scale 0.6↔1 |
+
+```kotlin
+// Canonical lesson entrance
+val appear = remember { Animatable(0.96f) }
+LaunchedEffect(Unit) { appear.animateTo(1f, tween(320, easing = EaseOutCubic)) }
+// Modifier.scale(appear.value).alpha((appear.value - 0.96f) / 0.04f)
+```
+
+Haptics: `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.Confirm)` on lesson completion and goal reached; `HapticFeedbackType.LongPress` (soft) on toggle. Auto-save of a logged food is silent — show a brief snackbar only on failure.
+
+## 6. Icons
+
+Closest first-party set is `androidx.compose.material:material-icons-extended`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Today (tab) | `house` / `house.fill` | `Icons.Filled.Home` |
+| Learn (tab) | `book` / `book.fill` | `Icons.Filled.MenuBook` |
+| Log (tab) | `plus.circle` / `.fill` | `Icons.Filled.AddCircle` |
+| Coach (tab) | `bubble.left` / `.fill` | `Icons.Filled.ChatBubble` |
+| Profile (tab) | `person.crop.circle` / `.fill` | `Icons.Filled.AccountCircle` |
+| Lesson CTA arrow | `arrow.right` | `Icons.AutoMirrored.Filled.ArrowForward` |
+| Weight delta down | `arrow.down` | `Icons.Filled.ArrowDownward` |
+| Search / scan | `magnifyingglass` / `barcode.viewfinder` | `Icons.Filled.Search` / `Icons.Filled.QrCodeScanner` |
+| Coach send | `arrow.up.circle.fill` | `Icons.AutoMirrored.Filled.Send` |
+| Streak | `flame.fill` | `Icons.Filled.LocalFireDepartment` |
+| Add food | `plus` | `Icons.Filled.Add` |
+| Back / close | `chevron.left` / `xmark` | `Icons.AutoMirrored.Filled.ArrowBack` / `Icons.Filled.Close` |
+| Goal reached | `checkmark.circle.fill` | `Icons.Filled.CheckCircle` |
+| Settings | `gearshape` | `Icons.Filled.Settings` |
+
+## 7. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; `Canvas` paths + modern motion are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; light-first wants dark-content system bars (light-content in dark mode). The greeting respects the status-bar inset; add bottom content padding for the `NavigationBar` + system insets; the coach composer uses `Modifier.imePadding()`.
+- **Font scaling**: `sp` honors the user's font scale — keep it on screen title, greeting, hero stat, section, card title, body, list item; pin layout-sensitive text (eyebrow, food pill, 9sp axis, 10sp tab) via `dp`-derived sizing. Cap the lesson title scale so the card doesn't overflow.
+- **Food-color accessibility is critical**: never rely on color alone — the dot is always paired with the text label ("Green"/"Yellow"/"Red"). Set `Modifier.semantics { contentDescription = "$name, ${cls.label} food, $kcal calories" }` on each row; expose the ratio bar as "58 percent green, 30 percent yellow, 12 percent red".
+- **TalkBack**: announce the weight graph as a single element summarizing the trend ("Down 6.8 pounds over 30 days, currently 164.2") instead of the path; the lesson card reads eyebrow + title + "step 2 of 5".
+- **Touch targets**: Material guidance is 48.dp — pill buttons ≥ 48.dp tall; food rows full-row tappable, ≥ 44.dp; tab icons 22.dp with 48.dp hit; coach send button 40.dp.
+- **Contrast**: `#1A1A1F` on `#FBFBFD` and `#F0F0F2` on `#121212` pass WCAG AA; white text on the blue→teal gradient passes AA at 18sp weight 700 — if Dynamic Type shrinks it, keep weight ≥ SemiBold; the Yellow food pill needs a darker text token on its light tint to stay AA.
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, render the lesson card and graph at final state (no scale-in/draw), substitute a `Crossfade`, and disable the coach typing pulse.
+- **Dark mode**: invert via `NoomDark` — `#121212` canvas, `#1C1C1E` surface; **Noom Blue `#2A5DF6` and the food-color hues (`#34C759` / `#FFC531` / `#FF5A52`) are identical in both modes** (users read food by color). Do **not** enable Material You `dynamicColorScheme()` — Noom's blue/teal brand and the learned food-color system must hold regardless of wallpaper.