designmd-forge 1.2.0

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

@@ -0,0 +1,498 @@
+# Vero (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Vero's calm, true-black visual language to **Android with Jetpack Compose (Material 3)**: a color token object, the brand gradient, a `Typography` set, paste-ready `@Composable`s for the 7 post-type selector and chronological feed, navigation, 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 (Vero's true-black gallery wall, the single teal→blue gradient, the 7 first-class post types, the strictly chronological feed) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `Brush.linearGradient` for the brand, `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 media and avatars. Vero is true-black-first; the dark scheme is canonical.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/VeroColors.kt
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.geometry.Offset
+
+object VeroColors {
+    // Canvas & Surfaces (Dark — primary)
+    val Canvas   = Color(0xFF000000) // PURE true-black — gallery void, OLED-deep
+    val Surface1 = Color(0xFF0E0E10) // inset cards only
+    val Surface2 = Color(0xFF161618)
+    val Divider  = Color(0xFF232325)
+
+    // Canvas & Surfaces (Light — rare parity)
+    val LightCanvas   = Color(0xFFFFFFFF)
+    val LightSurface1 = Color(0xFFF6F6F7)
+    val LightDivider  = Color(0xFFE4E4E6)
+
+    // Text
+    val TextPrimary   = Color(0xFFFFFFFF)
+    val TextSecondary = Color(0xFF9A9AA0)
+    val TextTertiary  = Color(0xFF5E5E64)
+
+    // Brand
+    val Teal      = Color(0xFF00C2B8) // flat accent
+    val Blue      = Color(0xFF0098E6)
+    val GradientA = Color(0xFF00D1C1)
+    val GradientB = Color(0xFF0079D3)
+    val TealPressed = Color(0xFF00A89F)
+
+    // Ratings
+    val Amber   = Color(0xFFE8B23A) // book/film stars ONLY
+    val OnAmber = Color(0xFF1A1206)
+
+    // Semantic
+    val Success = Color(0xFF2ECC71)
+    val Error   = Color(0xFFFF4D4F)
+
+    // The single brand expression — use sparingly
+    val BrandGradient = Brush.linearGradient(
+        colors = listOf(GradientA, GradientB),
+        start = Offset(0f, 0f),
+        end = Offset(Float.POSITIVE_INFINITY, Float.POSITIVE_INFINITY),
+    )
+}
+```
+
+Wire it into both schemes. Vero is true-black-first — the dark scheme is the real product. Never enable Material You `dynamicColorScheme()` — the brand is one gradient and it must hold regardless of wallpaper.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
+
+private val VeroDark = darkColorScheme(
+    primary          = VeroColors.Teal,
+    onPrimary        = VeroColors.Canvas,
+    background        = VeroColors.Canvas,
+    onBackground      = VeroColors.TextPrimary,
+    surface           = VeroColors.Surface1,
+    onSurface         = VeroColors.TextPrimary,
+    surfaceVariant    = VeroColors.Surface2,
+    onSurfaceVariant  = VeroColors.TextSecondary,
+    outline           = VeroColors.Divider,
+    error             = VeroColors.Error,
+)
+
+private val VeroLight = lightColorScheme(
+    primary      = VeroColors.Teal,
+    onPrimary    = Color(0xFFFFFFFF),
+    background    = VeroColors.LightCanvas,
+    onBackground  = Color(0xFF0B0B0C),
+    surface       = VeroColors.LightSurface1,
+    onSurface     = Color(0xFF0B0B0C),
+    outline       = VeroColors.LightDivider,
+    error         = VeroColors.Error,
+)
+
+@Composable
+fun VeroTheme(
+    dark: Boolean = true, // true-black-first; pass isSystemInDarkTheme() only if you ship light parity
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) VeroDark else VeroLight,
+    typography = VeroTypography,
+    content = content,
+)
+```
+
+## 2. Typography
+
+Vero's UI face is **Manrope** (SIL OFL — drop the TTFs in `res/font/`). Calm, geometric, unhurried.
+
+```kotlin
+// ui/theme/VeroType.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 Manrope = FontFamily(
+    Font(R.font.manrope_regular,   FontWeight.Normal),
+    Font(R.font.manrope_medium,    FontWeight.Medium),
+    Font(R.font.manrope_semibold,  FontWeight.SemiBold),
+    Font(R.font.manrope_bold,      FontWeight.Bold),
+    Font(R.font.manrope_extrabold, FontWeight.ExtraBold),
+)
+
+object VeroText {
+    val Display     = TextStyle(Manrope, fontWeight = FontWeight.ExtraBold, fontSize = 32.sp, lineHeight = 37.sp, letterSpacing = (-0.4).sp)
+    val ScreenTitle = TextStyle(Manrope, fontWeight = FontWeight.Bold,      fontSize = 26.sp, lineHeight = 31.sp, letterSpacing = (-0.3).sp)
+    val Section     = TextStyle(Manrope, fontWeight = FontWeight.Bold,      fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = (-0.2).sp)
+    val Author      = TextStyle(Manrope, fontWeight = FontWeight.Bold,      fontSize = 18.sp, lineHeight = 24.sp, letterSpacing = (-0.1).sp)
+    val AuthorSm    = TextStyle(Manrope, fontWeight = FontWeight.Bold,      fontSize = 14.sp, lineHeight = 18.sp)
+    val Title       = TextStyle(Manrope, fontWeight = FontWeight.SemiBold,  fontSize = 15.sp, lineHeight = 20.sp)
+    val Caption     = TextStyle(Manrope, fontWeight = FontWeight.Medium,    fontSize = 14.sp, lineHeight = 21.sp)
+    val BodyRead    = TextStyle(Manrope, fontWeight = FontWeight.Normal,    fontSize = 14.sp, lineHeight = 22.sp)
+    val Meta        = TextStyle(Manrope, fontWeight = FontWeight.Normal,    fontSize = 13.sp, lineHeight = 18.sp)
+    val Button      = TextStyle(Manrope, fontWeight = FontWeight.Bold,      fontSize = 15.sp, lineHeight = 15.sp, letterSpacing = 0.2.sp)
+    val TypeLabel   = TextStyle(Manrope, fontWeight = FontWeight.SemiBold,  fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.4.sp)
+    val Tab         = TextStyle(Manrope, fontWeight = FontWeight.Medium,    fontSize = 10.sp, lineHeight = 10.sp)
+}
+
+val VeroTypography = Typography(
+    headlineLarge = VeroText.Display,
+    headlineMedium = VeroText.ScreenTitle,
+    titleLarge    = VeroText.Section,
+    titleMedium   = VeroText.Author,
+    bodyMedium    = VeroText.Caption,
+    labelSmall    = VeroText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### 7 Post-Type Selector
+
+```kotlin
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.*
+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.graphics.vector.ImageVector
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+import androidx.compose.ui.unit.dp
+
+enum class VeroPostType(val label: String, val icon: ImageVector) {
+    PHOTO("Photo", Icons.Outlined.Image),
+    VIDEO("Video", Icons.Outlined.Videocam),
+    LINK("Link",   Icons.Outlined.Link),
+    MUSIC("Music", Icons.Outlined.MusicNote),
+    FILM("Film",   Icons.Outlined.Movie),
+    BOOK("Book",   Icons.Outlined.MenuBook),
+    PLACE("Place", Icons.Outlined.LocationOn),
+}
+
+@Composable
+fun PostTypeSelector(selected: VeroPostType, onSelect: (VeroPostType) -> Unit) {
+    val haptics = LocalHapticFeedback.current
+    FlowRow(
+        modifier = Modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.spacedBy(10.dp),
+        verticalArrangement = Arrangement.spacedBy(10.dp),
+        maxItemsInEachRow = 4,
+    ) {
+        VeroPostType.entries.forEach { type ->
+            val on = type == selected
+            Column(
+                Modifier
+                    .weight(1f)
+                    .clip(RoundedCornerShape(12.dp))
+                    .background(if (on) VeroColors.Teal.copy(alpha = 0.08f) else VeroColors.Surface1)
+                    .border(1.dp, if (on) VeroColors.Teal else VeroColors.Divider, RoundedCornerShape(12.dp))
+                    .clickable {
+                        haptics.performHapticFeedback(HapticFeedbackType.LongPress)
+                        onSelect(type)
+                    }
+                    .padding(vertical = 12.dp, horizontal = 4.dp),
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.spacedBy(7.dp),
+            ) {
+                Icon(type.icon, contentDescription = type.label,
+                    tint = if (on) VeroColors.Teal else VeroColors.TextTertiary,
+                    modifier = Modifier.size(20.dp))
+                Text(type.label, style = VeroText.TypeLabel,
+                    color = if (on) VeroColors.Teal else VeroColors.TextTertiary)
+            }
+        }
+    }
+}
+```
+
+### Chronological Feed Post
+
+```kotlin
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.Image
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.FavoriteBorder
+import androidx.compose.material.icons.filled.MoreHoriz
+import androidx.compose.material.icons.outlined.ChatBubbleOutline
+import androidx.compose.material.icons.outlined.IosShare
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+
+@Composable
+fun FeedPost(
+    author: String, type: VeroPostType, timeAgo: String,
+    caption: String, likes: Int, comments: Int,
+) {
+    var liked by remember { mutableStateOf(false) }
+    val heartScale by animateFloatAsState(if (liked) 1f else 1f, label = "heart")
+    val haptics = LocalHapticFeedback.current
+
+    Column(
+        Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp)
+            .padding(top = 16.dp, bottom = 14.dp),
+    ) {
+        Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(10.dp)) {
+            Box(Modifier.size(38.dp).clip(RoundedCornerShape(50)).background(VeroColors.BrandGradient))
+            Column(Modifier.weight(1f)) {
+                Text(author, style = VeroText.AuthorSm, color = VeroColors.TextPrimary)
+                Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(5.dp)) {
+                    Icon(type.icon, null, tint = VeroColors.Teal, modifier = Modifier.size(11.dp))
+                    Text(type.label, style = VeroText.TypeLabel.copy(fontWeight = FontWeight.Bold), color = VeroColors.Teal)
+                    Text("· $timeAgo", style = VeroText.Meta, color = VeroColors.TextTertiary)
+                }
+            }
+            Icon(Icons.Filled.MoreHoriz, null, tint = VeroColors.TextTertiary)
+        }
+
+        Box(
+            Modifier
+                .fillMaxWidth().aspectRatio(4f / 5f).padding(top = 12.dp)
+                .clip(RoundedCornerShape(10.dp))
+                .background(Brush.linearGradient(listOf(Color(0xFF1C4A52), Color(0xFF07181B)))),
+        )
+
+        Text(caption, style = VeroText.Caption, color = VeroColors.TextSecondary,
+            modifier = Modifier.padding(top = 12.dp))
+
+        Row(
+            Modifier.padding(top = 14.dp),
+            horizontalArrangement = Arrangement.spacedBy(22.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Row(
+                Modifier.clickable {
+                    haptics.performHapticFeedback(HapticFeedbackType.LongPress)
+                    liked = !liked
+                },
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(6.dp),
+            ) {
+                Icon(
+                    if (liked) Icons.Filled.Favorite else Icons.Filled.FavoriteBorder, null,
+                    tint = if (liked) VeroColors.Teal else VeroColors.TextSecondary,
+                    modifier = Modifier.size(19.dp).scale(heartScale),
+                )
+                Text("${likes + if (liked) 1 else 0}",
+                    style = VeroText.TypeLabel.copy(fontSize = 12.sp),
+                    color = if (liked) VeroColors.Teal else VeroColors.TextSecondary)
+            }
+            Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(6.dp)) {
+                Icon(Icons.Outlined.ChatBubbleOutline, null, tint = VeroColors.TextSecondary, modifier = Modifier.size(19.dp))
+                Text("$comments", style = VeroText.TypeLabel.copy(fontSize = 12.sp), color = VeroColors.TextSecondary)
+            }
+            Icon(Icons.Outlined.IosShare, null, tint = VeroColors.TextSecondary, modifier = Modifier.size(19.dp))
+        }
+    }
+    HorizontalDivider(color = VeroColors.Divider, thickness = 0.5.dp)
+}
+```
+
+### Book / Film Inner Card
+
+```kotlin
+@Composable
+fun BookCard(title: String, author: String, rating: Int) {
+    Row(
+        Modifier
+            .clip(RoundedCornerShape(10.dp))
+            .background(VeroColors.Surface1)
+            .border(1.dp, VeroColors.Divider, RoundedCornerShape(10.dp))
+            .padding(12.dp),
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        Box(
+            Modifier.size(56.dp, 80.dp).clip(RoundedCornerShape(4.dp))
+                .background(Brush.linearGradient(listOf(Color(0xFFC29A3A), Color(0xFF7A5A18)))),
+        )
+        Column {
+            Text(title, style = VeroText.Title, color = VeroColors.TextPrimary)
+            Text(author, style = VeroText.Meta, color = VeroColors.TextSecondary,
+                modifier = Modifier.padding(top = 3.dp))
+            Text("★".repeat(rating) + "☆".repeat(5 - rating),
+                style = VeroText.TypeLabel.copy(letterSpacing = 1.sp),
+                color = VeroColors.Amber, modifier = Modifier.padding(top = 4.dp))
+        }
+    }
+}
+```
+
+### Primary "Post" Button + Wordmark
+
+```kotlin
+@Composable
+fun VeroPostButton(onClick: () -> Unit) {
+    Box(
+        Modifier
+            .clip(RoundedCornerShape(50))
+            .background(VeroColors.BrandGradient)
+            .clickable { onClick() }
+            .padding(vertical = 13.dp, horizontal = 28.dp),
+    ) {
+        Text("Post", style = VeroText.Button, color = Color.White)
+    }
+}
+
+@Composable
+fun VeroWordmark() {
+    Text(
+        "VERO",
+        style = VeroText.Display.copy(letterSpacing = 2.sp),
+        modifier = Modifier.graphicsLayer(alpha = 0.99f)
+            .drawWithCache {
+                onDrawWithContent {
+                    drawContent()
+                    drawRect(VeroColors.BrandGradient, blendMode = androidx.compose.ui.graphics.BlendMode.SrcAtop)
+                }
+            },
+    )
+}
+```
+
+## 4. 7 Post-Type Composer Flow
+
+Vero's creation UX is the 7-type selector → typed composer. Tapping the gradient compose ring opens a `ModalBottomSheet` containing `PostTypeSelector`; choosing a type swaps in that type's composer (caption + a type-specific picker — e.g. a book search for Book, a map for Place, a track search for Music). All seven are co-equal entry points; never default-favor Photo.
+
+```kotlin
+@Composable
+fun ComposeSheet(onDismiss: () -> Unit) {
+    var type by remember { mutableStateOf(VeroPostType.PHOTO) }
+    ModalBottomSheet(onDismissRequest = onDismiss, containerColor = VeroColors.Canvas) {
+        Column(Modifier.padding(16.dp)) {
+            PostTypeSelector(type) { type = it }
+            Spacer(Modifier.height(16.dp))
+            // Swap the typed composer body on `type`
+            when (type) {
+                VeroPostType.BOOK  -> Text("Search a book…", style = VeroText.Caption, color = VeroColors.TextTertiary)
+                VeroPostType.PLACE -> Text("Add a location…", style = VeroText.Caption, color = VeroColors.TextTertiary)
+                else               -> Text("Write a caption…", style = VeroText.Caption, color = VeroColors.TextTertiary)
+            }
+            Spacer(Modifier.height(16.dp))
+            VeroPostButton(onClick = onDismiss)
+        }
+    }
+}
+```
+
+## 5. Navigation
+
+Vero has minimal chrome: a gradient wordmark top bar and a 5-slot bottom strip with a gradient-ring center compose action. On Android model the strip as a `NavigationBar`; there is no Material tint pill — active is flat teal.
+
+```kotlin
+@Composable
+fun VeroBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(
+        containerColor = VeroColors.Canvas.copy(alpha = 0.96f),
+        tonalElevation = 0.dp,
+    ) {
+        val items = listOf(
+            "Feed"     to Icons.Filled.Home,
+            "Discover" to Icons.Filled.Search,
+            "Compose"  to Icons.Filled.AddCircleOutline, // center — render the gradient ring
+            "Inbox"    to Icons.Filled.Email,
+            "Profile"  to Icons.Filled.AccountCircle,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            val isCompose = i == 2
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = {
+                    if (isCompose) ComposeRingIcon()
+                    else Icon(icon, contentDescription = label, modifier = Modifier.size(22.dp))
+                },
+                label = if (isCompose) null else { { Text(label, style = VeroText.Tab) } },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor   = VeroColors.Teal,
+                    selectedTextColor   = VeroColors.Teal,
+                    unselectedIconColor = VeroColors.TextTertiary,
+                    unselectedTextColor = VeroColors.TextTertiary,
+                    indicatorColor      = Color.Transparent, // no Material pill — Vero has none
+                ),
+            )
+        }
+    }
+}
+
+@Composable
+fun ComposeRingIcon() {
+    Box(Modifier.size(27.dp), contentAlignment = Alignment.Center) {
+        Box(Modifier.size(27.dp).clip(RoundedCornerShape(50)).background(VeroColors.BrandGradient))
+        Box(Modifier.size(23.dp).clip(RoundedCornerShape(50)).background(VeroColors.Canvas))
+        Icon(Icons.Filled.Add, null, tint = VeroColors.Teal, modifier = Modifier.size(15.dp))
+    }
+}
+```
+
+The top bar is a `TopAppBar` with the gradient `VeroWordmark` as a leading title, trailing search + notifications `IconButton`s; `containerColor = VeroColors.Canvas`, a 0.5dp `Divider` only when content scrolls under it.
+
+## 6. Motion
+
+Vero motion is calm — short ease-out, no aggressive springs, never reshuffle the feed.
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Post-type select | border/content `animateColorAsState` `tween(160)`; soft haptic on tap |
+| Like heart | `animateFloatAsState` scale via `keyframes { 1.2f at 120 }` `tween(240)`; fills `Teal` |
+| Compose sheet | `ModalBottomSheet` default slide-up (~300ms); scrim fades in parallel |
+| New post insert | `LazyColumn` item `animateItemPlacement()`; new items `fadeIn(tween(220))` at top — never re-sort |
+| Tab switch | content `Crossfade(tween(200))`; active tint instant |
+| Image load | Coil `crossfade(220)` from `Surface1` placeholder |
+| Connect/Follow | `Crossfade` label `tween(180)`; outline → filled |
+
+```kotlin
+// Like heart — the only spring-ish moment, kept gentle
+val scale by animateFloatAsState(
+    targetValue = if (liked) 1f else 1f,
+    animationSpec = keyframes { durationMillis = 240; 1.2f at 120 },
+    label = "likePulse",
+)
+```
+
+Haptics: `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` for the soft tick on post-type select, like, and connect. Use `HapticFeedbackConstants.CLOCK_TICK` for tab selection. Keep haptics sparse — Vero's ethos is calm.
+
+## 7. Icons
+
+The closest first-party set is `androidx.compose.material:material-icons-extended`. The gradient "VERO" wordmark is drawn text with a `SrcAtop` gradient overlay; the compose ring is a gradient `Box` with a punched-out center.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Feed (tab) | `house` / `house.fill` | `Icons.Filled.Home` |
+| Discover (tab) | `magnifyingglass` | `Icons.Filled.Search` |
+| Compose (center) | `plus.circle` | gradient ring + `Icons.Filled.Add` |
+| Inbox (tab) | `envelope` | `Icons.Filled.Email` |
+| Profile (tab) | `person.crop.circle` | `Icons.Filled.AccountCircle` |
+| Post-type · Photo | `photo` | `Icons.Outlined.Image` |
+| Post-type · Video | `video` | `Icons.Outlined.Videocam` |
+| Post-type · Link | `link` | `Icons.Outlined.Link` |
+| Post-type · Music | `music.note` | `Icons.Outlined.MusicNote` |
+| Post-type · Film | `film` | `Icons.Outlined.Movie` |
+| Post-type · Book | `book.closed` | `Icons.Outlined.MenuBook` |
+| Post-type · Place | `mappin.and.ellipse` | `Icons.Outlined.LocationOn` |
+| Like | `heart` / `heart.fill` | `Icons.Filled.FavoriteBorder` / `Icons.Filled.Favorite` |
+| Comment | `bubble.left` | `Icons.Outlined.ChatBubbleOutline` |
+| Share | `square.and.arrow.up` | `Icons.Outlined.IosShare` |
+| More | `ellipsis` | `Icons.Filled.MoreHoriz` |
+| Notifications | `bell` | `Icons.Filled.Notifications` |
+| Rating star | `star.fill` | `Icons.Filled.Star` (tint `Amber`) |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor 21; modern motion comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; the true-black canvas wants light-content system bars. Keep the system nav bar transparent so the gallery void extends edge-to-edge.
+- **Font scaling**: `sp` honors the user's scale on titles, author names, captions, body. Pin layout-critical text (post-type labels, 10sp tab labels, star ratings, type chips) — derive from `dp` or fix `fontScale = 1f` for those nodes.
+- **TalkBack**: label a post "{author}, {type} post, {timeAgo}, {caption}"; expose the 7-type selector as a single group with each cell `Modifier.semantics { role = Role.RadioButton; selected = ... }`; the like control toggles "Liked / Not liked"; the compose ring gets `contentDescription = "Create a post"`.
+- **Touch targets**: Material guidance is 48.dp. Each post-type cell is ≥ 56.dp tall already; give the 19.dp action icons a 48.dp hit, the 22.dp tab icons a 48.dp hit.
+- **Contrast**: `#FFFFFF` and `#9A9AA0` on `#000000` pass WCAG AA; teal `#00C2B8` on black passes for icons/large text — validate small teal text; `#1A1206` on `#E8B23A` passes for amber.
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, disable the like pulse (instant fill) and the post-type tint animation (instant); keep new-post fade subtle.
+- **True-black is intentional**: the canvas is pure `#000000` for OLED — do **not** substitute a charcoal in dark mode; only inset cards use `#0E0E10`. Do **not** enable Material You `dynamicColorScheme()` — the single teal→blue gradient identity must hold regardless of wallpaper.
+- **Chronological guarantee**: back the feed with a strictly time-sorted source; new items prepend with `animateItemPlacement` + `fadeIn` — never re-sort by engagement or inject "suggested" items.