# GitHub (iOS) — Jetpack Compose Implementation Guide Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports GitHub's visual language (the Primer design system) to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, the repo home + code browser, the contributions heatmap, the diff viewer, motion, and haptics. > Why a Compose guide for an iOS-referenced app? The DESIGN.md tokens are platform-neutral (Primer is cross-platform by design). This file keeps the *visual* identity — Primer dark default `#0D1117`, the one accent blue, the reserved green, semantic state colors, the iconic heatmap ramp, monospace for all code/SHAs/paths — while making everything idiomatic Android: a `NavigationBar` instead of a UITabBar, `LazyColumn` diffs, `sp`/`dp` instead of `pt`. Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, Coil `2.6+` for avatars. **No Material You / dynamic color** — GitHub's Primer palette and its semantic state colors must hold regardless of wallpaper. Dark is the default; light is a first-class peer. ## 1. Color Tokens ```kotlin // ui/theme/GitHubColors.kt import androidx.compose.ui.graphics.Color object GH { // ---- Dark (default) ---- val Canvas = Color(0xFF0D1117) // blue-tinted near-black val CanvasSubtle = Color(0xFF161B22) // raised surfaces, card headers, heatmap L0 val CanvasInset = Color(0xFF21262D) // default button, code-block bg, count pills val SurfacePressed = Color(0xFF30363D) val BorderDefault = Color(0xFF30363D) val BorderMuted = Color(0xFF21262D) val Fg = Color(0xFFE6EDF3) val FgMuted = Color(0xFF7D8590) val FgSubtle = Color(0xFF6E7681) val FgOnEmphasis = Color(0xFFFFFFFF) val AccentFg = Color(0xFF2F81F7) // links, owner/name, active val AccentEmphasis = Color(0xFF1F6FEB) val BtnPrimary = Color(0xFF238636) // RESERVED — Code / Merge only val BtnPrimaryHover = Color(0xFF2EA043) val BtnDanger = Color(0xFFDA3633) // Semantic state (fixed meaning) val Open = Color(0xFF3FB950) // open issue/PR, passing val Merged = Color(0xFFA371F7) // merged PR (purple = done) val Closed = Color(0xFFF85149) // closed, failing, delete val Draft = Color(0xFF6E7681) // draft/neutral val Attention = Color(0xFFD29922) // pending/warning val Sponsor = Color(0xFFDB61A2) val TabUnderline = Color(0xFFF78166) // orange-coral active underline val DiffAddBg = Color(0xFF3FB950).copy(alpha = 0.15f) val DiffDelBg = Color(0xFFF85149).copy(alpha = 0.15f) // ---- Light (first-class peer) ---- val LCanvas = Color(0xFFFFFFFF) val LCanvasSubtle = Color(0xFFF6F8FA) val LBorderDefault = Color(0xFFD0D7DE) val LFg = Color(0xFF1F2328) val LFgMuted = Color(0xFF656D76) val LAccentFg = Color(0xFF0969DA) val LBtnPrimary = Color(0xFF1F883D) val LOpen = Color(0xFF1A7F37) val LMerged = Color(0xFF8250DF) val LClosed = Color(0xFFCF222E) val LTabUnderline = Color(0xFFFD8C73) // Contributions heatmap ramp — the iconic GitHub visual (never alter) val HeatDark = listOf(Color(0xFF161B22), Color(0xFF0E4429), Color(0xFF006D32), Color(0xFF26A641), Color(0xFF39D353)) val HeatLight = listOf(Color(0xFFEBEDF0), Color(0xFF9BE9A8), Color(0xFF40C463), Color(0xFF30A14E), Color(0xFF216E39)) } ``` ```kotlin // ui/theme/Theme.kt import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.material3.MaterialTheme import androidx.compose.material3.darkColorScheme import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composable private val GHDark = darkColorScheme( primary = GH.BtnPrimary, // reserved green (Code / Merge) onPrimary = GH.FgOnEmphasis, background = GH.Canvas, onBackground = GH.Fg, surface = GH.CanvasSubtle, onSurface = GH.Fg, surfaceVariant = GH.CanvasInset, outline = GH.BorderDefault, error = GH.Closed, ) private val GHLight = lightColorScheme( primary = GH.LBtnPrimary, onPrimary = GH.FgOnEmphasis, background = GH.LCanvas, onBackground = GH.LFg, surface = GH.LCanvasSubtle, onSurface = GH.LFg, surfaceVariant = GH.LCanvasSubtle, outline = GH.LBorderDefault, error = GH.LClosed, ) @Composable fun GitHubTheme(dark: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) = MaterialTheme(colorScheme = if (dark) GHDark else GHLight, typography = GHTypography, content = content) ``` ## 2. Typography (Material 3) Mona Sans (GitHub's variable grotesque, SIL OFL) for UI; a monospace for **all** code, SHAs, file/branch names, diffs. Drop both in `res/font/`. Weight + size establish hierarchy (one sans family); the monospace contract is functional, not stylistic. ```kotlin // ui/theme/GHType.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 MonaSans = FontFamily( Font(R.font.mona_sans_regular, FontWeight.Normal), Font(R.font.mona_sans_medium, FontWeight.Medium), Font(R.font.mona_sans_semibold, FontWeight.SemiBold), Font(R.font.mona_sans_bold, FontWeight.Bold), Font(R.font.mona_sans_extrabold, FontWeight.ExtraBold), ) val Mono = FontFamily( Font(R.font.jetbrains_mono_regular, FontWeight.Normal), Font(R.font.jetbrains_mono_semibold, FontWeight.SemiBold), ) // Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1) object GHText { val Display = TextStyle(MonaSans, fontWeight = FontWeight.ExtraBold, fontSize = 32.sp, lineHeight = 37.sp, letterSpacing = (-0.4).sp) val RepoTitle = TextStyle(MonaSans, fontWeight = FontWeight.Bold, fontSize = 24.sp, lineHeight = 29.sp, letterSpacing = (-0.3).sp) val Section = TextStyle(MonaSans, fontWeight = FontWeight.SemiBold, fontSize = 20.sp, lineHeight = 26.sp, letterSpacing = (-0.2).sp) val Subtitle = TextStyle(MonaSans, fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 22.sp) val Body = TextStyle(MonaSans, fontWeight = FontWeight.Normal, fontSize = 14.sp, lineHeight = 21.sp) val BodyStrong = TextStyle(MonaSans, fontWeight = FontWeight.SemiBold, fontSize = 14.sp, lineHeight = 21.sp) val Code = TextStyle(Mono, fontWeight = FontWeight.Normal, fontSize = 13.sp, lineHeight = 19.sp) val CodeInline = TextStyle(Mono, fontWeight = FontWeight.Normal, fontSize = 13.sp, lineHeight = 18.sp) val Sha = TextStyle(Mono, fontWeight = FontWeight.SemiBold, fontSize = 12.sp, lineHeight = 12.sp) val Metadata = TextStyle(MonaSans, fontWeight = FontWeight.Normal, fontSize = 12.sp, lineHeight = 17.sp) val Label = TextStyle(MonaSans, fontWeight = FontWeight.Medium, fontSize = 12.sp, lineHeight = 12.sp) val CountPill = TextStyle(MonaSans, fontWeight = FontWeight.SemiBold, fontSize = 11.sp, lineHeight = 11.sp) val Tab = TextStyle(MonaSans, fontWeight = FontWeight.Medium, fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.1.sp) val Caption = TextStyle(MonaSans, fontWeight = FontWeight.Normal, fontSize = 11.sp, lineHeight = 14.sp) } val GHTypography = Typography( headlineLarge = GHText.Display, headlineMedium = GHText.RepoTitle, titleLarge = GHText.Section, titleMedium = GHText.Subtitle, bodyMedium = GHText.Body, labelSmall = GHText.Tab, ) ``` ## 3. Signature Components ### Repo Header (`owner / name` + stats + tab strip) ```kotlin import androidx.compose.foundation.* import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.CircleShape import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.unit.dp @Composable fun RepoHeader( owner: String, name: String, description: String, language: String, languageColor: Color, stars: String, forks: String, tabs: List = listOf("Code", "Issues", "Pull requests", "Actions"), activeTab: Int, onTab: (Int) -> Unit, ) { Column(Modifier.fillMaxWidth().background(GH.Canvas).padding(top = 12.dp)) { Row(Modifier.padding(horizontal = 16.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(6.dp)) { Icon(GitHubIcons.Repo, null, tint = GH.FgMuted, modifier = Modifier.size(17.dp)) Text(owner, style = GHText.Subtitle, color = GH.AccentFg) Text("/", style = GHText.Subtitle, color = GH.FgMuted) Text(name, style = GHText.Subtitle.copy(fontWeight = FontWeight.Bold), color = GH.AccentFg) } Text(description, style = GHText.Body, color = GH.FgMuted, modifier = Modifier.padding(horizontal = 16.dp, vertical = 6.dp)) Row(Modifier.padding(horizontal = 16.dp, vertical = 4.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(16.dp)) { Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(5.dp)) { Box(Modifier.size(11.dp).clip(CircleShape).background(languageColor)) Text(language, style = GHText.Metadata, color = GH.FgMuted) } StatGlyph(GitHubIcons.Star, stars) StatGlyph(GitHubIcons.Fork, forks) } ScrollableTabRow( selectedTabIndex = activeTab, containerColor = GH.Canvas, edgePadding = 16.dp, divider = { HorizontalDivider(thickness = 1.dp, color = GH.BorderDefault) }, indicator = { pos -> TabRowDefaults.SecondaryIndicator( Modifier.tabIndicatorOffset(pos[activeTab]), height = 2.dp, color = GH.TabUnderline, // orange-coral ) }, ) { tabs.forEachIndexed { i, t -> Tab(selected = i == activeTab, onClick = { onTab(i) }) { Text( t, style = GHText.Body.copy(fontWeight = if (i == activeTab) FontWeight.SemiBold else FontWeight.Normal), color = if (i == activeTab) GH.Fg else GH.FgMuted, modifier = Modifier.padding(vertical = 12.dp), ) } } } } } @Composable private fun StatGlyph(icon: ImageVector, value: String) { Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(4.dp)) { Icon(icon, null, tint = GH.FgMuted, modifier = Modifier.size(13.dp)) Text(value, style = GHText.Metadata, color = GH.FgMuted) } } ``` ### Branch Pill + Latest-Commit Strip ```kotlin import androidx.compose.foundation.shape.RoundedCornerShape import coil.compose.AsyncImage @Composable fun BranchPill(branch: String) { Row( Modifier .clip(RoundedCornerShape(6.dp)) .background(GH.CanvasSubtle) .border(1.dp, GH.BorderDefault, RoundedCornerShape(6.dp)) .padding(horizontal = 12.dp, vertical = 7.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(6.dp), ) { Icon(GitHubIcons.Branch, null, tint = GH.FgMuted, modifier = Modifier.size(13.dp)) Text(branch, style = GHText.Sha, color = GH.Fg) // monospace } } @Composable fun LatestCommit(avatarUrl: String, message: String, sha: String, whenText: String) { Row( Modifier .fillMaxWidth() .background(GH.CanvasSubtle) .drawBottomBorder(GH.BorderDefault) .padding(12.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp), ) { AsyncImage(model = avatarUrl, contentDescription = null, modifier = Modifier.size(18.dp).clip(CircleShape)) Text(message, style = GHText.Body, color = GH.Fg, maxLines = 1, modifier = Modifier.weight(1f)) Text(sha, style = GHText.Caption.copy(fontFamily = Mono), color = GH.FgMuted) // monospace SHA Text(whenText, style = GHText.Caption, color = GH.FgMuted) } } ``` ### Code Browser (sticky path breadcrumb + monospace blob) ```kotlin import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.itemsIndexed import androidx.compose.foundation.horizontalScroll import androidx.compose.foundation.rememberScrollState @Composable fun CodeBrowser(path: String, lines: List) { Column(Modifier.fillMaxSize().background(GH.Canvas)) { // Sticky path breadcrumb — monospace Box( Modifier.fillMaxWidth().background(GH.CanvasSubtle).drawBottomBorder(GH.BorderDefault).padding(horizontal = 16.dp, vertical = 10.dp) ) { Text(path, style = GHText.Code, color = GH.FgMuted) } LazyColumn(Modifier.fillMaxWidth().background(GH.CanvasSubtle).horizontalScroll(rememberScrollState())) { itemsIndexed(lines) { i, ln -> Row(Modifier.padding(horizontal = 12.dp, vertical = 1.dp)) { Text("${i + 1}", style = GHText.Code, color = GH.FgSubtle, modifier = Modifier.widthIn(min = 36.dp)) Spacer(Modifier.width(16.dp)) Text(ln, style = GHText.Code, color = GH.Fg) } } } } } ``` ### State Pill (open / merged / closed / draft) — color carries meaning ```kotlin enum class IssueState(val color: Color, val icon: ImageVector, val label: String) { Open(GH.Open, GitHubIcons.IssueOpened, "Open"), Merged(GH.Merged, GitHubIcons.Merge, "Merged"), Closed(GH.Closed, GitHubIcons.IssueClosed, "Closed"), Draft(GH.Draft, GitHubIcons.Draft, "Draft"), } @Composable fun StatePill(state: IssueState) { Row( Modifier.clip(RoundedCornerShape(999.dp)).background(state.color).padding(horizontal = 12.dp, vertical = 5.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(5.dp), ) { Icon(state.icon, null, tint = Color.White, modifier = Modifier.size(12.dp)) Text(state.label, style = GHText.Label, color = Color.White) // glyph + label so it's not color-only } } ``` ### Contributions Heatmap (signature) ```kotlin @Composable fun ContributionsHeatmap(weeks: List> /* [week][day] -> 0..4 */) { Column { Row(horizontalArrangement = Arrangement.spacedBy(3.dp)) { weeks.forEach { week -> Column(verticalArrangement = Arrangement.spacedBy(3.dp)) { week.forEach { level -> Box( Modifier .size(11.dp) .clip(RoundedCornerShape(2.dp)) .background(GH.HeatDark[level]) .then(if (level == 0) Modifier.border(1.dp, Color(0xFF6E7681).copy(alpha = 0.15f), RoundedCornerShape(2.dp)) else Modifier) ) } } } } Row(Modifier.padding(top = 8.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(4.dp)) { Text("Less", style = GHText.Caption, color = GH.FgMuted) GH.HeatDark.forEach { c -> Box(Modifier.size(11.dp).clip(RoundedCornerShape(2.dp)).background(c)) } Text("More", style = GHText.Caption, color = GH.FgMuted) } } } ``` ### Diff Viewer (additions green wash / deletions red wash) ```kotlin data class DiffLine(val kind: String /* add | del | ctx */, val text: String) @Composable fun DiffViewer(file: String, adds: Int, dels: Int, lines: List) { Column(Modifier.clip(RoundedCornerShape(6.dp)).border(1.dp, GH.BorderDefault, RoundedCornerShape(6.dp))) { Row( Modifier.fillMaxWidth().background(GH.CanvasSubtle).drawBottomBorder(GH.BorderDefault).padding(10.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp), ) { Text(file, style = GHText.Code, color = GH.Fg, modifier = Modifier.weight(1f)) // monospace filename Text("+$adds", style = GHText.Code, color = GH.Open) Text("-$dels", style = GHText.Code, color = GH.Closed) } Column(Modifier.fillMaxWidth().background(GH.CanvasSubtle).horizontalScroll(rememberScrollState())) { lines.forEach { l -> val bg = when (l.kind) { "add" -> GH.DiffAddBg; "del" -> GH.DiffDelBg; else -> Color.Transparent } Row(Modifier.fillMaxWidth().background(bg)) { Text(if (l.kind == "add") "+" else if (l.kind == "del") "-" else " ", style = GHText.Code, color = GH.FgSubtle, modifier = Modifier.width(28.dp)) Text(l.text, style = GHText.Code, color = GH.Fg, modifier = Modifier.padding(end = 16.dp)) } } } } } ``` ### Buttons (reserved green + default) ```kotlin // RESERVED — only for "Code" download and "Merge pull request" @Composable fun GreenButton(title: String, icon: ImageVector, onClick: () -> Unit) { Button( onClick = onClick, shape = RoundedCornerShape(6.dp), colors = ButtonDefaults.buttonColors(containerColor = GH.BtnPrimary, contentColor = Color.White), contentPadding = PaddingValues(horizontal = 16.dp, vertical = 10.dp), ) { Icon(icon, null, modifier = Modifier.size(16.dp)) Spacer(Modifier.width(8.dp)) Text(title, style = GHText.BodyStrong, color = Color.White) } } @Composable fun DefaultButton(title: String, onClick: () -> Unit) { OutlinedButton( onClick = onClick, shape = RoundedCornerShape(6.dp), border = BorderStroke(1.dp, GH.BorderDefault), colors = ButtonDefaults.outlinedButtonColors(containerColor = GH.CanvasInset, contentColor = GH.Fg), contentPadding = PaddingValues(horizontal = 16.dp, vertical = 10.dp), ) { Text(title, style = GHText.BodyStrong) } } ``` > `drawBottomBorder` is a tiny helper: `fun Modifier.drawBottomBorder(c: Color) = drawBehind { drawLine(c, Offset(0f, size.height), Offset(size.width, size.height), 1.dp.toPx()) }`. ## 4. Navigation (Bottom Bar) 4 destinations, `Canvas` container, 1dp top `BorderMuted`, no tint pill; active `Fg`, inactive `FgMuted`. (Android has no live blur for nav bars — use the solid `#0D1117`; the iOS translucency is cosmetic.) ```kotlin @Composable fun GitHubBottomBar(selected: Int, onSelect: (Int) -> Unit) { Column { HorizontalDivider(thickness = 1.dp, color = GH.BorderMuted) NavigationBar(containerColor = GH.Canvas, tonalElevation = 0.dp) { val items = listOf( "Home" to GitHubIcons.Home, "Notifications" to GitHubIcons.Bell, "Explore" to GitHubIcons.Telescope, "Profile" to GitHubIcons.Person, ) items.forEachIndexed { i, (label, icon) -> NavigationBarItem( selected = selected == i, onClick = { onSelect(i) }, icon = { Icon(icon, label, modifier = Modifier.size(22.dp)) }, label = { Text(label, style = GHText.Tab) }, colors = NavigationBarItemDefaults.colors( selectedIconColor = GH.Fg, selectedTextColor = GH.Fg, unselectedIconColor = GH.FgMuted, unselectedTextColor = GH.FgMuted, indicatorColor = Color.Transparent, // no Material pill — GitHub has none ), ) } } } } ``` ## 5. Motion GitHub motion is utilitarian — no gratuitous animation; state changes are crisp. | Moment | Compose recipe | |--------|----------------| | Tab-strip underline | `ScrollableTabRow` indicator `tabIndicatorOffset` slides `tween(200)` | | Merge button → "Merged" | `Crossfade(targetState = merged, tween(200))` swapping label + container `#238636` → `#A371F7` | | Star count-up | `animateIntAsState(stars, tween(250))` | | Diff "Expand hidden" | `AnimatedVisibility(expandVertically(tween(180)))` to reveal collapsed context | | List/tree expand | `animateContentSize(tween(180))` on the file-tree folder | | Pull-to-refresh | `PullToRefreshBox` tinted `FgMuted` | ```kotlin // Merge confirm — the one expressive moment Crossfade(targetState = isMerged, animationSpec = tween(200), label = "merge") { merged -> if (merged) StatePill(IssueState.Merged) else GreenButton("Merge pull request", GitHubIcons.Merge) { /* merge */ } } ``` Haptics: `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` on Merge confirm and Star toggle only — GitHub is not a haptic-heavy app. No haptics on scroll, tab switch, or navigation. ## 6. Icons GitHub ships **Octicons**. Compose has no bundled Octicons, so either vector-drawable the official Octicons SVGs into `res/drawable` and expose them, or map to the closest `material-icons-extended`. Define a `GitHubIcons` object so call sites stay stable: | Purpose | Octicon (iOS) | Compose source | |---------|---------------|----------------| | Repo | `repo` | Octicon `repo` vector, or `Icons.Filled.Book` | | Code / `<>` | `code` | Octicon `code`, or `Icons.Filled.Code` | | Issue opened | `issue-opened` | Octicon, or `Icons.Outlined.Adjust` | | Issue closed | `issue-closed` | Octicon, or `Icons.Filled.CheckCircle` | | Pull request | `git-pull-request` | Octicon, or `Icons.Filled.CallMerge` | | Merge | `git-merge` | Octicon, or `Icons.Filled.Merge` | | Draft PR | `git-pull-request-draft` | Octicon, or `Icons.Outlined.Circle` | | Branch | `git-branch` | Octicon, or `Icons.Filled.AltRoute` | | Commit | `git-commit` | Octicon, or `Icons.Filled.Commit` | | Star | `star` / `star-fill` | Octicon, or `Icons.Filled.Star` | | Fork | `repo-forked` | Octicon, or `Icons.Filled.ForkRight` | | Folder (tree) | `file-directory-fill` | Octicon, or `Icons.Filled.Folder` | | File (tree) | `file` | Octicon, or `Icons.Filled.InsertDriveFile` | | Home (tab) | `home` | Octicon, or `Icons.Filled.Home` | | Notifications (tab) | `bell` | Octicon, or `Icons.Filled.Notifications` | | Explore (tab) | `telescope` | Octicon, or `Icons.Filled.Explore` | | Profile (tab) | `person` | Octicon, or `Icons.Filled.Person` | ## 7. Minimum SDK & Accessibility Notes - **minSdk 24** (`compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`). `Coil` for avatars; vector-drawable the Octicons for a faithful glyph set. - **Edge-to-edge**: `enableEdgeToEdge()`; dark canvas wants light-content system bars (dark-content in light theme). The code browser must scroll horizontally — wrap the blob in `horizontalScroll`. - **No dynamic color**: do **not** call `dynamicColorScheme()` — Primer's palette and the semantic state colors (open/merged/closed/draft) must be exact regardless of wallpaper; Material You would corrupt the "green = merge" learned affordance. - **Reserved green**: `GH.BtnPrimary` (`#238636`) is ONLY the "Code" download and "Merge pull request" buttons — every other action uses `DefaultButton`. Never tint another control green. - **Monospace contract**: code, SHAs, file/branch names, and diffs MUST use `Mono` — never substitute `MonaSans`; glyph distinction (`0`/`O`, `1`/`l`) is an accessibility and correctness requirement for developers. - **Heatmap ramp**: never alter the 5 stops (`#161B22 → #0E4429 → #006D32 → #26A641 → #39D353` dark) — it's the single most recognizable GitHub visual. - **Font scaling**: `sp` honors the user's scale — keep it on titles, body, and code (code stays monospace as it scales). Pin layout-sensitive text (10sp tab labels, count pills, SHAs in tables/trees) via `dp` or a fixed-`fontScale` `CompositionLocalProvider`. - **TalkBack**: state pills carry a leading glyph + text label so the meaning isn't color-only; diff lines expose `+`/`-` markers in the content description, not just the wash; label the repo header "Repository {owner} slash {name}"; the heatmap squares as "{n} contributions on {date}". - **Touch targets**: Material guidance is 48dp — give the 13–17dp inline glyphs (star, fork, branch) a 48dp hit via padding when tappable; file-tree rows are full-row tappable; primary buttons ≥ 36dp. - **Contrast**: `#E6EDF3` on `#0D1117` passes WCAG AA; `#7D8590` muted text passes AA for ≥12sp; the reserved green `#238636` with `#FFFFFF` text passes AA. Validate any custom issue-label tint (text = label color on a 10% fill). - **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, make the tab-underline an instant jump, the merge an instant state swap, the count an instant set, and diff-expand an instant insert.