designmd-forge 1.2.0

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

@@ -0,0 +1,605 @@
+# Reddit (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Reddit'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 upvote/downvote column, the warm-orange brand vs the complementary vote pair, flat cards, 10.dp comment-indent rules) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `Animatable` bounce instead of SwiftUI keyframes, `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 post media + subreddit avatars.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/RedditColors.kt
+import androidx.compose.ui.graphics.Color
+
+object RedditColors {
+    // Brand
+    val BrandRed        = Color(0xFFFF4500)
+    val AlertRed        = Color(0xFFFF585B)
+    val BrandRedPressed = Color(0xFFCC3700)
+
+    // Vote semantic pair — complementary, warm vs cool, never both lit at once
+    val Upvote           = Color(0xFFFF8717)
+    val UpvoteDark       = Color(0xFFFFAA66)
+    val Downvote         = Color(0xFF7193FF)
+    val DownvoteDark     = Color(0xFF9494FF)
+    val VoteInactive     = Color(0xFF878A8C)
+    val VoteInactiveDark = Color(0xFF818384)
+
+    // Canvas & Surface (Light)
+    val CanvasLight        = Color(0xFFF6F7F8)
+    val CanvasClassicLight = Color(0xFFDAE0E6)
+    val CardLight          = Color(0xFFFFFFFF)
+    val Surface2Light      = Color(0xFFF2F3F5)
+    val DividerLight       = Color(0xFFEDEFF1)
+
+    // Canvas & Surface (Dark)
+    val CanvasDark   = Color(0xFF1A1A1B)
+    val CardDark     = Color(0xFF272729)
+    val Surface2Dark = Color(0xFF343536)
+    val DividerDark  = Color(0xFF343536)
+
+    // Text
+    val TextPrimaryLight   = Color(0xFF1A1A1B)
+    val TextSecondaryLight = Color(0xFF7C7C7C)
+    val TextTertiaryLight  = Color(0xFFAFAFAF)
+    val TextPrimaryDark    = Color(0xFFD7DADC)
+    val TextSecondaryDark  = Color(0xFF818384)
+    val TextLink           = Color(0xFF0079D3)
+
+    // Semantic
+    val SuccessGreen   = Color(0xFF46D160)
+    val WarningYellow  = Color(0xFFFFB000)
+    val NSFWYellow     = Color(0xFFF3B200)
+    val Gold           = Color(0xFFFFB000)
+    val PremiumGold    = Color(0xFFFFD635)
+    val SubredditDefault = Color(0xFF0079D3)
+}
+```
+
+Wire a Material 3 `lightColorScheme` / `darkColorScheme`. Reddit's brand red is *not* the upvote color — keep `primary` as the brand red for CTAs and let the vote pair live as explicit tokens (never mapped to `primary`/`secondary`, so a wrong default can never tint a vote arrow).
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+import androidx.compose.foundation.isSystemInDarkTheme
+
+private val RedditLight = lightColorScheme(
+    primary        = RedditColors.BrandRed,
+    onPrimary      = Color.White,
+    background     = RedditColors.CanvasLight,
+    onBackground   = RedditColors.TextPrimaryLight,
+    surface        = RedditColors.CardLight,
+    onSurface      = RedditColors.TextPrimaryLight,
+    surfaceVariant = RedditColors.Surface2Light,
+    outline        = RedditColors.DividerLight,
+    error          = RedditColors.AlertRed,
+)
+
+private val RedditDark = darkColorScheme(
+    primary        = RedditColors.BrandRed,
+    onPrimary      = Color.White,
+    background     = RedditColors.CanvasDark,
+    onBackground   = RedditColors.TextPrimaryDark,
+    surface        = RedditColors.CardDark,
+    onSurface      = RedditColors.TextPrimaryDark,
+    surfaceVariant = RedditColors.Surface2Dark,
+    outline        = RedditColors.DividerDark,
+    error          = RedditColors.AlertRed,
+)
+
+@Composable
+fun RedditTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) RedditDark else RedditLight,
+    typography  = RedditTypography,
+    content     = content,
+)
+```
+
+## 2. Typography
+
+Reddit Sans (2023+) is proprietary. Drop the TTFs in `res/font/` and build a `FontFamily`; fall back to the system font (Roboto) — a humanist sans tuned for long reading sessions is the closest free substitute. Use Reddit Mono / `FontFamily.Monospace` for code.
+
+```kotlin
+// ui/theme/RedditType.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 RedditSans = FontFamily(
+    Font(R.font.reddit_sans_regular,  FontWeight.Normal),   // 400 — body workhorse
+    Font(R.font.reddit_sans_medium,   FontWeight.Medium),   // 500 — usernames
+    Font(R.font.reddit_sans_semibold, FontWeight.SemiBold), // 600 — post titles
+    Font(R.font.reddit_sans_bold,     FontWeight.Bold),     // 700 — headlines / karma
+)
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
+object RedditText {
+    val LargeTitle    = TextStyle(RedditSans, fontWeight = FontWeight.Bold,     fontSize = 24.sp, lineHeight = 29.sp, letterSpacing = (-0.3).sp)
+    val PostTitle     = TextStyle(RedditSans, fontWeight = FontWeight.SemiBold, fontSize = 18.sp, lineHeight = 23.sp, letterSpacing = (-0.2).sp)
+    val Body          = TextStyle(RedditSans, fontWeight = FontWeight.Normal,   fontSize = 14.sp, lineHeight = 21.sp, letterSpacing = (-0.1).sp)
+    val Metadata      = TextStyle(RedditSans, fontWeight = FontWeight.Normal,   fontSize = 12.sp, lineHeight = 16.sp)
+    val Karma         = TextStyle(RedditSans, fontWeight = FontWeight.Bold,     fontSize = 12.sp, lineHeight = 12.sp)
+    val SubredditPill = TextStyle(RedditSans, fontWeight = FontWeight.SemiBold, fontSize = 12.sp, lineHeight = 12.sp)
+    val FlairPill     = TextStyle(RedditSans, fontWeight = FontWeight.SemiBold, fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.2.sp)
+    val Username      = TextStyle(RedditSans, fontWeight = FontWeight.Medium,   fontSize = 12.sp, lineHeight = 14.sp)
+    val Button        = TextStyle(RedditSans, fontWeight = FontWeight.SemiBold, fontSize = 14.sp, lineHeight = 14.sp)
+    val TabLabel      = TextStyle(RedditSans, fontWeight = FontWeight.Medium,   fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.1.sp)
+    val NavTitle      = TextStyle(RedditSans, fontWeight = FontWeight.SemiBold, fontSize = 17.sp, lineHeight = 20.sp, letterSpacing = (-0.2).sp)
+    val SectionHeader = TextStyle(RedditSans, fontWeight = FontWeight.Bold,     fontSize = 13.sp, lineHeight = 16.sp, letterSpacing = 0.5.sp)
+    val Code          = TextStyle(FontFamily.Monospace, fontWeight = FontWeight.Normal, fontSize = 13.sp, lineHeight = 20.sp)
+}
+
+val RedditTypography = Typography(
+    headlineSmall = RedditText.LargeTitle,
+    titleMedium   = RedditText.PostTitle,
+    bodyMedium    = RedditText.Body,
+    labelMedium   = RedditText.Metadata,
+    labelSmall    = RedditText.TabLabel,
+)
+```
+
+## 3. Signature Components
+
+### Vote Column (the signature control)
+
+Up-chevron + karma number + down-chevron, on **every** post and comment. Upvote is warm orange, downvote is cool blue-purple — only one can be lit. Tap = state change + scale bounce + selection haptic + karma tick.
+
+```kotlin
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.spring
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowDownward
+import androidx.compose.material.icons.filled.ArrowUpward
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.launch
+
+enum class VoteState { NONE, UP, DOWN }
+
+@Composable
+fun RedditVoteColumn(
+    state: VoteState,
+    baseKarma: Int,
+    onVote: (VoteState) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val haptics = LocalHapticFeedback.current
+    val scope = rememberCoroutineScope()
+    val upScale = remember { Animatable(1f) }
+    val downScale = remember { Animatable(1f) }
+
+    val displayKarma = when (state) {
+        VoteState.UP -> baseKarma + 1
+        VoteState.DOWN -> baseKarma - 1
+        VoteState.NONE -> baseKarma
+    }
+    val accent by animateColorAsState(
+        when (state) {
+            VoteState.UP -> RedditColors.Upvote
+            VoteState.DOWN -> RedditColors.Downvote
+            VoteState.NONE -> RedditColors.VoteInactive
+        },
+        label = "voteColor",
+    )
+
+    suspend fun bounce(a: Animatable<Float, *>) {
+        a.animateTo(1.25f, spring(dampingRatio = 0.55f, stiffness = 900f))
+        a.animateTo(1f, spring(dampingRatio = 0.7f, stiffness = 700f))
+    }
+
+    Column(
+        modifier = modifier.width(44.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        Icon(
+            Icons.Filled.ArrowUpward,
+            contentDescription = "Upvote",
+            tint = if (state == VoteState.UP) RedditColors.Upvote else RedditColors.VoteInactive,
+            modifier = Modifier
+                .size(18.dp)
+                .scale(upScale.value)
+                .then(Modifier.clickableNoRipple {
+                    onVote(if (state == VoteState.UP) VoteState.NONE else VoteState.UP)
+                    haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove) // ~selection
+                    scope.launch { bounce(upScale) }
+                }),
+        )
+        Text("$displayKarma", style = RedditText.Karma, color = accent)
+        Icon(
+            Icons.Filled.ArrowDownward,
+            contentDescription = "Downvote",
+            tint = if (state == VoteState.DOWN) RedditColors.Downvote else RedditColors.VoteInactive,
+            modifier = Modifier
+                .size(18.dp)
+                .scale(downScale.value)
+                .then(Modifier.clickableNoRipple {
+                    onVote(if (state == VoteState.DOWN) VoteState.NONE else VoteState.DOWN)
+                    haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove)
+                    scope.launch { bounce(downScale) }
+                }),
+        )
+    }
+}
+
+// Small helper used across components: clickable with no ripple
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.runtime.Composable
+fun Modifier.clickableNoRipple(onClick: () -> Unit): Modifier = composed {
+    clickable(
+        interactionSource = remember { MutableInteractionSource() },
+        indication = null,
+        onClick = onClick,
+    )
+}
+```
+
+### Post Card (the signature container)
+
+Flat — 16.dp corner radius in card view (or 0.dp full-bleed classic), **no shadow**. Header row (subreddit avatar + `r/name` pill + timestamp) → title → optional flair → media → action row with the vote column on the left.
+
+```kotlin
+import androidx.compose.foundation.background
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.style.TextOverflow
+import coil.compose.AsyncImage
+
+data class Flair(val text: String, val bg: Color, val fg: Color, val emoji: String? = null)
+
+@Composable
+fun RedditPostCard(
+    subredditName: String,
+    subredditAvatarUrl: String?,
+    subredditAccent: Color,
+    timestamp: String,
+    commentCount: Int,
+    title: String,
+    flairs: List<Flair>,
+    mediaUrl: String?,
+    baseKarma: Int,
+    modifier: Modifier = Modifier,
+) {
+    var vote by remember { mutableStateOf(VoteState.NONE) }
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp, vertical = 4.dp)
+            .clip(RoundedCornerShape(16.dp)) // flat — no shadow
+            .background(RedditColors.CardLight)
+            .padding(12.dp),
+        verticalArrangement = Arrangement.spacedBy(10.dp),
+    ) {
+        // Header
+        Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(6.dp)) {
+            AsyncImage(
+                model = subredditAvatarUrl,
+                contentDescription = null,
+                contentScale = ContentScale.Crop,
+                modifier = Modifier.size(20.dp).clip(CircleShape),
+            )
+            Text("r/$subredditName", style = RedditText.SubredditPill, color = RedditColors.TextPrimaryLight)
+            Text("•", style = RedditText.Metadata, color = RedditColors.TextSecondaryLight)
+            Text(timestamp, style = RedditText.Metadata, color = RedditColors.TextSecondaryLight)
+            Spacer(Modifier.weight(1f))
+            RedditJoinButton(accent = subredditAccent)
+        }
+
+        Text(title, style = RedditText.PostTitle, color = RedditColors.TextPrimaryLight, maxLines = 3, overflow = TextOverflow.Ellipsis)
+
+        if (flairs.isNotEmpty()) {
+            LazyRow(horizontalArrangement = Arrangement.spacedBy(6.dp)) {
+                items(flairs) { RedditFlairPill(it) }
+            }
+        }
+
+        if (mediaUrl != null) {
+            AsyncImage(
+                model = mediaUrl,
+                contentDescription = null,
+                contentScale = ContentScale.Crop,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .heightIn(max = 300.dp)
+                    .clip(RoundedCornerShape(8.dp)),
+            )
+        }
+
+        // Action row — vote column LEFT
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            RedditVoteColumn(state = vote, baseKarma = baseKarma, onVote = { vote = it })
+            Spacer(Modifier.weight(1f))
+            Row(horizontalArrangement = Arrangement.spacedBy(16.dp), verticalAlignment = Alignment.CenterVertically) {
+                ActionIcon(Icons.AutoMirrored.Filled.Comment, "$commentCount")
+                ActionIcon(Icons.Filled.IosShare, null)
+                ActionIcon(Icons.Filled.BookmarkBorder, null)
+                ActionIcon(Icons.Filled.MoreHoriz, null)
+            }
+        }
+    }
+}
+
+@Composable
+private fun ActionIcon(icon: androidx.compose.ui.graphics.vector.ImageVector, label: String?) {
+    Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(4.dp)) {
+        Icon(icon, contentDescription = label, tint = RedditColors.TextSecondaryLight, modifier = Modifier.size(18.dp))
+        if (label != null) Text(label, style = RedditText.Metadata, color = RedditColors.TextSecondaryLight)
+    }
+}
+```
+
+### Flair Pill
+
+4.dp rounded rectangle (not a full pill) with per-subreddit or per-system colors.
+
+```kotlin
+@Composable
+fun RedditFlairPill(flair: Flair) {
+    Row(
+        modifier = Modifier
+            .clip(RoundedCornerShape(4.dp))
+            .background(flair.bg)
+            .padding(horizontal = 6.dp, vertical = 3.dp),
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        flair.emoji?.let { Text(it, style = RedditText.FlairPill) }
+        Text(flair.text, style = RedditText.FlairPill, color = flair.fg)
+    }
+}
+
+// Common system flairs
+val FlairNSFW    = Flair("NSFW",    RedditColors.NSFWYellow,   Color.Black)
+val FlairSpoiler = Flair("SPOILER", Color.Black,               Color.White)
+val FlairOC      = Flair("OC",      RedditColors.SuccessGreen, Color.White)
+```
+
+### Comment Row (indentation rule)
+
+Each reply level indents 10.dp with a 2.dp vertical rule on the leading edge. Collapse via a `[-]`/`[+]` toggle.
+
+```kotlin
+data class RedditComment(
+    val username: String,
+    val karma: Int,
+    val timestamp: String,
+    val body: String,
+    val depth: Int,
+)
+
+@Composable
+fun RedditCommentRow(comment: RedditComment, modifier: Modifier = Modifier) {
+    var collapsed by remember { mutableStateOf(false) }
+
+    Row(modifier = modifier.fillMaxWidth()) {
+        // One 2.dp rule per depth level, 10.dp apart
+        repeat(comment.depth) {
+            Spacer(
+                Modifier
+                    .padding(start = 10.dp)
+                    .width(2.dp)
+                    .fillMaxHeight()
+                    .background(RedditColors.DividerLight)
+            )
+        }
+        Column(
+            modifier = Modifier
+                .padding(start = 8.dp, top = 10.dp, bottom = 10.dp)
+                .weight(1f),
+            verticalArrangement = Arrangement.spacedBy(6.dp),
+        ) {
+            Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(6.dp)) {
+                Text(
+                    if (collapsed) "[+]" else "[−]",
+                    style = RedditText.Metadata,
+                    color = RedditColors.TextSecondaryLight,
+                    modifier = Modifier.clickableNoRipple { collapsed = !collapsed },
+                )
+                Text("u/${comment.username}", style = RedditText.Username, color = RedditColors.TextPrimaryLight)
+                Text("•", style = RedditText.Metadata, color = RedditColors.TextSecondaryLight)
+                Text(comment.timestamp, style = RedditText.Metadata, color = RedditColors.TextSecondaryLight)
+                Text("•", style = RedditText.Metadata, color = RedditColors.TextSecondaryLight)
+                Text("${comment.karma}", style = RedditText.Username, color = RedditColors.TextSecondaryLight)
+            }
+            if (!collapsed) {
+                Text(comment.body, style = RedditText.Body, color = RedditColors.TextPrimaryLight)
+            }
+        }
+    }
+}
+```
+
+### Subreddit Join Button (subreddit-accent tinted)
+
+```kotlin
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.foundation.border
+
+@Composable
+fun RedditJoinButton(accent: Color, modifier: Modifier = Modifier) {
+    var joined by remember { mutableStateOf(false) }
+    val haptics = LocalHapticFeedback.current
+
+    Row(
+        modifier = modifier
+            .clip(CircleShape)
+            .then(if (joined) Modifier.border(1.dp, accent, CircleShape) else Modifier.background(accent))
+            .clickableNoRipple {
+                joined = !joined
+                haptics.performHapticFeedback(HapticFeedbackType.LongPress)
+            }
+            .padding(horizontal = 14.dp, vertical = 4.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        Icon(
+            if (joined) Icons.Filled.Check else Icons.Filled.Add,
+            contentDescription = null,
+            tint = if (joined) accent else Color.White,
+            modifier = Modifier.size(14.dp),
+        )
+        Text(if (joined) "Joined" else "Join", style = RedditText.Button, color = if (joined) accent else Color.White)
+    }
+}
+```
+
+## 4. Subreddit Accent Color (Dynamic Theming)
+
+Subreddits set their own accent color (Join button, sidebar, banner tint) — Reddit's signature per-community customization. iOS passes a `Color` per screen; in Compose model it as a `CompositionLocal` so any nested component (Join button, banner) inherits without prop-drilling, and validate the user-chosen hex's contrast at the boundary.
+
+```kotlin
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.graphics.luminance
+
+data class SubredditContext(
+    val accent: Color = RedditColors.SubredditDefault, // #0079D3
+    val displayName: String = "",
+)
+
+val LocalSubreddit = compositionLocalOf { SubredditContext() }
+
+@Composable
+fun ProvideSubreddit(ctx: SubredditContext, content: @Composable () -> Unit) =
+    CompositionLocalProvider(LocalSubreddit provides ctx, content = content)
+
+// On the boundary: pick readable on-accent text from the chosen hex's luminance
+fun onAccentColor(accent: Color): Color =
+    if (accent.luminance() > 0.5f) RedditColors.TextPrimaryLight else Color.White
+```
+
+## 5. Bottom Navigation (Tab Bar)
+
+Five destinations in a Material 3 `NavigationBar`: Home, Communities, Create (center, FAB-ish), Chat, Inbox. Active tint is brand red or neutral (both ship in production — pick one and keep it). Solid surface, no blur. The Inbox tab carries a red mention badge.
+
+```kotlin
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.*
+
+@Composable
+fun RedditBottomBar(selected: Int, unreadInbox: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(
+        containerColor = RedditColors.CardLight, // solid, no blur
+        tonalElevation = 0.dp,
+    ) {
+        data class Tab(val label: String, val icon: androidx.compose.ui.graphics.vector.ImageVector, val badge: Int = 0)
+        val tabs = listOf(
+            Tab("Home", Icons.Filled.Home),
+            Tab("Communities", Icons.Filled.Groups),
+            Tab("Create", Icons.Filled.AddCircle),
+            Tab("Chat", Icons.AutoMirrored.Filled.Chat),
+            Tab("Inbox", Icons.Filled.Notifications, badge = unreadInbox),
+        )
+        tabs.forEachIndexed { i, t ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = {
+                    if (t.badge > 0) {
+                        BadgedBox(badge = { Badge(containerColor = RedditColors.AlertRed) { Text("${t.badge}") } }) {
+                            Icon(t.icon, t.label, modifier = Modifier.size(if (i == 2) 26.dp else 22.dp))
+                        }
+                    } else {
+                        Icon(t.icon, t.label, modifier = Modifier.size(if (i == 2) 26.dp else 22.dp))
+                    }
+                },
+                label = { Text(t.label, style = RedditText.TabLabel) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor   = RedditColors.BrandRed,
+                    selectedTextColor   = RedditColors.BrandRed,
+                    unselectedIconColor = RedditColors.VoteInactive,
+                    unselectedTextColor = RedditColors.VoteInactive,
+                    indicatorColor      = Color.Transparent,
+                ),
+            )
+        }
+    }
+}
+```
+
+## 6. Motion
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Vote tap | `Animatable` 1 → 1.25 → 1 with `spring(dampingRatio = 0.55f)`; karma color cross-fades via `animateColorAsState`; `HapticFeedbackType.TextHandleMove` (selection) |
+| Karma number tick | `AnimatedContent` with `slideInVertically`/`slideOutVertically` on the count `Text` |
+| Card press | `animateFloatAsState` scale → 0.99 + background tint to `Surface2Light` over ~120ms |
+| Comment collapse | `animateContentSize()` on the comment `Column` (200ms) |
+| Join success | `animateColorAsState` accent fill → outline + `HapticFeedbackType.LongPress` |
+| Infinite scroll | new cards fade + 8.dp slide-up via `Modifier.animateItem()` |
+| Pull-to-refresh | `rememberInfiniteTransition` rotating the red Snoo drawable |
+
+```kotlin
+// Karma number ticker — number slides up/down on change
+@Composable
+fun KarmaTicker(value: Int, color: Color) {
+    AnimatedContent(
+        targetState = value,
+        transitionSpec = {
+            if (targetState > initialState)
+                (slideInVertically { it } + fadeIn()) togetherWith (slideOutVertically { -it } + fadeOut())
+            else
+                (slideInVertically { -it } + fadeIn()) togetherWith (slideOutVertically { it } + fadeOut())
+        },
+        label = "karma",
+    ) { v -> Text("$v", style = RedditText.Karma, color = color) }
+}
+```
+
+Keep vote feedback subtle — a single bounce + color swap, never an elaborate cascade. Haptics: prefer `LocalHapticFeedback`; for the per-vote selection tick use `HapticFeedbackType.TextHandleMove`, or `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CLOCK_TICK)` on API 30+. Honor `LocalAccessibilityManager` reduce-motion by skipping the bounce.
+
+## 7. Icons
+
+Reddit ships custom up/down arrow glyphs and the Snoo mascot; the closest first-party set is `androidx.compose.material:material-icons-extended`. Snoo (empty states + pull-to-refresh) ships as a vector drawable with light + dark variants via `ImageVector.vectorResource(R.drawable.ic_snoo)`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Upvote | `arrow.up` / `arrow.up.square.fill` | `Icons.Filled.ArrowUpward` |
+| Downvote | `arrow.down` / `arrow.down.square.fill` | `Icons.Filled.ArrowDownward` |
+| Comment count | `text.bubble` | `Icons.AutoMirrored.Filled.Comment` |
+| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
+| Save | `bookmark` / `bookmark.fill` | `Icons.Filled.BookmarkBorder` / `Icons.Filled.Bookmark` |
+| More | `ellipsis` | `Icons.Filled.MoreHoriz` |
+| Reply | `arrowshape.turn.up.left` | `Icons.AutoMirrored.Filled.Reply` |
+| Join (state) | `plus` / `checkmark` | `Icons.Filled.Add` / `Icons.Filled.Check` |
+| Home (tab) | `house.fill` | `Icons.Filled.Home` |
+| Communities (tab) | `person.3.fill` | `Icons.Filled.Groups` |
+| Create (tab) | `plus.circle.fill` | `Icons.Filled.AddCircle` |
+| Chat (tab) | `bubble.left.and.bubble.right.fill` | `Icons.AutoMirrored.Filled.Chat` |
+| Inbox (tab) | `bell.fill` | `Icons.Filled.Notifications` |
+| Search | `magnifyingglass` | `Icons.Filled.Search` |
+| Collapse comment | `minus.square` / `plus.square` | text `[−]` / `[+]` (matches Reddit's literal glyphs) |
+| Sort | `arrow.up.arrow.down` | `Icons.Filled.SwapVert` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24**. `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; system-bar icon color flips with light/dark. Apply `Scaffold` insets so cards clear the status bar and the tab bar clears gesture nav; the comment compose bar must rise above the IME (`Modifier.imePadding()`).
+- **Font scaling**: `sp` honors user scale on post title, body, comment body, metadata. **Pin the karma number, vote arrow sizing, flair pills, and tab labels to fixed sizes** (layout-sensitive) by deriving from `dp` or wrapping in a fixed-`fontScale` `LocalDensity`.
+- **TalkBack**: merge the vote column into one element — `Modifier.semantics(mergeDescendants = true) { contentDescription = "$displayKarma karma, upvote, downvote" }`. The vote arrows are iconographic (up vs down) so they stay semantic without color; ensure NSFW/OC flair text is readable, not color-only.
+- **Touch targets**: each vote arrow needs a 36–48.dp hit area (glyph is 18.dp) via `Modifier.size()`/padding; action-row icons need 44–48.dp; the comment collapse `[−]` needs ≥32.dp.
+- **Contrast**: `#7C7C7C` on `#FFFFFF` passes WCAG AA at 12sp+; validate dark-mode `#818384` on `#272729`. Subreddit accent colors are user-chosen — run `onAccentColor()` (luminance split) and bump to a darker variant if the Join-button white fails contrast.
+- **Markdown**: post/comment bodies render full Markdown. Parse `**bold**`, `*italic*`, `> quote`, `[text](url)`, `` `code` ``, fenced blocks via `buildAnnotatedString` or a Markdown-to-`AnnotatedString` library; links use `#0079D3` (the link color — never the brand red).
+- **Dynamic color**: do **not** enable Material You `dynamicColorScheme()` — the brand red, the warm/cool vote pair, and the per-subreddit accent are all semantic and must not shift with wallpaper. Subreddit accent is the only "dynamic" color, and it is data-driven, not wallpaper-driven.