designmd-forge 1.2.0

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

@@ -0,0 +1,587 @@
+# Robinhood (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Robinhood's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, `Modifier`s, 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 (the stark white canvas with true-black text, direction-bound green/orange, the full-bleed portfolio chart with its draggable scrubber, tabular numerals everywhere) while making everything idiomatic Android — a `Canvas`-drawn line graph with `pointerInput` scrubbing instead of Swift `Charts`, `NavigationBar` instead of a UITabBar, `sp`/`dp` 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 fetched company/ticker logos.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/RobinhoodColors.kt
+import androidx.compose.ui.graphics.Color
+
+object RobinhoodColors {
+    // Canvas & Surfaces (Light)
+    val CanvasLight     = Color(0xFFFFFFFF)
+    val SurfaceGray     = Color(0xFFF7F7F7)
+    val SurfaceGray2    = Color(0xFFEFEFEF)
+    val DividerLight    = Color(0xFFE6E6E6)
+
+    // Text (Light) — true black, no warm grays
+    val TextPrimary     = Color(0xFF000000)
+    val TextSecondary   = Color(0xFF5C6166)
+    val TextTertiary    = Color(0xFF9B9EA3)
+    val TextMuted       = Color(0xFFC2C5CA)
+
+    // Brand — color is bound to direction
+    val Green           = Color(0xFF00C805) // up
+    val GreenPressed    = Color(0xFF00A904)
+    val GreenDim        = Color(0xFF21CE99) // heritage
+    val GreenBg         = Color(0xFFE6F9E0)
+    val Red             = Color(0xFFFF5000) // down — a saturated ORANGE, not red
+    val RedBg           = Color(0xFFFFEDE5)
+
+    // Semantic
+    val ErrorTrue       = Color(0xFFE62232) // a TRUE red — hard errors only, distinct from loss orange
+    val Warning         = Color(0xFFFFB800)
+    val Info            = Color(0xFF1D6FF2)
+
+    // Crypto accents
+    val Bitcoin         = Color(0xFFF7931A)
+    val Ethereum        = Color(0xFF627EEA)
+
+    // Dark mode — true black; the green line glows electric
+    val DarkCanvas      = Color(0xFF000000)
+    val DarkSurface1    = Color(0xFF181B1F)
+    val DarkSurface2    = Color(0xFF23272D)
+    val DarkDivider     = Color(0xFF2D3138)
+    val DarkTextPrimary = Color(0xFFFFFFFF)
+    val DarkTextSecondary = Color(0xFFA4A8AD)
+}
+```
+
+Robinhood's default is a **stark light canvas** — clean tech-product, deliberate counterpoint to legacy brokerages. Wire a Material 3 `lightColorScheme`/`darkColorScheme`. **Do not map green/orange onto `primary`/`error`** — they are *direction* signals, not theme roles. Keep `primary` as black (the universal Trade CTA color) and the brand greens/orange as explicit tokens so no stock component can accidentally use them.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+import androidx.compose.foundation.isSystemInDarkTheme
+
+private val RobinhoodLight = lightColorScheme(
+    primary        = RobinhoodColors.TextPrimary,   // black — the universal Trade CTA
+    onPrimary      = Color.White,
+    background     = RobinhoodColors.CanvasLight,
+    onBackground   = RobinhoodColors.TextPrimary,
+    surface        = RobinhoodColors.CanvasLight,
+    onSurface      = RobinhoodColors.TextPrimary,
+    surfaceVariant = RobinhoodColors.SurfaceGray,
+    outline        = RobinhoodColors.DividerLight,
+    error          = RobinhoodColors.ErrorTrue,     // the TRUE red, not the loss orange
+)
+
+private val RobinhoodDark = darkColorScheme(
+    primary        = RobinhoodColors.DarkTextPrimary, // white — Trade CTA on black
+    onPrimary      = RobinhoodColors.DarkCanvas,
+    background     = RobinhoodColors.DarkCanvas,
+    onBackground   = RobinhoodColors.DarkTextPrimary,
+    surface        = RobinhoodColors.DarkSurface1,
+    onSurface      = RobinhoodColors.DarkTextPrimary,
+    surfaceVariant = RobinhoodColors.DarkSurface2,
+    outline        = RobinhoodColors.DarkDivider,
+    error          = RobinhoodColors.ErrorTrue,
+)
+
+@Composable
+fun RobinhoodTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) RobinhoodDark else RobinhoodLight,
+    typography  = RobinhoodTypography,
+    content     = content,
+)
+```
+
+## 2. Typography
+
+Capsule Sans (drawn by XYZ Type for Robinhood) is proprietary. Drop the TTFs in `res/font/` and build two families — `CapsuleSansText` for body, `CapsuleSansDisplay` for hero values. Fall back to the system font; on the fallback, **always** apply `FontFeatureSettings("tnum")` (tabular numerals) — this is the single most important typography rule on a brokerage app: columns of prices must align as the user scrolls.
+
+```kotlin
+// ui/theme/RobinhoodType.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 CapsuleText = FontFamily(
+    Font(R.font.capsule_sans_text_regular,  FontWeight.Normal),   // 400
+    Font(R.font.capsule_sans_text_medium,   FontWeight.Medium),   // 500
+    Font(R.font.capsule_sans_text_semibold, FontWeight.SemiBold), // 600
+    Font(R.font.capsule_sans_text_bold,     FontWeight.Bold),     // 700
+)
+val CapsuleDisplay = FontFamily(
+    Font(R.font.capsule_sans_display_bold,  FontWeight.Bold),     // hero values 40sp+
+)
+
+// Tabular numerals — non-negotiable on every price / percent / share count
+private const val TNUM = "tnum"
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
+object RobinhoodText {
+    val PortfolioHero  = TextStyle(CapsuleDisplay, fontWeight = FontWeight.Bold,     fontSize = 40.sp, lineHeight = 40.sp, letterSpacing = (-0.5).sp, fontFeatureSettings = TNUM)
+    val DayChange      = TextStyle(CapsuleText,    fontWeight = FontWeight.Medium,   fontSize = 16.sp, lineHeight = 19.sp, fontFeatureSettings = TNUM)
+    val ScreenTitle    = TextStyle(CapsuleText,    fontWeight = FontWeight.Bold,     fontSize = 22.sp, lineHeight = 25.sp, letterSpacing = (-0.2).sp)
+    val SectionHeader  = TextStyle(CapsuleText,    fontWeight = FontWeight.SemiBold, fontSize = 18.sp, lineHeight = 22.sp, letterSpacing = (-0.1).sp)
+    val PositionTitle  = TextStyle(CapsuleText,    fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 21.sp)
+    val Ticker         = TextStyle(CapsuleText,    fontWeight = FontWeight.Medium,   fontSize = 13.sp, lineHeight = 17.sp, letterSpacing = 0.3.sp)
+    val PositionValue  = TextStyle(CapsuleText,    fontWeight = FontWeight.Medium,   fontSize = 17.sp, lineHeight = 20.sp, fontFeatureSettings = TNUM)
+    val PositionChange = TextStyle(CapsuleText,    fontWeight = FontWeight.Medium,   fontSize = 13.sp, lineHeight = 17.sp, fontFeatureSettings = TNUM)
+    val ChartAxis      = TextStyle(CapsuleText,    fontWeight = FontWeight.Medium,   fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.2.sp, fontFeatureSettings = TNUM)
+    val Body           = TextStyle(CapsuleText,    fontWeight = FontWeight.Normal,   fontSize = 15.sp, lineHeight = 21.sp)
+    val BodySmall      = TextStyle(CapsuleText,    fontWeight = FontWeight.Normal,   fontSize = 13.sp, lineHeight = 18.sp)
+    val ButtonPrimary  = TextStyle(CapsuleText,    fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 16.sp)
+    val RangeChip      = TextStyle(CapsuleText,    fontWeight = FontWeight.SemiBold, fontSize = 13.sp, lineHeight = 13.sp, letterSpacing = 0.3.sp)
+    val TabLabel       = TextStyle(CapsuleText,    fontWeight = FontWeight.SemiBold, fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.2.sp)
+    val AllCaps        = TextStyle(CapsuleText,    fontWeight = FontWeight.Bold,     fontSize = 11.sp, lineHeight = 13.sp, letterSpacing = 0.6.sp)
+}
+
+val RobinhoodTypography = Typography(
+    displayMedium = RobinhoodText.PortfolioHero,
+    headlineSmall = RobinhoodText.ScreenTitle,
+    titleMedium   = RobinhoodText.PositionTitle,
+    bodyMedium    = RobinhoodText.Body,
+    labelSmall    = RobinhoodText.TabLabel,
+)
+```
+
+## 3. Signature Components
+
+### Portfolio Hero (top of Investing tab)
+
+`BUYING POWER` all-caps label → the giant tabular `$` value in Capsule Display → the day-change line in green (up) or orange (down) — no pill chrome, just colored text. The value morphs in <100ms during chart scrubbing.
+
+```kotlin
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.togetherWith
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import java.text.NumberFormat
+import java.util.Locale
+
+private val usd = NumberFormat.getCurrencyInstance(Locale.US)
+
+@Composable
+fun PortfolioHero(
+    portfolioValue: Double,
+    dayChange: Double,
+    dayChangePct: Double,
+    modifier: Modifier = Modifier,
+) {
+    val up = dayChange >= 0
+    val changeColor = if (up) RobinhoodColors.Green else RobinhoodColors.Red
+    val sign = if (up) "+" else "−"
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 24.dp, vertical = 16.dp),
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        Text("BUYING POWER", style = RobinhoodText.AllCaps, color = RobinhoodColors.TextSecondary)
+        // Value morphs during scrub
+        AnimatedContent(
+            targetState = portfolioValue,
+            transitionSpec = { (fadeIn(tween(90)) togetherWith fadeOut(tween(90))) },
+            label = "portfolioValue",
+        ) { v ->
+            Text(usd.format(v), style = RobinhoodText.PortfolioHero, color = RobinhoodColors.TextPrimary)
+        }
+        Text(
+            "$sign${usd.format(kotlin.math.abs(dayChange))} ($sign${"%.2f".format(dayChangePct * 100)}%) Today",
+            style = RobinhoodText.DayChange,
+            color = changeColor,
+        )
+    }
+}
+```
+
+### Portfolio Chart with Scrubber (THE Robinhood interaction)
+
+Swift `Charts` has no Compose equivalent that supports the live scrubber idiomatically — draw it with `Canvas` and capture the drag with `pointerInput`. A 2.dp stroke in the day's color, **no fill below the line**, full-bleed. Dragging snaps the bubble to the nearest data point and drives the hero value (hoist `scrubValue` to the screen and feed it back into `PortfolioHero`).
+
+```kotlin
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.gestures.detectDragGestures
+import androidx.compose.runtime.*
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalHapticFeedback
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+
+@Composable
+fun PortfolioChart(
+    points: List<Float>,           // y-values, evenly spaced in x
+    isUp: Boolean,
+    onScrub: (index: Int?) -> Unit, // null on release → hero snaps back to current
+    modifier: Modifier = Modifier,
+) {
+    val lineColor = if (isUp) RobinhoodColors.Green else RobinhoodColors.Red
+    var activeIndex by remember { mutableStateOf<Int?>(null) }
+    val haptics = LocalHapticFeedback.current
+    val strokePx = with(androidx.compose.ui.platform.LocalDensity.current) { 2.dp.toPx() }
+
+    Canvas(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(220.dp) // 180 on small phones, 240 on Max — derive from windowSizeClass
+            .pointerInput(points) {
+                detectDragGestures(
+                    onDragStart = { off ->
+                        val idx = ((off.x / size.width) * (points.size - 1)).toInt().coerceIn(points.indices)
+                        activeIndex = idx; onScrub(idx)
+                        haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove)
+                    },
+                    onDrag = { change, _ ->
+                        val idx = ((change.position.x / size.width) * (points.size - 1)).toInt().coerceIn(points.indices)
+                        if (idx != activeIndex) {
+                            activeIndex = idx; onScrub(idx) // instant — no smoothing
+                        }
+                    },
+                    onDragEnd = { activeIndex = null; onScrub(null) },
+                    onDragCancel = { activeIndex = null; onScrub(null) },
+                )
+            },
+    ) {
+        if (points.size < 2) return@Canvas
+        val maxV = points.max(); val minV = points.min()
+        val range = (maxV - minV).takeIf { it != 0f } ?: 1f
+        fun px(i: Int) = size.width * i / (points.size - 1)
+        fun py(v: Float) = size.height * (1f - (v - minV) / range)
+
+        val path = Path().apply {
+            moveTo(px(0), py(points[0]))
+            for (i in 1 until points.size) lineTo(px(i), py(points[i]))
+        }
+        drawPath(path, color = lineColor, style = Stroke(width = strokePx)) // no fill below
+
+        activeIndex?.let { i ->
+            // thin vertical rule + solid black point bubble
+            drawLine(RobinhoodColors.TextPrimary, Offset(px(i), 0f), Offset(px(i), size.height), strokeWidth = 1f)
+            drawCircle(RobinhoodColors.TextPrimary, radius = 8f, center = Offset(px(i), py(points[i])))
+        }
+    }
+}
+```
+
+### Chart Range Chips
+
+Text-only, no container. Active flips to the chart-line color with a 2.dp underline.
+
+```kotlin
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+
+@Composable
+fun ChartRangeChips(
+    selected: String,
+    isUp: Boolean,
+    onSelect: (String) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val active = if (isUp) RobinhoodColors.Green else RobinhoodColors.Red
+    val ranges = listOf("1D", "1W", "1M", "3M", "YTD", "1Y", "5Y", "ALL")
+    val haptics = LocalHapticFeedback.current
+
+    Row(
+        modifier = modifier.fillMaxWidth().padding(horizontal = 16.dp),
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        ranges.forEach { r ->
+            val on = r == selected
+            Column(
+                horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally,
+                modifier = Modifier
+                    .weight(1f)
+                    .heightIn(min = 44.dp) // 44dp min touch even though visual is smaller
+                    .clickableNoRipple {
+                        onSelect(r)
+                        haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove)
+                    },
+            ) {
+                Text(
+                    r,
+                    style = RobinhoodText.RangeChip,
+                    color = if (on) active else RobinhoodColors.TextSecondary,
+                    modifier = Modifier.padding(vertical = 6.dp),
+                )
+                Box(
+                    Modifier
+                        .fillMaxWidth()
+                        .height(2.dp)
+                        .background(if (on) active else Color.Transparent)
+                )
+            }
+        }
+    }
+}
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.ui.composed
+fun Modifier.clickableNoRipple(onClick: () -> Unit): Modifier = composed {
+    clickable(remember { MutableInteractionSource() }, indication = null, onClick = onClick)
+}
+```
+
+### Position Row
+
+56.dp tall. 32.dp rounded-square logo, company name above tracked ticker + share count, market value + day-change (tabular) right-aligned, 0.5.dp bottom divider.
+
+```kotlin
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.Alignment
+import coil.compose.AsyncImage
+
+@Composable
+fun PositionRow(
+    ticker: String,
+    company: String,
+    shares: Double,
+    marketValue: Double,
+    dayChange: Double,
+    dayChangePct: Double,
+    logoUrl: String?,
+    modifier: Modifier = Modifier,
+) {
+    val up = dayChange >= 0
+    val changeColor = if (up) RobinhoodColors.Green else RobinhoodColors.Red
+    val sign = if (up) "+" else "−"
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(56.dp)
+            .padding(horizontal = 16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        if (logoUrl != null) {
+            AsyncImage(
+                model = logoUrl,
+                contentDescription = null,
+                contentScale = ContentScale.Crop,
+                modifier = Modifier.size(32.dp).clip(RoundedCornerShape(8.dp)),
+            )
+        } else {
+            Box(
+                Modifier.size(32.dp).clip(RoundedCornerShape(8.dp)).background(RobinhoodColors.SurfaceGray),
+                contentAlignment = Alignment.Center,
+            ) { Text(ticker.take(1), style = RobinhoodText.PositionTitle, color = RobinhoodColors.TextPrimary) }
+        }
+
+        Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(2.dp)) {
+            Text(company, style = RobinhoodText.PositionTitle, color = RobinhoodColors.TextPrimary, maxLines = 1)
+            Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
+                Text(ticker, style = RobinhoodText.Ticker, color = RobinhoodColors.TextSecondary)
+                Text("· ${shares.formatShares()} shares", style = RobinhoodText.BodySmall, color = RobinhoodColors.TextSecondary)
+            }
+        }
+
+        Column(horizontalAlignment = Alignment.End, verticalArrangement = Arrangement.spacedBy(2.dp)) {
+            Text(usd.format(marketValue), style = RobinhoodText.PositionValue, color = RobinhoodColors.TextPrimary)
+            Text(
+                "$sign${usd.format(kotlin.math.abs(dayChange))} ($sign${"%.2f".format(dayChangePct * 100)}%)",
+                style = RobinhoodText.PositionChange,
+                color = changeColor,
+            )
+        }
+    }
+    Spacer(Modifier.fillMaxWidth().height(0.5.dp).background(RobinhoodColors.DividerLight))
+}
+
+private fun Double.formatShares(): String =
+    if (this % 1.0 == 0.0) toInt().toString() else "%.4f".format(this).trimEnd('0').trimEnd('.')
+```
+
+### Trade Button (sticky footer) & Buy/Sell Pair
+
+The universal Trade CTA is **black** — green/orange are reserved for Buy/Sell inside the trade flow.
+
+```kotlin
+@Composable
+fun TradeButton(label: String, onClick: () -> Unit, modifier: Modifier = Modifier) {
+    val haptics = LocalHapticFeedback.current
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp)
+            .height(48.dp)
+            .clip(RoundedCornerShape(8.dp))
+            .background(RobinhoodColors.TextPrimary) // black, not green
+            .clickableNoRipple {
+                haptics.performHapticFeedback(HapticFeedbackType.LongPress) // ~impact medium
+                onClick()
+            },
+        contentAlignment = Alignment.Center,
+    ) { Text(label, style = RobinhoodText.ButtonPrimary, color = Color.White) }
+}
+
+@Composable
+fun BuySellButtons(onBuy: () -> Unit, onSell: () -> Unit, modifier: Modifier = Modifier) {
+    Row(modifier.fillMaxWidth().padding(horizontal = 16.dp), horizontalArrangement = Arrangement.spacedBy(12.dp)) {
+        Box(
+            Modifier.weight(1f).height(48.dp).clip(RoundedCornerShape(8.dp))
+                .background(RobinhoodColors.Red).clickableNoRipple(onSell),
+            contentAlignment = Alignment.Center,
+        ) { Text("Sell", style = RobinhoodText.ButtonPrimary, color = Color.White) }
+        Box(
+            Modifier.weight(1f).height(48.dp).clip(RoundedCornerShape(8.dp))
+                .background(RobinhoodColors.Green).clickableNoRipple(onBuy),
+            contentAlignment = Alignment.Center,
+        ) { Text("Buy", style = RobinhoodText.ButtonPrimary, color = Color.White) }
+    }
+}
+```
+
+## 4. The Portfolio Chart Scrubber — wiring the live hero update
+
+§3 draws the chart; this is the data flow that makes the scrubber Robinhood's signature. The screen owns the scrub index; while dragging, the hero shows the scrubbed value and on release snaps back to current. The numeric morph runs in <100ms via `AnimatedContent`.
+
+```kotlin
+@Composable
+fun InvestingScreen(
+    series: List<Pair<Long, Float>>, // (epochMillis, portfolioValue)
+    currentValue: Double,
+    dayChange: Double,
+    dayChangePct: Double,
+) {
+    var scrubIndex by remember { mutableStateOf<Int?>(null) }
+    val isUp = dayChange >= 0
+    val shownValue = scrubIndex?.let { series[it].second.toDouble() } ?: currentValue
+
+    Column {
+        PortfolioHero(
+            portfolioValue = shownValue,                // updates live during scrub
+            dayChange = dayChange,
+            dayChangePct = dayChangePct,
+        )
+        PortfolioChart(
+            points = series.map { it.second },
+            isUp = isUp,
+            onScrub = { scrubIndex = it },              // null on release → snaps back
+        )
+        ChartRangeChips(selected = "1D", isUp = isUp, onSelect = { /* reload series */ })
+    }
+}
+```
+
+Reduce-motion: skip the `AnimatedContent` morph during scrubbing — swap the value instantly (drag is already 60fps with no smoothing).
+
+## 5. Bottom Navigation (Tab Bar)
+
+Five labeled destinations in a Material 3 `NavigationBar`: Investing, Search, Crypto, Cash, Account. Active tint is **black** (not green — green is the direction signal). Solid surface, 0.5.dp top divider, no blur. Below it, a single sticky black Trade footer on the stock-detail screen.
+
+```kotlin
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.*
+
+@Composable
+fun RobinhoodBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    val haptics = LocalHapticFeedback.current
+    NavigationBar(
+        containerColor = RobinhoodColors.CanvasLight,
+        tonalElevation = 0.dp,
+    ) {
+        val tabs = listOf(
+            "Investing" to Icons.Filled.ShowChart,
+            "Search"    to Icons.Filled.Search,
+            "Crypto"    to Icons.Filled.CurrencyBitcoin,
+            "Cash"      to Icons.Filled.AccountBalanceWallet,
+            "Account"   to Icons.Filled.AccountCircle,
+        )
+        tabs.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = {
+                    onSelect(i)
+                    haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove) // selection
+                },
+                icon = { Icon(icon, label, modifier = Modifier.size(24.dp)) },
+                label = { Text(label, style = RobinhoodText.TabLabel) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor   = RobinhoodColors.TextPrimary, // black, not green
+                    selectedTextColor   = RobinhoodColors.TextPrimary,
+                    unselectedIconColor = RobinhoodColors.TextTertiary,
+                    unselectedTextColor = RobinhoodColors.TextTertiary,
+                    indicatorColor      = Color.Transparent,
+                ),
+            )
+        }
+    }
+}
+```
+
+## 6. Motion
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Chart scrubber drag | `pointerInput` + `detectDragGestures`, snap to nearest index, **no smoothing** (instant) |
+| Portfolio value update | `AnimatedContent` cross-fade `tween(90)` — <100ms numeric morph |
+| Buy/Sell confirm | `animateFloatAsState` 1 → 0.97 → 1 `spring(dampingRatio = 0.7f)` + `HapticFeedbackType.LongPress` (impact medium) |
+| Order placed | green particle burst (`Canvas` + `Animatable` over ~800ms) + `HapticFeedbackType.Confirm` (success) |
+| Tab switch | instant icon/label color change + `HapticFeedbackType.TextHandleMove` (selection) |
+| Range chip switch | `animateColorAsState` text + underline cross-fade `spring(stiffness = 700f)` |
+| Position row tap | `animateColorAsState` bg white → `SurfaceGray` over 150ms before navigating |
+
+```kotlin
+// Buy/Sell press scale
+@Composable
+fun rememberPressScale(interaction: MutableInteractionSource): Float {
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by animateFloatAsState(
+        if (pressed) 0.97f else 1f,
+        spring(dampingRatio = 0.7f, stiffness = 500f),
+        label = "pressScale",
+    )
+    return scale
+}
+```
+
+Haptics: prefer `LocalHapticFeedback`. The scrub tick and tab switch use `HapticFeedbackType.TextHandleMove` (selection-like); Buy/Sell confirm uses `LongPress` (impact medium); order success uses `HapticFeedbackType.Confirm`. For finer control, `Vibrator` `VibrationEffect.createOneShot(10, ...)` approximates iOS's medium impact.
+
+## 7. Icons
+
+Robinhood uses custom glyphs; the closest first-party set is `androidx.compose.material:material-icons-extended`. The portfolio chart is hand-drawn (§3, not an icon). Custom marks (success confetti, order states) ship as vector drawables via `ImageVector.vectorResource(...)`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Investing (tab) | `chart.line.uptrend.xyaxis` | `Icons.Filled.ShowChart` |
+| Search (tab) | `magnifyingglass` | `Icons.Filled.Search` |
+| Crypto (tab) | `bitcoinsign.circle` | `Icons.Filled.CurrencyBitcoin` |
+| Cash (tab) | `wallet.pass` | `Icons.Filled.AccountBalanceWallet` |
+| Account (tab) | `person.crop.circle` | `Icons.Filled.AccountCircle` |
+| Search (in field) | `magnifyingglass` | `Icons.Filled.Search` |
+| Set alert | `bell` / `bell.fill` | `Icons.Filled.NotificationsNone` / `Icons.Filled.Notifications` |
+| Add to list | `plus.circle` | `Icons.Filled.AddCircleOutline` |
+| Back | `chevron.left` | `Icons.AutoMirrored.Filled.ArrowBack` |
+| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
+| Order placed (success) | `checkmark.circle.fill` | `Icons.Filled.CheckCircle` |
+| Order failed | `xmark.circle.fill` | `Icons.Filled.Cancel` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24**. `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`. The chart is a hand-drawn `Canvas` (no extra dependency) so it works at minSdk with no Swift-Charts equivalent needed.
+- **Edge-to-edge**: call `enableEdgeToEdge()`. The light canvas wants dark-content system bars (white wants light-content on dark mode). The chart goes edge-to-edge; apply `Scaffold` insets only to the hero, lists, and the sticky Trade footer (clears gesture nav).
+- **Tabular numerals are critical**: every `Text` rendering a price, percent, or share count must use `fontFeatureSettings = "tnum"` (baked into the `RobinhoodText` styles). On the fallback font this guarantees columns align as the user scrolls a watchlist — the brand-defining rule.
+- **Font scaling**: `sp` honors user scale on body, secondary text, list rows. The portfolio hero (40sp) scales but **clamp at 56sp** to preserve layout; chart axis labels (11sp), range chips, and tab labels are fixed (layout-sensitive) — wrap in a fixed-`fontScale` `LocalDensity`. Position values honor scaling but clamp at 22sp.
+- **TalkBack**: the hero should announce "Buying power $24,847.93, up $847.93, up 3.52 percent today" via one merged `semantics`. Position rows: "Apple Inc., A A P L, 4 shares, market value $1,247.92, up $24.13, up 1.97 percent today". The chart needs a `contentDescription` summarizing the trend plus an accessible "scrub to time" affordance (the drag gesture alone is not TalkBack-reachable).
+- **Color-blind**: green/orange is the primary direction signal — always pair with the `+`/`−` sign prefix (already in the components) so it is never color-only. When `isHighTextContrastEnabled`/differentiate-without-color is set, prefix an up/down arrow on the change text.
+- **Touch targets**: range chips are visually small but must keep a 44.dp min hit (`heightIn(min = 44.dp)`, already applied); Trade button is 48.dp; tab items 56.dp.
+- **Contrast**: `#000000` on `#FFFFFF` is maximum; `#5C6166` on white passes AA at 14sp+; `#9B9EA3` (inactive tab labels) passes AA only at 18sp+ — keep the 10sp tab label at `#000000` once selected. Dark mode: green `#00C805` and orange `#FF5000` stay identical (they read electric on `#000000`).
+- **Dynamic color**: do **not** enable Material You `dynamicColorScheme()` — the stark white/true-black canvas and the direction-bound green/orange are the brand. A wallpaper-tinted primary would break the "color = direction" contract and the clean tech-product aesthetic.