designmd-forge 1.2.0

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

@@ -0,0 +1,455 @@
+# Yelp (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Yelp's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, a half-star `RatingBar`, the review card, the business header, navigation, and motion.
+
+> Why a Compose guide for an iOS-referenced app? The DESIGN.md tokens are platform-neutral. This file keeps the *visual* identity (Yelp's white canvas, the rationed Red, the warm orange-red 5-star scale, the review wall) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `ModalBottomSheet` for filters, `dp`/`sp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and [Coil](https://coil-kt.github.io/coil/) `2.6+` for business photos and avatars. No color extraction — Yelp's palette is fixed brand colors, so Palette is not needed. Yelp is light-mode-first; a full dark scheme is provided.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/YelpColors.kt
+import androidx.compose.ui.graphics.Color
+
+object YelpColors {
+    // Brand (interactive)
+    val Red        = Color(0xFFFF1A1A)
+    val RedLogo    = Color(0xFFD32323)
+    val RedPressed = Color(0xFFB81E1E)
+
+    // Rating
+    val StarFilled    = Color(0xFFF25C05)
+    val StarEmpty     = Color(0xFFE3E3E0)
+    val StarEmptyDark = Color(0xFF3A3A3A)
+
+    // Canvas & Surfaces (Light)
+    val Canvas      = Color(0xFFFFFFFF)
+    val SurfaceGray = Color(0xFFF5F5F5)
+    val SectionBand = Color(0xFFF0F0F0)
+    val Divider     = Color(0xFFE0E0E0)
+    val PressedRow  = Color(0xFFEDEDED)
+
+    // Canvas & Surfaces (Dark)
+    val DarkCanvas      = Color(0xFF161616) // near-black, NOT pure black
+    val DarkSurface1    = Color(0xFF1E1E1E)
+    val DarkSurface2    = Color(0xFF2A2A2A)
+    val DarkDivider     = Color(0xFF303030)
+    val DarkSectionBand = Color(0xFF0C0C0C)
+
+    // Text
+    val TextPrimary       = Color(0xFF2B2B2B)
+    val TextSecondary     = Color(0xFF6E6E6E)
+    val TextTertiary      = Color(0xFF9A9A9A)
+    val DarkTextPrimary   = Color(0xFFE6E6E6)
+    val DarkTextSecondary = Color(0xFFA8A8A8)
+
+    // Semantic
+    val Open     = Color(0xFF2DA44E)
+    val Closed   = Color(0xFFE03E3E)
+    val Warning  = Color(0xFFD9730D)
+    val Link     = Color(0xFF0073BB)
+    val LinkDark = Color(0xFF4FA3D9)
+    val Elite    = Color(0xFFA2231D)
+}
+```
+
+Wire it into both schemes. Yelp is light-first (white paper + photos); the dark scheme uses `#161616`, never true black, and the brand Red stays saturated.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.MaterialTheme
+
+private val YelpLight = lightColorScheme(
+    primary        = YelpColors.Red,
+    onPrimary      = YelpColors.Canvas,
+    background      = YelpColors.Canvas,
+    onBackground    = YelpColors.TextPrimary,
+    surface         = YelpColors.SurfaceGray,
+    onSurface       = YelpColors.TextPrimary,
+    surfaceVariant  = YelpColors.PressedRow,
+    outline         = YelpColors.Divider,
+    error           = YelpColors.Closed,
+)
+
+private val YelpDark = darkColorScheme(
+    primary        = YelpColors.Red,           // brand red stays saturated on dark
+    onPrimary      = YelpColors.Canvas,
+    background      = YelpColors.DarkCanvas,
+    onBackground    = YelpColors.DarkTextPrimary,
+    surface         = YelpColors.DarkSurface1,
+    onSurface       = YelpColors.DarkTextPrimary,
+    surfaceVariant  = YelpColors.DarkSurface2,
+    outline         = YelpColors.DarkDivider,
+    error           = YelpColors.Closed,
+)
+
+@Composable
+fun YelpTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) YelpDark else YelpLight,
+    typography = YelpTypography,
+    content = content,
+)
+```
+
+## 2. Typography
+
+Yelp's type family is **Open Sans** (SIL OFL via Google Fonts — drop the TTFs in `res/font/`). Heavy headers/numbers (700-800), 400 body, 600 meta — scanning over reading.
+
+```kotlin
+// ui/theme/YelpType.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 OpenSans = FontFamily(
+    Font(R.font.opensans_regular,    FontWeight.Normal),
+    Font(R.font.opensans_semibold,   FontWeight.SemiBold),
+    Font(R.font.opensans_bold,       FontWeight.Bold),
+    Font(R.font.opensans_extrabold,  FontWeight.ExtraBold),
+)
+
+object YelpText {
+    val ScreenTitle  = TextStyle(OpenSans, fontWeight = FontWeight.ExtraBold, fontSize = 32.sp, lineHeight = 38.sp, letterSpacing = (-0.4).sp)
+    val BizName      = TextStyle(OpenSans, fontWeight = FontWeight.ExtraBold, fontSize = 24.sp, lineHeight = 29.sp, letterSpacing = (-0.3).sp)
+    val Section      = TextStyle(OpenSans, fontWeight = FontWeight.Bold,      fontSize = 20.sp, lineHeight = 25.sp, letterSpacing = (-0.2).sp)
+    val CardHeader   = TextStyle(OpenSans, fontWeight = FontWeight.ExtraBold, fontSize = 16.sp, lineHeight = 21.sp)
+    val Emphasis     = TextStyle(OpenSans, fontWeight = FontWeight.Bold,      fontSize = 15.sp, lineHeight = 20.sp)
+    val Body         = TextStyle(OpenSans, fontWeight = FontWeight.Normal,    fontSize = 14.sp, lineHeight = 22.sp)
+    val ReviewerName = TextStyle(OpenSans, fontWeight = FontWeight.Bold,      fontSize = 14.sp, lineHeight = 18.sp)
+    val Meta         = TextStyle(OpenSans, fontWeight = FontWeight.SemiBold,  fontSize = 13.sp, lineHeight = 18.sp)
+    val Caption      = TextStyle(OpenSans, fontWeight = FontWeight.SemiBold,  fontSize = 12.sp, lineHeight = 17.sp, letterSpacing = 0.1.sp)
+    val Button       = TextStyle(OpenSans, fontWeight = FontWeight.Bold,      fontSize = 15.sp, lineHeight = 15.sp)
+    val Tab          = TextStyle(OpenSans, fontWeight = FontWeight.SemiBold,  fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.1.sp)
+    val Chip         = TextStyle(OpenSans, fontWeight = FontWeight.SemiBold,  fontSize = 13.sp, lineHeight = 13.sp)
+    val Link         = TextStyle(OpenSans, fontWeight = FontWeight.Bold,      fontSize = 14.sp, lineHeight = 18.sp)
+}
+
+// Map onto Material 3 slots so stock components inherit the brand
+val YelpTypography = Typography(
+    headlineLarge  = YelpText.ScreenTitle,
+    headlineMedium = YelpText.BizName,
+    titleMedium    = YelpText.Section,
+    bodyMedium     = YelpText.Body,
+    labelSmall     = YelpText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### 5-Star Rating (half-star, Canvas-drawn)
+
+```kotlin
+import androidx.compose.foundation.Canvas
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun YelpRatingBar(
+    rating: Float,                 // 0f..5f, render to nearest 0.5
+    starSize: Dp = 18.dp,
+    dark: Boolean = false,
+    modifier: Modifier = Modifier,
+) {
+    val empty = if (dark) YelpColors.StarEmptyDark else YelpColors.StarEmpty
+    Canvas(modifier.size(width = starSize * 5 + 2.dp * 4, height = starSize)
+        .semantics { contentDescription = "$rating out of 5 stars" }) {
+        val s = starSize.toPx()
+        val gap = 2.dp.toPx()
+        repeat(5) { i ->
+            val left = i * (s + gap)
+            val fill = (rating - i).coerceIn(0f, 1f)
+            drawStar(Offset(left, 0f), s, empty)
+            if (fill > 0f) {
+                clipRect(left, 0f, left + s * fill, s) { drawStar(Offset(left, 0f), s, YelpColors.StarFilled) }
+            }
+        }
+    }
+}
+
+private fun androidx.compose.ui.graphics.drawscope.DrawScope.drawStar(
+    o: Offset, size: Float, color: Color,
+) {
+    val cx = o.x + size / 2; val cy = o.y + size / 2
+    val rOuter = size / 2; val rInner = rOuter * 0.42f
+    val path = Path()
+    for (k in 0 until 10) {
+        val r = if (k % 2 == 0) rOuter else rInner
+        val a = Math.toRadians((-90 + k * 36).toDouble())
+        val x = cx + (r * Math.cos(a)).toFloat()
+        val y = cy + (r * Math.sin(a)).toFloat()
+        if (k == 0) path.moveTo(x, y) else path.lineTo(x, y)
+    }
+    path.close()
+    drawPath(path, color)
+}
+```
+
+### Interactive Rating Input
+
+```kotlin
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Star
+import androidx.compose.material.icons.outlined.StarBorder
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+
+@Composable
+fun YelpRatingInput(value: Float, onValueChange: (Float) -> Unit, starSize: Dp = 32.dp) {
+    val haptics = LocalHapticFeedback.current
+    Row(horizontalArrangement = Arrangement.spacedBy(6.dp)) {
+        (1..5).forEach { i ->
+            Icon(
+                imageVector = if (i <= value) Icons.Filled.Star else Icons.Outlined.StarBorder,
+                contentDescription = "$i stars",
+                tint = if (i <= value) YelpColors.StarFilled else YelpColors.StarEmpty,
+                modifier = Modifier.size(starSize).clickable {
+                    haptics.performHapticFeedback(HapticFeedbackType.LongPress)
+                    onValueChange(i.toFloat())
+                },
+            )
+        }
+    }
+}
+```
+
+### Business Header
+
+```kotlin
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+
+@Composable
+fun BusinessHeader(
+    photoUrl: String, name: String, rating: Float, reviewCount: Int,
+    priceCategory: String, isOpen: Boolean, hours: String,
+) {
+    Column(Modifier.fillMaxWidth()) {
+        Box(Modifier.fillMaxWidth().height(184.dp)) {
+            AsyncImage(model = photoUrl, contentDescription = null,
+                modifier = Modifier.fillMaxSize(), contentScale = ContentScale.Crop)
+            Text("1 / 248 photos", style = YelpText.Caption, color = Color.White,
+                modifier = Modifier.align(Alignment.BottomEnd).padding(14.dp)
+                    .clip(RoundedCornerShape(6.dp)).background(Color.Black.copy(alpha = 0.6f))
+                    .padding(horizontal = 10.dp, vertical = 4.dp))
+        }
+        Column(Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(6.dp)) {
+            Text(name, style = YelpText.BizName, color = YelpColors.TextPrimary)
+            Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                YelpRatingBar(rating)
+                Text("%.1f".format(rating), style = YelpText.Emphasis, color = YelpColors.TextPrimary)
+                Text("$reviewCount reviews", style = YelpText.Link, color = YelpColors.Link)
+            }
+            Text(priceCategory, style = YelpText.Meta, color = YelpColors.TextSecondary)
+            Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
+                Text(if (isOpen) "Open" else "Closed",
+                    style = YelpText.Meta.copy(fontWeight = FontWeight.Bold),
+                    color = if (isOpen) YelpColors.Open else YelpColors.Closed)
+                Text("· $hours", style = YelpText.Meta, color = YelpColors.TextSecondary)
+            }
+        }
+        Box(Modifier.fillMaxWidth().height(8.dp).background(YelpColors.SectionBand)) // section band
+    }
+}
+```
+
+### Review Card
+
+```kotlin
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.filled.*
+import androidx.compose.runtime.*
+import androidx.compose.ui.graphics.Brush
+
+@Composable
+fun ReviewCard(
+    initials: String, name: String, location: String, reviewerCount: Int,
+    rating: Float, date: String, body: String,
+) {
+    var useful by remember { mutableStateOf(false) }
+    Column(Modifier.fillMaxWidth().padding(vertical = 16.dp)) {
+        Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(10.dp)) {
+            Box(Modifier.size(40.dp).clip(CircleShape)
+                .background(Brush.linearGradient(listOf(YelpColors.RedLogo, Color(0xFF8A1818)))),
+                contentAlignment = Alignment.Center) {
+                Text(initials, style = YelpText.Emphasis, color = Color.White)
+            }
+            Column {
+                Text(name, style = YelpText.ReviewerName, color = YelpColors.TextPrimary)
+                Text("$location · $reviewerCount reviews", style = YelpText.Caption, color = YelpColors.TextSecondary)
+            }
+        }
+        Row(Modifier.fillMaxWidth().padding(top = 10.dp),
+            horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically) {
+            YelpRatingBar(rating, starSize = 15.dp)
+            Text(date, style = YelpText.Caption, color = YelpColors.TextSecondary)
+        }
+        Text(body, style = YelpText.Body, color = YelpColors.TextPrimary, modifier = Modifier.padding(top = 8.dp))
+        Row(Modifier.padding(top = 10.dp), horizontalArrangement = Arrangement.spacedBy(18.dp)) {
+            Vote(Icons.Filled.ThumbUp, "Useful 24", useful) { useful = !useful }
+            Vote(Icons.Filled.SentimentSatisfied, "Funny 6", false) {}
+            Vote(Icons.Filled.FavoriteBorder, "Cool 11", false) {}
+        }
+        HorizontalDivider(color = YelpColors.Divider, modifier = Modifier.padding(top = 16.dp))
+    }
+}
+
+@Composable
+private fun Vote(icon: androidx.compose.ui.graphics.vector.ImageVector, label: String, on: Boolean, onTap: () -> Unit) {
+    val c = if (on) YelpColors.Red else YelpColors.TextSecondary
+    Row(Modifier.clickable(onClick = onTap), verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(5.dp)) {
+        Icon(icon, contentDescription = label, tint = c, modifier = Modifier.size(13.dp))
+        Text(label, style = YelpText.Caption, color = c)
+    }
+}
+```
+
+### Primary Button & Category Chip
+
+```kotlin
+@Composable
+fun YelpPrimaryButton(text: String, modifier: Modifier = Modifier, onClick: () -> Unit) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    Box(
+        modifier
+            .heightIn(min = 44.dp)
+            .clip(RoundedCornerShape(8.dp))
+            .background(if (pressed) YelpColors.RedPressed else YelpColors.Red)
+            .clickable(interaction, indication = null, onClick = onClick),
+        contentAlignment = Alignment.Center,
+    ) { Text(text, style = YelpText.Button, color = Color.White, modifier = Modifier.padding(horizontal = 26.dp, vertical = 13.dp)) }
+}
+
+@Composable
+fun YelpCategoryChip(text: String, icon: androidx.compose.ui.graphics.vector.ImageVector, selected: Boolean) {
+    Row(
+        Modifier
+            .clip(RoundedCornerShape(50))
+            .background(if (selected) YelpColors.Red else YelpColors.SurfaceGray)
+            .then(if (selected) Modifier else Modifier.border(1.dp, YelpColors.Divider, RoundedCornerShape(50)))
+            .padding(horizontal = 16.dp, vertical = 9.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(7.dp),
+    ) {
+        Icon(icon, null, tint = if (selected) Color.White else YelpColors.Red, modifier = Modifier.size(13.dp))
+        Text(text, style = YelpText.Chip, color = if (selected) Color.White else YelpColors.TextPrimary)
+    }
+}
+```
+
+## 4. Navigation
+
+Yelp has a 5-tab bottom strip — Search, Nearby, Write, Activity, Me. On Android, model it as a `NavigationBar`; active is the brand Red with the filled icon (no Material tint pill).
+
+```kotlin
+@Composable
+fun YelpBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(containerColor = YelpColors.Canvas, tonalElevation = 0.dp) {
+        val items = listOf(
+            "Search"   to Icons.Filled.Search,
+            "Nearby"   to Icons.Filled.Home,
+            "Write"    to Icons.Filled.Create,
+            "Activity" to Icons.Filled.Notifications,
+            "Me"       to Icons.Filled.AccountCircle,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = { Icon(icon, contentDescription = label, modifier = Modifier.size(22.dp)) },
+                label = { Text(label, style = YelpText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor = YelpColors.Red,
+                    selectedTextColor = YelpColors.Red,
+                    unselectedIconColor = Color(0xFF7E7E7E),
+                    unselectedTextColor = Color(0xFF7E7E7E),
+                    indicatorColor = Color.Transparent,  // no Material pill — Yelp has none
+                ),
+            )
+        }
+    }
+}
+```
+
+The filter sheet is a Material 3 `ModalBottomSheet` (`#FFFFFF` / `#1E1E1E`, 12dp top corners) holding Sort, Price ($–$$$$ toggles), Distance, an Open-Now switch, and category chips, with a pinned full-width red Apply button. The business-detail screen uses a `TopAppBar` that is transparent over the photo header and fades to a solid bar with the compact business name when the header scrolls off (`enterAlwaysScrollBehavior` + an animated container color).
+
+## 5. Motion
+
+Yelp motion is quiet — 120–300ms ease-out, soft haptics.
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Photo header parallax | `LazyColumn` first item with `Modifier.graphicsLayer { translationY = scrollState.value * 0.5f }` |
+| Compact title cross-fade | `TopAppBar` container color `animateColorAsState` driven by scroll offset past 120.dp |
+| Rating increment | per-star `clickable` + `HapticFeedbackType.LongPress`; fill grows `tween(120)` |
+| Vote tap | count `Text` scale `animateFloatAsState` spring bump 1f → 1.2f → 1f; icon tint → `Red` |
+| Filter sheet | `ModalBottomSheet` (300ms slide, scrim alpha 0.4) |
+| Tab switch | instant; active icon swaps to filled `Red`, no slide |
+| Photo viewer | shared-element zoom into a full-screen `HorizontalPager` `tween(300)` |
+| Check-in | outline chip → solid `Red` `tween(200)` + `HapticFeedbackType.Confirm`, then a `Snackbar` |
+
+```kotlin
+// Vote count bump — the canonical Yelp micro-interaction
+val scale by animateFloatAsState(if (justVoted) 1.2f else 1f,
+    animationSpec = spring(dampingRatio = 0.5f), label = "voteBump")
+Text("Useful $count", Modifier.graphicsLayer { scaleX = scale; scaleY = scale })
+```
+
+Haptics: `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` for each rating increment, `HapticFeedbackType.Confirm` on check-in, a soft `LocalView.performHapticFeedback(HapticFeedbackConstants.CLOCK_TICK)` on vote. Pull-to-refresh on search/activity uses a `Red` indicator.
+
+## 6. Icons
+
+Yelp's iconography is simple and line-based; `androidx.compose.material:material-icons-extended` covers it. The 5-star control is Canvas-drawn (§3), not an icon font, so half-stars render crisply.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Search (tab) | `magnifyingglass` | `Icons.Filled.Search` |
+| Nearby (tab) | `house` / `house.fill` | `Icons.Filled.Home` |
+| Write (tab) | `square.and.pencil` | `Icons.Filled.Create` |
+| Activity (tab) | `bell` / `waveform.path.ecg` | `Icons.Filled.Notifications` |
+| Me (tab) | `person.crop.circle` | `Icons.Filled.AccountCircle` |
+| Star (rating) | `star.fill` / `star` | Canvas-drawn star (§3) |
+| Write a Review | `square.and.pencil` | `Icons.Filled.Create` |
+| Save | `bookmark` / `bookmark.fill` | `Icons.Filled.BookmarkBorder` / `Icons.Filled.Bookmark` |
+| Share | `square.and.arrow.up` | `Icons.Filled.Share` |
+| Directions | `arrow.triangle.turn.up.right.diamond` | `Icons.Filled.Directions` |
+| Call | `phone.fill` | `Icons.Filled.Call` |
+| Useful | `hand.thumbsup` | `Icons.Filled.ThumbUp` |
+| Funny | `face.smiling` | `Icons.Filled.SentimentSatisfied` |
+| Cool | `heart` | `Icons.Filled.FavoriteBorder` |
+| Back | `chevron.left` | `Icons.Filled.ArrowBack` |
+| Filter | `slider.horizontal.3` | `Icons.Filled.Tune` |
+| Map toggle | `map` | `Icons.Filled.Map` |
+| Add photo | `camera` | `Icons.Filled.PhotoCamera` |
+| Location pill | `chevron.down` | `Icons.Filled.ExpandMore` |
+
+## 7. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; the Canvas star + modern motion are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; the photo header is full-bleed into the status-bar area with light-content system bars over the dark photo, dark-content over light content. The filter `ModalBottomSheet` and the editor respect `Modifier.imePadding()`.
+- **Font scaling**: `sp` honors the user's font scale — keep it on screen title, business name, section headers, body, meta, review text. Pin layout-sensitive text (10sp tab labels, chip text, photo-count chip, vote labels) via `dp`-derived sizes or `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`. The Canvas star scales with its `starSize` param, kept proportional to the adjacent rating number.
+- **TalkBack**: rating bars expose `contentDescription = "{x.x} out of 5 stars"`; the rating input uses `Modifier.semantics { role = Role.Button; stateDescription = "$value of 5" }` and an `androidx…ProgressBarRangeInfo` style adjustable action; review cards announce "Review by {name}, {x} stars, {date}"; vote buttons toggle `stateDescription` ("Marked useful"). Never convey open/closed by color alone — keep the literal "Open"/"Closed" text.
+- **Touch targets**: Material guidance is 48.dp. Give the 15-18.dp rating stars (input mode) and 13.dp vote rows a 48.dp hit area via padding; primary buttons are ≥ 44.dp; tab items are full-height tappable.
+- **Contrast**: `#2B2B2B` on `#FFFFFF` passes WCAG AA for body at 14sp. The warm star `#F25C05` meets the 3:1 non-text contrast bar on white. Pair "Open" green `#2DA44E` with the word, never color alone.
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, disable header parallax (static image) and the vote-count bump (instant); keep the rating fill (it conveys value).
+- **Dark mode**: invert via the `Dark*` palette — `#161616`, NOT true black; `#2B2B2B` text becomes `#E6E6E4`; section bands become `#0C0C0C`; links shift `#0073BB → #4FA3D9`. The 5-star **filled** color stays `#F25C05` in both modes; only the empty color swaps to `#3A3A3A`. Do **not** enable Material You `dynamicColorScheme()` — Yelp's rationed-Red identity must hold regardless of wallpaper.