designmd-forge 1.2.0

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

@@ -0,0 +1,620 @@
+# LinkedIn (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports LinkedIn's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, the feed card, avatar status rings, the 6-reaction picker, 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 (LinkedIn's desaturated cream canvas, the single authoritative blue, the six colored reactions, avatar status rings) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, a translucent `Surface` instead of iOS blur, `sp`/`dp` instead of `pt`, the reaction-picker stagger via `AnimatedVisibility`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and [Coil](https://coil-kt.github.io/coil/) `2.6+` for avatars, post media, and company logos. LinkedIn does no runtime color extraction, so no Palette dependency is needed.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/LinkedInColors.kt
+import androidx.compose.ui.graphics.Color
+
+object LIColors {
+    // Canvas & Surfaces
+    val Canvas        = Color(0xFFF3F2EF) // desaturated cream — NOT white
+    val CardSurface   = Color(0xFFFFFFFF)
+    val Elevated      = Color(0xFFF9F9F9)
+    val Divider       = Color(0xFFE0DFDC)
+    val DividerSubtle = Color(0xFFEDEDED)
+
+    // Text (alpha-on-black, softer than pure #000)
+    val TextPrimary   = Color(0xE6000000) // 90% black
+    val TextSecondary = Color(0x99000000) // 60% black
+    val TextTertiary  = Color(0x66000000) // 40% black
+    val TextOnBlue    = Color(0xFFFFFFFF)
+
+    // Brand
+    val Blue        = Color(0xFF0A66C2)
+    val BluePressed = Color(0xFF004182)
+    val BlueSubtle  = Color(0xFFE7F3FF)
+    val DeepNavy    = Color(0xFF00396B)
+
+    // Status / role
+    val OpenToWork     = Color(0xFF057642)
+    val OpenToWorkDark = Color(0xFF0B5B4C)
+    val PremiumGold    = Color(0xFF915907)
+    val PremiumGoldHi  = Color(0xFFC37D16)
+    val HiringPurple   = Color(0xFF6A3DAA)
+
+    // The six reactions (colored custom icons — never system emoji)
+    val ReactLike       = Color(0xFF0A66C2)
+    val ReactCelebrate  = Color(0xFFF5BB00)
+    val ReactSupport    = Color(0xFFB24020)
+    val ReactLove       = Color(0xFFDF704D)
+    val ReactInsightful = Color(0xFFE7A33E)
+    val ReactFunny      = Color(0xFF00A0DC)
+
+    // Semantic
+    val Error   = Color(0xFFCC1016)
+    val Success = Color(0xFF0B5B4C)
+
+    // Dark mode (charcoal — NOT true black)
+    val DarkCanvas    = Color(0xFF1B1F23)
+    val DarkCard      = Color(0xFF1D2226)
+    val DarkElevated  = Color(0xFF282E32)
+    val DarkDivider   = Color(0xFF38434F)
+    val DarkTextPri   = Color(0xE6FFFFFF) // 90% white
+    val DarkTextSec   = Color(0x99FFFFFF) // 60% white
+    val DarkBlue      = Color(0xFF70B5F9)
+}
+```
+
+LinkedIn defaults to the cream light surface; dark mode is charcoal (not true black). Wire both Material 3 schemes so ripples and default component colors inherit the brand.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.foundation.isSystemInDarkTheme
+
+private val LILight = lightColorScheme(
+    primary        = LIColors.Blue,
+    onPrimary      = LIColors.TextOnBlue,
+    background     = LIColors.Canvas,        // cream, NOT white — lets white cards float
+    onBackground   = LIColors.TextPrimary,
+    surface        = LIColors.CardSurface,
+    onSurface      = LIColors.TextPrimary,
+    surfaceVariant = LIColors.Elevated,
+    outline        = LIColors.Divider,
+    error          = LIColors.Error,
+)
+
+private val LIDark = darkColorScheme(
+    primary        = LIColors.DarkBlue,
+    onPrimary      = Color.Black,
+    background     = LIColors.DarkCanvas,
+    onBackground   = LIColors.DarkTextPri,
+    surface        = LIColors.DarkCard,
+    onSurface      = LIColors.DarkTextPri,
+    surfaceVariant = LIColors.DarkElevated,
+    outline        = LIColors.DarkDivider,
+)
+
+@Composable
+fun LinkedInTheme(content: @Composable () -> Unit) =
+    MaterialTheme(
+        colorScheme = if (isSystemInDarkTheme()) LIDark else LILight,
+        typography  = LITypography,
+        content     = content,
+    )
+```
+
+## 2. Typography
+
+LinkedIn uses the system font (SF Pro on iOS → Roboto on Android) — no custom face to bundle. Hierarchy is dense and text-first; no display type, no flourish.
+
+```kotlin
+// ui/theme/LinkedInType.kt
+import androidx.compose.material3.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+private val Sys = FontFamily.Default // Roboto — LinkedIn dropped its webfont for the native face
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1). Weights 400/600/700 only.
+object LIText {
+    val ProfileName   = TextStyle(Sys, fontWeight = FontWeight.Bold,     fontSize = 24.sp, lineHeight = 28.sp, letterSpacing = (-0.2).sp)
+    val ScreenTitle   = TextStyle(Sys, fontWeight = FontWeight.Bold,     fontSize = 20.sp, lineHeight = 24.sp, letterSpacing = (-0.2).sp)
+    val SectionHeader = TextStyle(Sys, fontWeight = FontWeight.Bold,     fontSize = 16.sp, lineHeight = 20.sp, letterSpacing = (-0.1).sp)
+    val PostAuthor    = TextStyle(Sys, fontWeight = FontWeight.SemiBold, fontSize = 14.sp, lineHeight = 18.sp)
+    val Headline      = TextStyle(Sys, fontWeight = FontWeight.Normal,   fontSize = 12.sp, lineHeight = 16.sp)
+    val PostBody      = TextStyle(Sys, fontWeight = FontWeight.Normal,   fontSize = 14.sp, lineHeight = 21.sp) // 1.5
+    val Meta          = TextStyle(Sys, fontWeight = FontWeight.Normal,   fontSize = 12.sp, lineHeight = 14.sp)
+    val ButtonPrimary = TextStyle(Sys, fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 16.sp)
+    val ButtonSecond  = TextStyle(Sys, fontWeight = FontWeight.SemiBold, fontSize = 14.sp, lineHeight = 14.sp)
+    val ActionBar     = TextStyle(Sys, fontWeight = FontWeight.SemiBold, fontSize = 13.sp, lineHeight = 13.sp)
+    val Body          = TextStyle(Sys, fontWeight = FontWeight.Normal,   fontSize = 14.sp, lineHeight = 20.sp)
+    val Tab           = TextStyle(Sys, fontWeight = FontWeight.Medium,   fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.1.sp)
+    val Badge         = TextStyle(Sys, fontWeight = FontWeight.Bold,     fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.4.sp)
+}
+
+// Map onto Material 3 slots so stock components inherit the brand
+val LITypography = Typography(
+    headlineSmall = LIText.ProfileName,
+    titleLarge    = LIText.ScreenTitle,
+    titleMedium   = LIText.SectionHeader,
+    bodyMedium    = LIText.PostBody,
+    labelLarge    = LIText.ButtonPrimary,
+    labelSmall    = LIText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Primary Pill Button (Connect / Follow / Apply)
+
+```kotlin
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+import androidx.compose.ui.unit.dp
+
+enum class LIPillVariant { Filled, Outline }
+
+@Composable
+fun LinkedInPillButton(
+    title: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    leadingIcon: ImageVector? = null,
+    variant: LIPillVariant = LIPillVariant.Filled,
+) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by animateFloatAsState(if (pressed) 0.98f else 1f, label = "pillScale")
+    val haptics = LocalHapticFeedback.current
+    val filled = variant == LIPillVariant.Filled
+
+    Row(
+        modifier
+            .scale(scale)
+            .clip(CircleShape)
+            .then(
+                if (filled) Modifier.background(if (pressed) LIColors.BluePressed else LIColors.Blue)
+                else Modifier.background(if (pressed) LIColors.BlueSubtle else Color.Transparent)
+                    .border(1.dp, LIColors.Blue, CircleShape)
+            )
+            .clickable(interaction, indication = null) {
+                haptics.performHapticFeedback(HapticFeedbackType.LongPress) // Connect/Apply get a success-y haptic
+                onClick()
+            }
+            .padding(horizontal = 16.dp, vertical = 8.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(6.dp),
+    ) {
+        if (leadingIcon != null) {
+            Icon(leadingIcon, contentDescription = null, tint = if (filled) Color.White else LIColors.Blue, modifier = Modifier.size(16.dp))
+        }
+        Text(
+            title,
+            style = if (filled) LIText.ButtonPrimary else LIText.ButtonSecond,
+            color = if (filled) Color.White else LIColors.Blue,
+        )
+    }
+}
+```
+
+### Avatar with Status Rings (Open-to-Work green / Premium gold)
+
+```kotlin
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.layout.ContentScale
+import coil.compose.AsyncImage
+
+@Composable
+fun AvatarView(
+    url: String,
+    size: androidx.compose.ui.unit.Dp,
+    isPremium: Boolean = false,
+    isOpenToWork: Boolean = false,
+) {
+    Box(Modifier.size(size + 8.dp), contentAlignment = Alignment.Center) {
+        // Premium gold gradient frame
+        if (isPremium) {
+            Box(
+                Modifier
+                    .size(size + 8.dp)
+                    .border(
+                        4.dp,
+                        Brush.verticalGradient(listOf(LIColors.PremiumGoldHi, LIColors.PremiumGold)),
+                        CircleShape,
+                    )
+            )
+        }
+        // Open to Work ring — can layer over Premium
+        if (isOpenToWork) {
+            Box(Modifier.size(size + 8.dp).border(4.dp, LIColors.OpenToWork, CircleShape))
+        }
+        AsyncImage(
+            model = url,
+            contentDescription = null,
+            modifier = Modifier.size(size).clip(CircleShape),
+            contentScale = ContentScale.Crop,
+        )
+    }
+}
+```
+
+### Feed Post Card (full-bleed, 0dp radius on phone)
+
+```kotlin
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.MoreHoriz
+import androidx.compose.material.icons.filled.Public
+import androidx.compose.ui.text.style.TextOverflow
+
+@Composable
+fun FeedPostCard(
+    authorName: String,
+    connectionDegree: String,   // "1st", "2nd", "3rd+"
+    headline: String,           // job title + company
+    timeAgo: String,            // "3d •"
+    body: String,
+    avatarUrl: String,
+    mediaUrl: String? = null,
+    isPremium: Boolean = false,
+    isOpenToWork: Boolean = false,
+) {
+    Column(Modifier.fillMaxWidth().background(LIColors.CardSurface)) {
+        Row(
+            Modifier.fillMaxWidth().padding(horizontal = 16.dp).padding(top = 12.dp),
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+            AvatarView(avatarUrl, 56.dp, isPremium, isOpenToWork)
+            Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(2.dp)) {
+                Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(4.dp)) {
+                    Text(authorName, style = LIText.PostAuthor, color = LIColors.TextPrimary)
+                    Text("• $connectionDegree", style = LIText.Meta, color = LIColors.TextSecondary)
+                }
+                Text(headline, style = LIText.Headline, color = LIColors.TextSecondary, maxLines = 2, overflow = TextOverflow.Ellipsis)
+                Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(4.dp)) {
+                    Text(timeAgo, style = LIText.Meta, color = LIColors.TextSecondary)
+                    Icon(Icons.Filled.Public, contentDescription = "Public", tint = LIColors.TextSecondary, modifier = Modifier.size(11.dp))
+                }
+            }
+            Box(Modifier.size(44.dp), contentAlignment = Alignment.Center) {
+                Icon(Icons.Filled.MoreHoriz, contentDescription = "More", tint = LIColors.TextSecondary, modifier = Modifier.size(20.dp))
+            }
+        }
+
+        Text(
+            body,
+            style = LIText.PostBody,
+            color = LIColors.TextPrimary,
+            modifier = Modifier.padding(horizontal = 16.dp).padding(top = 12.dp),
+        )
+
+        if (mediaUrl != null) {
+            AsyncImage(
+                model = mediaUrl,
+                contentDescription = null,
+                modifier = Modifier.fillMaxWidth().height(220.dp).padding(top = 12.dp),
+                contentScale = ContentScale.Crop,
+            )
+        }
+
+        ReactionFooterRow(reactionCount = 127, commentCount = 14, modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp))
+        Box(Modifier.fillMaxWidth().height(1.dp).background(LIColors.DividerSubtle))
+        ActionBar()
+    }
+}
+```
+
+### The 6-Reaction Picker (Long-press) — staggered cascade
+
+```kotlin
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
+import androidx.compose.animation.core.spring
+import androidx.compose.animation.core.tween
+import androidx.compose.material.icons.filled.ThumbUp
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.Lightbulb
+import androidx.compose.material.icons.filled.SentimentVerySatisfied
+import androidx.compose.material.icons.filled.VolunteerActivism
+import androidx.compose.material.icons.filled.Celebration
+import androidx.compose.material3.Surface
+import kotlinx.coroutines.delay
+
+enum class LIReaction(val icon: ImageVector, val color: Color, val label: String) {
+    Like(Icons.Filled.ThumbUp, LIColors.ReactLike, "Like"),
+    Celebrate(Icons.Filled.Celebration, LIColors.ReactCelebrate, "Celebrate"),
+    Support(Icons.Filled.VolunteerActivism, LIColors.ReactSupport, "Support"),
+    Love(Icons.Filled.Favorite, LIColors.ReactLove, "Love"),
+    Insightful(Icons.Filled.Lightbulb, LIColors.ReactInsightful, "Insightful"),
+    Funny(Icons.Filled.SentimentVerySatisfied, LIColors.ReactFunny, "Funny"),
+}
+
+@Composable
+fun ReactionPicker(visible: Boolean, onSelect: (LIReaction) -> Unit) {
+    val haptics = LocalHapticFeedback.current
+    var shown by remember { mutableStateOf(false) }
+    LaunchedEffect(visible) { shown = visible }
+
+    Surface(
+        shape = CircleShape,
+        color = LIColors.CardSurface,
+        shadowElevation = 16.dp, // ≈ rgba(0,0,0,0.12) 0 4px 16px
+    ) {
+        Row(
+            Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+            LIReaction.entries.forEachIndexed { i, reaction ->
+                var itemVisible by remember { mutableStateOf(false) }
+                LaunchedEffect(shown) {
+                    if (shown) { delay(i * 40L); itemVisible = true } else itemVisible = false // 40ms stagger
+                }
+                AnimatedVisibility(
+                    visible = itemVisible,
+                    enter = scaleIn(spring(dampingRatio = 0.55f), initialScale = 0f) + fadeIn(),
+                    exit = scaleOut(tween(120)) + fadeOut(),
+                ) {
+                    Box(
+                        Modifier
+                            .size(40.dp)
+                            .clip(CircleShape)
+                            .clickable {
+                                haptics.performHapticFeedback(HapticFeedbackType.LongPress) // success on release
+                                onSelect(reaction)
+                            },
+                        contentAlignment = Alignment.Center,
+                    ) {
+                        Icon(reaction.icon, contentDescription = "React with ${reaction.label}", tint = reaction.color, modifier = Modifier.size(24.dp))
+                    }
+                }
+            }
+        }
+    }
+}
+```
+
+### Reaction Footer Row (overlapping reaction stack)
+
+```kotlin
+@Composable
+fun ReactionFooterRow(reactionCount: Int, commentCount: Int, modifier: Modifier = Modifier) {
+    Row(modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
+        Row(horizontalArrangement = Arrangement.spacedBy((-8).dp)) {
+            ReactionBubble(LIColors.ReactLike, Icons.Filled.ThumbUp)
+            ReactionBubble(LIColors.ReactCelebrate, Icons.Filled.Celebration)
+            ReactionBubble(LIColors.ReactLove, Icons.Filled.Favorite)
+        }
+        Spacer(Modifier.width(4.dp))
+        Text("$reactionCount", style = LIText.Meta, color = LIColors.TextSecondary)
+        Spacer(Modifier.weight(1f))
+        Text("$commentCount comments", style = LIText.Meta, color = LIColors.TextSecondary)
+    }
+}
+
+@Composable
+private fun ReactionBubble(color: Color, icon: ImageVector) {
+    Box(
+        Modifier
+            .size(20.dp)
+            .clip(CircleShape)
+            .background(color)
+            .border(2.dp, LIColors.CardSurface, CircleShape),
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(icon, contentDescription = null, tint = Color.White, modifier = Modifier.size(10.dp))
+    }
+}
+```
+
+### Action Bar (Like / Comment / Repost / Send)
+
+```kotlin
+import androidx.compose.material.icons.outlined.ThumbUp
+import androidx.compose.material.icons.outlined.ChatBubbleOutline
+import androidx.compose.material.icons.filled.Repeat
+import androidx.compose.material.icons.outlined.Send
+import androidx.compose.foundation.combinedClickable
+
+@Composable
+fun ActionBar() {
+    var isLiked by remember { mutableStateOf(false) }
+    var pickerVisible by remember { mutableStateOf(false) }
+    val haptics = LocalHapticFeedback.current
+
+    Row(Modifier.fillMaxWidth().height(44.dp)) {
+        Box(Modifier.weight(1f).fillMaxHeight()) {
+            ActionItem(
+                icon = if (isLiked) Icons.Filled.ThumbUp else Icons.Outlined.ThumbUp,
+                label = "Like",
+                tint = if (isLiked) LIColors.Blue else LIColors.TextSecondary,
+                modifier = Modifier.combinedClickable(
+                    onClick = {
+                        isLiked = !isLiked
+                        haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove) // soft
+                    },
+                    onLongClick = { pickerVisible = true },
+                ),
+            )
+        }
+        ActionItem(Icons.Outlined.ChatBubbleOutline, "Comment", LIColors.TextSecondary, Modifier.weight(1f).fillMaxHeight())
+        ActionItem(Icons.Filled.Repeat, "Repost", LIColors.TextSecondary, Modifier.weight(1f).fillMaxHeight())
+        ActionItem(Icons.Outlined.Send, "Send", LIColors.TextSecondary, Modifier.weight(1f).fillMaxHeight())
+    }
+}
+
+@Composable
+private fun ActionItem(icon: ImageVector, label: String, tint: Color, modifier: Modifier) {
+    Row(modifier, verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Center) {
+        Icon(icon, contentDescription = label, tint = tint, modifier = Modifier.size(20.dp))
+        Spacer(Modifier.width(6.dp))
+        Text(label, style = LIText.ActionBar, color = tint)
+    }
+}
+```
+
+## 4. The 6-Reaction Picker — the distinctive system
+
+LinkedIn does no color extraction; its most recognizable UI moment is the **long-press 6-reaction picker** (Like / Celebrate / Support / Love / Insightful / Funny). The picker implementation lives in §3; this section documents the interaction model that makes it distinctive:
+
+- **Long-press (400ms)** on the Like button pops the picker — six 40.dp circular icon buttons, 12.dp gap, inside a white capsule with `shadowElevation = 16.dp`.
+- **Staggered entrance**: each icon scales `0 → 1.1 → 1.0` (spring) with a **40ms stagger** (`delay(index * 40L)`), so the row cascades open left-to-right.
+- **Drag-to-hover** (optional refinement): track the pointer with `Modifier.pointerInput`; the hovered icon scales to 1.3 and translates up 8.dp via `animateFloatAsState`, others dim to 60% alpha.
+- **Release over an icon**: success haptic (`LongPress`) + the reaction flies into the post's Like slot. Each reaction stays a **colored custom icon** — never a system emoji.
+
+The footer reaction stack (three overlapping 20.dp icons) and the action-bar Like state both reflect the chosen reaction's color. Never collapse this to a single thumbs-up; the six reactions are the brand.
+
+## 5. Navigation (Bottom Tab Bar)
+
+Use Material 3 `NavigationBar`. LinkedIn's iOS tab bar is opaque white with a 1pt top divider (it gains `.regularMaterial` blur on scroll; Android has no live blur, so use an opaque surface). **Active tint is near-black (`#000000E6`), not blue** — blue is reserved for verbs and links. LinkedIn shows an underline bar below the active icon rather than a Material pill.
+
+```kotlin
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.People
+import androidx.compose.material.icons.filled.AddBox
+import androidx.compose.material.icons.filled.Notifications
+import androidx.compose.material.icons.filled.BusinessCenter
+import androidx.compose.material3.*
+
+@Composable
+fun LinkedInBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    val items = listOf(
+        "Home"          to Icons.Filled.Home,
+        "My Network"    to Icons.Filled.People,
+        "Post"          to Icons.Filled.AddBox,
+        "Notifications" to Icons.Filled.Notifications,
+        "Jobs"          to Icons.Filled.BusinessCenter,
+    )
+    val haptics = LocalHapticFeedback.current
+    NavigationBar(
+        containerColor = LIColors.CardSurface,
+        tonalElevation = 0.dp,
+    ) {
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = {
+                    haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove)
+                    onSelect(i)
+                },
+                icon = {
+                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                        Icon(icon, contentDescription = label, modifier = Modifier.size(24.dp))
+                        if (selected == i) {
+                            Spacer(Modifier.height(2.dp))
+                            Box(Modifier.size(width = 24.dp, height = 2.dp).background(LIColors.TextPrimary))
+                        }
+                    }
+                },
+                label = { Text(label, style = LIText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor   = LIColors.TextPrimary,  // near-black, NOT blue
+                    selectedTextColor   = LIColors.TextPrimary,
+                    unselectedIconColor = LIColors.TextSecondary,
+                    unselectedTextColor = LIColors.TextSecondary,
+                    indicatorColor      = Color.Transparent,     // LinkedIn uses an underline, no pill
+                ),
+            )
+        }
+    }
+}
+```
+
+The top nav (28.dp avatar leading, pill search field center, messaging icon trailing) is a plain `Row` on `LIColors.CardSurface` with a 1.dp `Divider` that appears on scroll — Android has no first-class scroll-edge nav material, so toggle the divider via scroll state.
+
+## 6. Motion
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Button press | `animateFloatAsState` 1 → 0.98 + 120ms ease background shift; haptic only on Connect/Apply/Send |
+| Like tap | `Animatable` 1.0 → 1.3 → 1.0 `spring(dampingRatio = 0.6f)` + fill color + `TextHandleMove` (soft) haptic |
+| Long-press → reaction picker | 400ms hold → picker `AnimatedVisibility` with 40ms-stagger spring cascade |
+| Pull-to-refresh | indeterminate then determinate linear blue progress bar at top of nav |
+| Message send | arrow rotates -90° + slides up 200ms + bubble flies into chat `spring` 350ms |
+| Connection accepted | confetti emitter (Connections only, not Follows) + success haptic |
+| Tab switch | instant; underline bar slides between tabs in 200ms ease-out |
+
+```kotlin
+// Like-icon spring pop
+@Composable
+fun LikeButton(isLiked: Boolean, onToggle: () -> Unit, onLongPress: () -> Unit) {
+    val scale = remember { Animatable(1f) }
+    val haptics = LocalHapticFeedback.current
+    LaunchedEffect(isLiked) {
+        if (isLiked) {
+            scale.animateTo(1.3f, spring(dampingRatio = 0.6f))
+            scale.animateTo(1f, spring(dampingRatio = 0.6f))
+        }
+    }
+    Icon(
+        if (isLiked) Icons.Filled.ThumbUp else Icons.Outlined.ThumbUp,
+        contentDescription = if (isLiked) "Liked" else "Like",
+        tint = if (isLiked) LIColors.Blue else LIColors.TextSecondary,
+        modifier = Modifier
+            .size(20.dp)
+            .scale(scale.value)
+            .combinedClickable(
+                onClick = { onToggle(); haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove) },
+                onLongClick = onLongPress,
+            ),
+    )
+}
+```
+
+LinkedIn's motion is minimal and functional. Haptics: `LocalHapticFeedback` — `TextHandleMove` ≈ iOS `.soft` (Like, tab switch), `LongPress` ≈ `.success` (Connect, Apply, reaction release). Most plain buttons get **no** haptic — LinkedIn pairs feedback only with Connect/Apply/Send and reactions.
+
+## 7. Icons
+
+The SF Symbols map to Material Icons (`androidx.compose.material:material-icons-extended`). LinkedIn's six reactions are brand-specific colored glyphs — Material approximations are listed; ship custom vector drawables for exact parity.
+
+| Component | SF Symbol (iOS) | Material Icon (Compose) |
+|-----------|-----------------|--------------------------|
+| Home (tab) | `house.fill` | `Icons.Filled.Home` |
+| Network (tab) | `person.2.fill` | `Icons.Filled.People` |
+| Post (tab) | `plus.app.fill` | `Icons.Filled.AddBox` |
+| Notifications (tab) | `bell.fill` | `Icons.Filled.Notifications` |
+| Jobs (tab) | `briefcase.fill` | `Icons.Filled.BusinessCenter` |
+| Search | `magnifyingglass` | `Icons.Filled.Search` |
+| Messaging | `message` / `message.fill` | `Icons.Outlined.ChatBubbleOutline` |
+| Ellipsis / More | `ellipsis` | `Icons.Filled.MoreHoriz` |
+| Like | `hand.thumbsup` / `.fill` | `Icons.Outlined.ThumbUp` / `Icons.Filled.ThumbUp` |
+| Celebrate | `hands.clap.fill` | `Icons.Filled.Celebration` (custom clapping vector preferred) |
+| Support | `heart.circle.fill` | `Icons.Filled.VolunteerActivism` |
+| Love | `heart.fill` | `Icons.Filled.Favorite` |
+| Insightful | `lightbulb.fill` | `Icons.Filled.Lightbulb` |
+| Funny | `face.smiling.fill` | `Icons.Filled.SentimentVerySatisfied` |
+| Comment | `bubble.left` | `Icons.Outlined.ChatBubbleOutline` |
+| Repost | `arrow.2.squarepath` | `Icons.Filled.Repeat` |
+| Send | `paperplane` / `.fill` | `Icons.Outlined.Send` |
+| Connect | `person.badge.plus` | `Icons.Filled.PersonAddAlt` |
+| Globe (public post) | `globe.americas.fill` | `Icons.Filled.Public` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; `combinedClickable` long-press, modern motion, `AnimatedVisibility` stagger are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()` in the `Activity`. The cream canvas wants dark-content system bars (`isAppearanceLightStatusBars = true`); charcoal dark mode flips to light-content. Feed cards are full-bleed (0.dp radius) on phone; apply 8.dp radius + 16.dp margin only on large/tablet widths. `Scaffold` insets keep the tab bar clear of the gesture nav.
+- **Font scaling**: `sp` honors the user's font scale automatically — keep it on post body, comments, profile name. Pin layout-sensitive text (timestamps, connection degree, 11.sp tab labels, badge labels) by wrapping in `CompositionLocalProvider(LocalDensity provides Density(LocalDensity.current.density, fontScale = 1f))`.
+- **TalkBack**: each of the six reactions needs a distinct `contentDescription` ("React with Like", "React with Celebrate", …). Group the author row into one element — "Sarah Chen, 1st connection, Principal Designer at Figma, posted 3 days ago" — via `Modifier.semantics(mergeDescendants = true)`. The long-press picker needs a TalkBack-reachable alternative: expose the six reactions as `Modifier.semantics { customActions = … }` on the Like button.
+- **Touch targets**: Material guidance is 48.dp minimum. Reaction-picker icons are 40.dp visual — give them 48.dp hit areas via padding. Action-bar items already fill a 44.dp row; the post `MoreHoriz` glyph gets a 44.dp box. Feed avatar (56.dp) is full-row tappable for the profile.
+- **Contrast**: `#000000E6` (90% black) on both cream `#F3F2EF` and white `#FFFFFF` meets WCAG AA for 14sp body; `#00000099` (60% black) also passes AA at body sizes. `#0A66C2` blue on white passes AA for 16sp SemiBold.
+- **Reduce Motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0f`, disable the picker's scale-and-stagger entrance (fade-in only) and skip the like-icon spring pop and connection confetti.
+- **Material You**: do **not** enable `dynamicColorScheme()` — LinkedIn's restraint (cream canvas + single authoritative blue) is professional signaling and must hold regardless of wallpaper. Dark mode is the deliberate charcoal `#1B1F23`, not true black; blue shifts to `#70B5F9` for contrast.