designmd-forge 1.2.0

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

@@ -0,0 +1,481 @@
+# Binance (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Binance's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, the markets list + order book + trade ticket, 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 (Binance's near-black canvas, single yellow accent, absolute green/red market semantics, sans/mono split with tabular figures) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `LazyColumn` for the high-frequency markets list, `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 coin icons. No Material You dynamic color — Binance's yellow + market semantics must hold regardless of wallpaper. Binance is dark-first; a light scheme is provided but should default to dark.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/BinanceColors.kt
+import androidx.compose.ui.graphics.Color
+
+object BinanceColors {
+    // Canvas & Surfaces (Dark — default)
+    val Canvas    = Color(0xFF0B0E11)
+    val Surface1  = Color(0xFF181A20)
+    val Surface2  = Color(0xFF1E2026)
+    val Surface3  = Color(0xFF2B3139)
+    val Divider   = Color(0xFF2B3139)
+
+    // Canvas & Surfaces (Light — secondary)
+    val CanvasLight   = Color(0xFFFFFFFF)
+    val Surface1Light = Color(0xFFF5F5F5)
+    val DividerLight  = Color(0xFFEAECEF)
+
+    // Brand (single accent)
+    val Yellow        = Color(0xFFF0B90B)
+    val YellowPressed = Color(0xFFC99400)
+    val YellowTint    = Color(0x1FF0B90B) // 12% yellow
+
+    // Market semantics (never invert)
+    val Up          = Color(0xFF0ECB81)
+    val Down        = Color(0xFFF6465D)
+    val UpPressed   = Color(0xFF0BA572)
+    val DownPressed = Color(0xFFD93849)
+    val AskFill     = Color(0x24F6465D) // ~0.14 alpha
+    val BidFill     = Color(0x240ECB81)
+
+    // Text
+    val TextPrimary    = Color(0xFFEAECEF)
+    val TextSecondary  = Color(0xFF848E9C)
+    val TextTertiary   = Color(0xFF5E6673)
+    val TextPrimaryLt  = Color(0xFF1E2329)
+
+    // Coin brand colors
+    val Btc  = Color(0xFFF7931A)
+    val Eth  = Color(0xFF627EEA)
+    val Bnb  = Color(0xFFF0B90B)
+    val Usdt = Color(0xFF26A17B)
+    val Sol  = Color(0xFF14F195)
+
+    // Info
+    val Info = Color(0xFF3375BB)
+}
+```
+
+Wire it into both schemes. Binance is dark-first; the light scheme only restyles canvas + text — yellow/green/red are theme-invariant.
+
+```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 BinanceDark = darkColorScheme(
+    primary        = BinanceColors.Yellow,
+    onPrimary      = BinanceColors.Canvas,      // black text on yellow
+    background     = BinanceColors.Canvas,
+    onBackground   = BinanceColors.TextPrimary,
+    surface        = BinanceColors.Surface1,
+    onSurface      = BinanceColors.TextPrimary,
+    surfaceVariant = BinanceColors.Surface3,
+    outline        = BinanceColors.Divider,
+    error          = BinanceColors.Down,
+)
+
+private val BinanceLight = lightColorScheme(
+    primary        = BinanceColors.Yellow,
+    onPrimary      = BinanceColors.Canvas,
+    background      = BinanceColors.CanvasLight,
+    onBackground   = BinanceColors.TextPrimaryLt,
+    surface        = BinanceColors.Surface1Light,
+    onSurface      = BinanceColors.TextPrimaryLt,
+    surfaceVariant = BinanceColors.Surface1Light,
+    outline        = BinanceColors.DividerLight,
+    error          = BinanceColors.Down,
+)
+
+@Composable
+fun BinanceTheme(
+    dark: Boolean = isSystemInDarkTheme(), // default to dark in practice
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) BinanceDark else BinanceLight,
+    typography  = BinanceTypography,
+    content     = content,
+)
+```
+
+## 2. Typography
+
+Binance's UI face is `BinancePlex` (IBM Plex Sans derivative); numbers use `BinancePlex Mono`. Drop **IBM Plex Sans** + **IBM Plex Mono** TTFs in `res/font/` as the open fallback. Rule: words use the sans, all numbers use the mono with **tabular figures** (`FontFeatureSetting("tnum")`).
+
+```kotlin
+// ui/theme/BinanceType.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 PlexSans = FontFamily(
+    Font(R.font.ibm_plex_sans_regular,  FontWeight.Normal),
+    Font(R.font.ibm_plex_sans_medium,   FontWeight.Medium),
+    Font(R.font.ibm_plex_sans_semibold, FontWeight.SemiBold),
+    Font(R.font.ibm_plex_sans_bold,     FontWeight.Bold),
+)
+val PlexMono = FontFamily(
+    Font(R.font.ibm_plex_mono_medium,   FontWeight.Medium),
+    Font(R.font.ibm_plex_mono_semibold, FontWeight.SemiBold),
+)
+
+private const val TNUM = "tnum" // tabular figures — mandatory on numbers
+
+object BinanceText {
+    // UI sans
+    val ScreenTitle = TextStyle(PlexSans, fontWeight = FontWeight.Bold,     fontSize = 32.sp, lineHeight = 38.sp, letterSpacing = (-0.6).sp)
+    val Section     = TextStyle(PlexSans, fontWeight = FontWeight.Bold,     fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = (-0.2).sp)
+    val RowTitle    = TextStyle(PlexSans, fontWeight = FontWeight.SemiBold, fontSize = 18.sp, lineHeight = 23.sp)
+    val Body        = TextStyle(PlexSans, fontWeight = FontWeight.Normal,   fontSize = 16.sp, lineHeight = 24.sp)
+    val ListLabel   = TextStyle(PlexSans, fontWeight = FontWeight.SemiBold, fontSize = 14.sp, lineHeight = 18.sp)
+    val Meta        = TextStyle(PlexSans, fontWeight = FontWeight.Normal,   fontSize = 14.sp, lineHeight = 19.sp)
+    val Pill        = TextStyle(PlexSans, fontWeight = FontWeight.SemiBold, fontSize = 13.sp, lineHeight = 13.sp)
+    val Caption     = TextStyle(PlexSans, fontWeight = FontWeight.Medium,   fontSize = 12.sp, lineHeight = 16.sp)
+    val Tab         = TextStyle(PlexSans, fontWeight = FontWeight.Medium,   fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.1.sp)
+    val Button      = TextStyle(PlexSans, fontWeight = FontWeight.SemiBold, fontSize = 15.sp, lineHeight = 15.sp)
+
+    // Numeric mono — always tabular
+    val Balance     = TextStyle(PlexMono, fontWeight = FontWeight.SemiBold, fontSize = 28.sp, lineHeight = 32.sp, letterSpacing = (-0.5).sp, fontFeatureSettings = TNUM)
+    val Price       = TextStyle(PlexMono, fontWeight = FontWeight.SemiBold, fontSize = 15.sp, lineHeight = 20.sp, fontFeatureSettings = TNUM)
+    val Number      = TextStyle(PlexMono, fontWeight = FontWeight.SemiBold, fontSize = 14.sp, lineHeight = 18.sp, fontFeatureSettings = TNUM)
+    val MonoCaption = TextStyle(PlexMono, fontWeight = FontWeight.Medium,   fontSize = 12.sp, lineHeight = 16.sp, fontFeatureSettings = TNUM)
+    val MonoSmall   = TextStyle(PlexMono, fontWeight = FontWeight.Medium,   fontSize = 10.sp, lineHeight = 14.sp, fontFeatureSettings = TNUM)
+}
+
+val BinanceTypography = Typography(
+    headlineLarge  = BinanceText.ScreenTitle,
+    headlineMedium = BinanceText.Section,
+    titleMedium    = BinanceText.RowTitle,
+    bodyMedium     = BinanceText.Body,
+    labelSmall     = BinanceText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Markets List Row
+
+```kotlin
+import androidx.compose.foundation.background
+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.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun MarketRow(
+    symbol: String, quote: String, volume: String,
+    price: String, usd: String, changePct: Double,
+    iconColor: Color = BinanceColors.Btc,
+) {
+    val up = changePct >= 0
+    Row(
+        Modifier
+            .fillMaxWidth()
+            .background(BinanceColors.Canvas)
+            .padding(horizontal = 16.dp, vertical = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(10.dp),
+    ) {
+        Box(
+            Modifier.size(30.dp).clip(CircleShape).background(iconColor),
+            contentAlignment = Alignment.Center,
+        ) {
+            Text(symbol.take(1), style = BinanceText.ListLabel, color = BinanceColors.Canvas)
+        }
+
+        Column(Modifier.weight(1f)) {
+            Row {
+                Text(symbol, style = BinanceText.ListLabel, color = BinanceColors.TextPrimary)
+                Text(" /$quote", style = BinanceText.Caption.copy(fontSize = 11.sp), color = BinanceColors.TextTertiary)
+            }
+            Text("Vol $volume", style = BinanceText.Caption.copy(fontSize = 11.sp), color = BinanceColors.TextSecondary)
+        }
+
+        Column(horizontalAlignment = Alignment.End) {
+            Text(price, style = BinanceText.Number, color = BinanceColors.TextPrimary)
+            Text(usd, style = BinanceText.MonoSmall, color = BinanceColors.TextSecondary)
+        }
+
+        Box(
+            Modifier
+                .widthIn(min = 64.dp)
+                .clip(RoundedCornerShape(4.dp))
+                .background(if (up) BinanceColors.Up else BinanceColors.Down)
+                .padding(vertical = 6.dp, horizontal = 8.dp),
+            contentAlignment = Alignment.Center,
+        ) {
+            Text("${if (up) "+" else ""}${"%.2f".format(changePct)}%",
+                style = BinanceText.Pill, color = Color.White)
+        }
+    }
+    HorizontalDivider(color = BinanceColors.Divider, thickness = 1.dp)
+}
+```
+
+### Order Book (depth-shaded)
+
+```kotlin
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.ui.Alignment
+
+@Composable
+fun OrderBookRow(price: String, qty: String, depthRatio: Float, isAsk: Boolean) {
+    Box(Modifier.fillMaxWidth().height(22.dp), contentAlignment = Alignment.CenterEnd) {
+        Box(
+            Modifier
+                .fillMaxHeight()
+                .fillMaxWidth(depthRatio)
+                .background(if (isAsk) BinanceColors.AskFill else BinanceColors.BidFill)
+                .align(Alignment.CenterEnd),
+        )
+        Row(
+            Modifier.fillMaxWidth().padding(horizontal = 8.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
+            Text(price, style = BinanceText.MonoCaption, color = if (isAsk) BinanceColors.Down else BinanceColors.Up)
+            Text(qty,   style = BinanceText.MonoCaption, color = BinanceColors.TextPrimary)
+        }
+    }
+}
+
+@Composable
+fun SpreadRow(last: String, up: Boolean) {
+    Row(
+        Modifier.fillMaxWidth().padding(horizontal = 8.dp, vertical = 6.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(6.dp),
+    ) {
+        Text(last, style = BinanceText.Price.copy(fontSize = 16.sp),
+            color = if (up) BinanceColors.Up else BinanceColors.Down)
+        Text(if (up) "↑" else "↓", color = if (up) BinanceColors.Up else BinanceColors.Down)
+    }
+}
+```
+
+### Balance Hero
+
+```kotlin
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Visibility
+import androidx.compose.material3.Icon
+
+@Composable
+fun BalanceHero(value: String, currency: String, pnl: String, gain: Boolean) {
+    Column(Modifier.padding(horizontal = 16.dp), verticalArrangement = Arrangement.spacedBy(4.dp)) {
+        Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(6.dp)) {
+            Text("Est. Total Value", style = BinanceText.Caption, color = BinanceColors.TextSecondary)
+            Icon(Icons.Outlined.Visibility, null, tint = BinanceColors.TextSecondary, modifier = Modifier.size(12.dp))
+        }
+        Row(verticalAlignment = Alignment.Bottom, horizontalArrangement = Arrangement.spacedBy(4.dp)) {
+            Text(value, style = BinanceText.Balance, color = BinanceColors.TextPrimary)
+            Text(currency, style = BinanceText.Caption.copy(fontSize = 14.sp), color = BinanceColors.TextSecondary,
+                modifier = Modifier.padding(bottom = 4.dp))
+        }
+        Text("$pnl Today", style = BinanceText.MonoCaption,
+            color = if (gain) BinanceColors.Up else BinanceColors.Down)
+    }
+}
+```
+
+### Buy / Sell Trade Ticket
+
+```kotlin
+import androidx.compose.foundation.clickable
+import androidx.compose.runtime.*
+
+@Composable
+fun TradeTicket() {
+    var isBuy by remember { mutableStateOf(true) }
+    var pct by remember { mutableIntStateOf(0) }
+    val accent = if (isBuy) BinanceColors.Up else BinanceColors.Down
+
+    Column(
+        Modifier.fillMaxWidth().background(BinanceColors.Surface1).padding(16.dp),
+        verticalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        Row(Modifier.clip(RoundedCornerShape(8.dp))) {
+            listOf(true, false).forEach { buy ->
+                Box(
+                    Modifier
+                        .weight(1f).height(36.dp)
+                        .background(if (isBuy == buy) (if (buy) BinanceColors.Up else BinanceColors.Down) else BinanceColors.Surface3)
+                        .clickable { isBuy = buy },
+                    contentAlignment = Alignment.Center,
+                ) {
+                    Text(if (buy) "Buy" else "Sell", style = BinanceText.Button,
+                        color = if (isBuy == buy) Color.White else BinanceColors.TextSecondary)
+                }
+            }
+        }
+
+        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+            listOf(25, 50, 75, 100).forEach { p ->
+                Box(
+                    Modifier
+                        .weight(1f)
+                        .clip(RoundedCornerShape(500.dp))
+                        .background(if (pct == p) BinanceColors.YellowTint else BinanceColors.Surface3)
+                        .clickable { pct = p }
+                        .padding(vertical = 7.dp),
+                    contentAlignment = Alignment.Center,
+                ) {
+                    Text("$p%", style = BinanceText.Pill,
+                        color = if (pct == p) BinanceColors.Yellow else BinanceColors.TextSecondary)
+                }
+            }
+        }
+
+        Box(
+            Modifier.fillMaxWidth().height(48.dp).clip(RoundedCornerShape(8.dp)).background(accent)
+                .clickable { },
+            contentAlignment = Alignment.Center,
+        ) {
+            Text(if (isBuy) "Buy BTC" else "Sell BTC", style = BinanceText.Button, color = Color.White)
+        }
+    }
+}
+```
+
+### Primary (Yellow) Button
+
+```kotlin
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+
+@Composable
+fun BinancePrimaryButton(title: String, onClick: () -> Unit) {
+    val src = remember { MutableInteractionSource() }
+    val pressed by src.collectIsPressedAsState()
+    Box(
+        Modifier
+            .fillMaxWidth().height(48.dp)
+            .clip(RoundedCornerShape(8.dp))
+            .background(if (pressed) BinanceColors.YellowPressed else BinanceColors.Yellow)
+            .clickable(interactionSource = src, indication = null, onClick = onClick),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(title, style = BinanceText.Button, color = BinanceColors.Canvas) // black text
+    }
+}
+```
+
+## 4. Navigation (Bottom Bar)
+
+Binance has a 5-item bottom strip, active in yellow, **no Material tint pill** (Binance has none).
+
+```kotlin
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.*
+
+@Composable
+fun BinanceBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(containerColor = BinanceColors.Canvas, tonalElevation = 0.dp) {
+        val items = listOf(
+            "Home"    to Icons.Filled.Home,
+            "Markets" to Icons.Filled.BarChart,
+            "Trade"   to Icons.Filled.SwapHoriz,
+            "Futures" to Icons.Filled.TrendingUp,
+            "Wallets" to Icons.Filled.AccountBalanceWallet,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = { Icon(icon, label, Modifier.size(22.dp)) },
+                label = { Text(label, style = BinanceText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor   = BinanceColors.Yellow,
+                    selectedTextColor   = BinanceColors.Yellow,
+                    unselectedIconColor = BinanceColors.TextTertiary,
+                    unselectedTextColor = BinanceColors.TextTertiary,
+                    indicatorColor      = Color.Transparent, // no Material pill
+                ),
+            )
+        }
+    }
+}
+```
+
+The markets/favorites/spot tabs are a `ScrollableTabRow` (or a custom `Row`) with a 2dp `Yellow` indicator under the active text; the trade screen stacks a candlestick `Canvas`, the depth-shaded order book (`LazyColumn`), and the sticky trade ticket.
+
+## 5. Motion
+
+Binance motion is functional and fast — data must feel reliable, so **no bouncy springs on data**. Quiet 120–250ms `tween`s.
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Price tick flash | `animateColorAsState` row bg → `Up/Down @ 0.10 alpha` for 150ms then back; trigger on price change |
+| Markets tab underline | `animateDpAsState` indicator x `tween(200)` |
+| Buy/Sell toggle | segment bg `animateColorAsState` green↔red `tween(180)` |
+| Order book reflow | `LazyColumn` + `Modifier.animateItemPlacement(tween(120))` — no spring |
+| Convert swap | tiles swap with `tween(250)` vertical translate + soft haptic |
+| Sheet present | `ModalBottomSheet` default; scrim fades in |
+| Page navigation | Nav slide push `tween(300)` |
+| Pull to refresh | yellow circular indicator; haptic on trigger |
+
+```kotlin
+// Price tick flash — the app's heartbeat
+val flashColor by animateColorAsState(
+    targetValue = if (flashing) (if (up) BinanceColors.Up else BinanceColors.Down).copy(alpha = 0.10f)
+                  else Color.Transparent,
+    animationSpec = tween(150),
+    label = "tickFlash",
+)
+// Modifier.background(flashColor)
+```
+
+Haptics: `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` for order submit; `HapticFeedbackType.TextHandleMove` (or `HapticFeedbackConstants.CLOCK_TICK` via `LocalView`) for the percentage-chip snap; a success vibration on filled order. Live price ticks are silent.
+
+## 6. Icons
+
+The closest first-party set is `androidx.compose.material:material-icons-extended`. Coin glyphs should be bundled vector assets (`ImageVector` / `painterResource`), not Material icons.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Home (tab) | `house.fill` | `Icons.Filled.Home` |
+| Markets (tab) | `chart.bar.fill` | `Icons.Filled.BarChart` |
+| Trade (tab) | `arrow.left.arrow.right` | `Icons.Filled.SwapHoriz` |
+| Futures (tab) | `chart.xyaxis.line` | `Icons.Filled.TrendingUp` |
+| Wallets (tab) | `creditcard.fill` | `Icons.Filled.AccountBalanceWallet` |
+| Search | `magnifyingglass` | `Icons.Filled.Search` |
+| Notifications | `bell` | `Icons.Filled.Notifications` |
+| Hide balance | `eye` / `eye.slash` | `Icons.Outlined.Visibility` / `VisibilityOff` |
+| Favorite | `star` / `star.fill` | `Icons.Filled.StarBorder` / `Star` |
+| Back | `chevron.left` | `Icons.Filled.ArrowBack` |
+| Convert swap | `arrow.up.arrow.down` | `Icons.Filled.SwapVert` |
+| Up tick | `arrow.up` | `Icons.Filled.ArrowUpward` |
+| Down tick | `arrow.down` | `Icons.Filled.ArrowDownward` |
+| Deposit | `arrow.down.to.line` | `Icons.Filled.SouthEast` |
+| Withdraw | `arrow.up.to.line` | `Icons.Filled.NorthEast` |
+| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
+| More | `ellipsis` | `Icons.Filled.MoreHoriz` |
+| Chart type | `chart.bar.xaxis` | `Icons.Filled.CandlestickChart` |
+| Settings | `gearshape` | `Icons.Filled.Settings` |
+
+## 7. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; high-frequency `LazyColumn` + modern motion are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; the dark canvas wants light-content system bars. The sticky trade ticket needs `Modifier.navigationBarsPadding()`; amount inputs need `Modifier.imePadding()`.
+- **Tabular figures mandatory**: every numeric style sets `fontFeatureSettings = "tnum"`. Without it, the markets list and order book visibly jitter as digits change.
+- **Font scaling**: `sp` honors the user's font scale — keep it on screen titles, body, labels. Pin numeric mono columns, % pills, order-book rows, and 10sp tab labels by deriving from `dp` or wrapping in `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))` so columns stay aligned.
+- **List performance**: the markets list is high-frequency. Use `LazyColumn` with stable keys (`key = { it.symbol }`), hoist a `derivedStateOf` price map, and only recompose changed rows; throttle socket updates to ~4–10 Hz. Flash only rows whose price changed.
+- **TalkBack**: announce a market row as "Bitcoin, 67,284 dollars, up 2.34 percent" via `Modifier.semantics { contentDescription = ... }`; order-book rows announce side + price + quantity; the submit button reads "Buy Bitcoin" / "Sell Bitcoin". Don't announce every price tick — debounce or only announce significant balance changes via `LiveRegionMode.Polite`.
+- **Color is not the only signal**: pair every green/red value with a `+`/`−` sign and an up/down arrow glyph (deuteranopia confuses `#0ECB81`/`#F6465D`).
+- **Touch targets**: Material guidance is 48.dp. Markets rows are ~56dp (full-row tap); give the order-book rows (22dp) a larger tap area when used to prefill price; percentage chips and Buy/Sell buttons ≥48dp.
+- **Contrast**: `#EAECEF` on `#0B0E11` and `#0B0E11` on `#F0B90B` pass WCAG AA. Never put white text on the yellow button. Validate the secondary surface steps (`#181A20`/`#1E2026`/`#2B3139`) keep ≥3:1 separation.
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, disable the price-tick flash and Convert flip; keep instant data updates (no fade) and keep the colored sign + arrow.
+- **Dark mode**: this is the primary mode — default to `BinanceDark`. The light scheme only swaps canvas (`#FFFFFF`) and primary text (`#1E2329`); **never invert** `Up`/`Down`/`Yellow`. Do **not** enable Material You `dynamicColorScheme()` — Binance's yellow + absolute market semantics must hold regardless of wallpaper. Floating sheets get a 1dp `Divider` border since shadows barely register on `#0B0E11`.