Charles Schwab (iOS) — Jetpack Compose Implementation Guide

Companion to DESIGN.md — the framework-neutral spec. This file ports Schwab’s visual language to Android with Jetpack Compose (Material 3): a color token object, a Typography set, paste-ready @Composables, the account→trade spine, 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 (Schwab’s maritime navy, the single bright-blue action, the navy gradient hero, the trade ticket as centerpiece, tabular money, sacred gain/loss) while making everything idiomatic Android — NavigationBar instead of a UITabBar, a Brush.linearGradient hero, SegmentedButton-style toggle, dp/sp instead of pt.

Assumes Compose BOM 2024.09+, Kotlin 2.0+, minSdk 24, Material 3, and Coil 2.6+ for any imagery. No color extraction — Schwab’s palette is a fixed institutional set. Schwab is light-first but ships a full maritime-navy dark scheme.

1. Color Tokens

// ui/theme/SchwabColors.kt
import androidx.compose.ui.graphics.Color

object SchwabColors {
    // Brand
    val Blue        = Color(0xFF009DDC)
    val BluePressed = Color(0xFF0080B5)
    val Navy        = Color(0xFF003B5C)
    val NavyDeep    = Color(0xFF002A42)
    val Sky         = Color(0xFF46BEEC)
    val SkyLight    = Color(0xFF0078A8)
    val OnBlue      = Color(0xFF002233) // text ON Schwab Blue (white fails contrast)

    // Canvas & Surfaces (Light)
    val Canvas         = Color(0xFFFFFFFF)
    val Surface        = Color(0xFFF2F6F8)
    val SurfacePressed = Color(0xFFE6EDF1)
    val Divider        = Color(0xFFDBE3E8)

    // Canvas & Surfaces (Dark)
    val DarkCanvas   = Color(0xFF0A1622) // maritime navy — NOT pure black
    val DarkSurface1 = Color(0xFF11212F)
    val DarkSurface2 = Color(0xFF18303F)
    val DarkDivider  = Color(0xFF1F3A4A)

    // Text
    val TextPrimary       = Color(0xFF10222E)
    val TextSecondary     = Color(0xFF5A707C)
    val TextTertiary      = Color(0xFF8597A0)
    val DarkTextPrimary   = Color(0xFFE6EEF3)
    val DarkTextSecondary = Color(0xFF9DB2BF)
    val DarkTextTertiary  = Color(0xFF6A8392)
    val OnHero            = Color(0xFFFFFFFF)
    val OnHeroSub         = Color(0xFF9DC4D8)

    // Financial semantics (sacred — gain/loss only)
    val GainLight  = Color(0xFF16895F)
    val GainDark   = Color(0xFF18B07B)
    val LossLight  = Color(0xFFC8443D)
    val LossDark   = Color(0xFFE2564E)
    val OnHeroGain = Color(0xFF5FE3B0)

    // System / accent
    val Warning = Color(0xFFC8862B)
    val Info    = Color(0xFF0078A8)
    val Gold    = Color(0xFFC8A24B)
}

/** Resolve a change value to its semantic color (flat -> secondary text). */
fun changeColor(change: Double, dark: Boolean): Color = when {
    change > 0 -> if (dark) SchwabColors.GainDark else SchwabColors.GainLight
    change < 0 -> if (dark) SchwabColors.LossDark else SchwabColors.LossLight
    else       -> if (dark) SchwabColors.DarkTextSecondary else SchwabColors.TextSecondary
}

Wire it into both schemes. Schwab is light-first; the dark scheme uses the signature #0A1622 maritime navy, never true black. Do not enable Material You dynamicColorScheme() — the banker-blue identity must hold regardless of wallpaper.

// ui/theme/Theme.kt
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.*
import androidx.compose.runtime.Composable

private val SchwabLight = lightColorScheme(
    primary        = SchwabColors.Blue,
    onPrimary      = SchwabColors.OnBlue, // dark navy, NOT white
    secondary      = SchwabColors.Navy,
    background     = SchwabColors.Canvas,
    onBackground   = SchwabColors.TextPrimary,
    surface        = SchwabColors.Surface,
    onSurface      = SchwabColors.TextPrimary,
    surfaceVariant = SchwabColors.SurfacePressed,
    outline        = SchwabColors.Divider,
    error          = SchwabColors.LossLight,
)

private val SchwabDark = darkColorScheme(
    primary        = SchwabColors.Blue,
    onPrimary      = SchwabColors.OnBlue,
    secondary      = SchwabColors.Sky,
    background     = SchwabColors.DarkCanvas,
    onBackground   = SchwabColors.DarkTextPrimary,
    surface        = SchwabColors.DarkSurface1,
    onSurface      = SchwabColors.DarkTextPrimary,
    surfaceVariant = SchwabColors.DarkSurface2,
    outline        = SchwabColors.DarkDivider,
    error          = SchwabColors.LossDark,
)

@Composable
fun SchwabTheme(
    dark: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit,
) = MaterialTheme(
    colorScheme = if (dark) SchwabDark else SchwabLight,
    typography = SchwabTypography,
    content = content,
)

2. Typography

Schwab’s brand face is “Charles Modern”; bundle Source Sans 3 (SIL OFL) in res/font/ as the closest free match. Defining rule: every monetary figure carries tabular figures via fontFeatureSettings = "tnum".

// ui/theme/SchwabType.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 SourceSans = FontFamily(
    Font(R.font.sourcesans3_regular,   FontWeight.Normal),
    Font(R.font.sourcesans3_medium,    FontWeight.Medium),
    Font(R.font.sourcesans3_semibold,  FontWeight.SemiBold),
    Font(R.font.sourcesans3_bold,      FontWeight.Bold),
    Font(R.font.sourcesans3_extrabold, FontWeight.ExtraBold),
)

private const val TNUM = "tnum"

object SchwabText {
    val TotalValue  = TextStyle(SourceSans, fontWeight = FontWeight.ExtraBold, fontSize = 34.sp, lineHeight = 38.sp, letterSpacing = (-0.6).sp, fontFeatureSettings = TNUM)
    val ScreenTitle = TextStyle(SourceSans, fontWeight = FontWeight.ExtraBold, fontSize = 26.sp, lineHeight = 31.sp, letterSpacing = (-0.3).sp)
    val Section     = TextStyle(SourceSans, fontWeight = FontWeight.Bold,      fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = (-0.2).sp)
    val CardTitle   = TextStyle(SourceSans, fontWeight = FontWeight.Bold,      fontSize = 18.sp, lineHeight = 23.sp)
    val Body        = TextStyle(SourceSans, fontWeight = FontWeight.Normal,    fontSize = 16.sp, lineHeight = 24.sp)
    val RowValue    = TextStyle(SourceSans, fontWeight = FontWeight.ExtraBold, fontSize = 16.sp, lineHeight = 21.sp, fontFeatureSettings = TNUM)
    val AcctName    = TextStyle(SourceSans, fontWeight = FontWeight.Bold,      fontSize = 15.sp, lineHeight = 20.sp)
    val Meta        = TextStyle(SourceSans, fontWeight = FontWeight.Normal,    fontSize = 14.sp, lineHeight = 19.sp)
    val NumericMono = TextStyle(SourceSans, fontWeight = FontWeight.Bold,      fontSize = 13.sp, lineHeight = 17.sp, fontFeatureSettings = TNUM)
    val Caption     = TextStyle(SourceSans, fontWeight = FontWeight.SemiBold,  fontSize = 12.sp, lineHeight = 16.sp)
    val Button      = TextStyle(SourceSans, fontWeight = FontWeight.ExtraBold, fontSize = 16.sp, lineHeight = 16.sp, letterSpacing = 0.2.sp)
    val Tab         = TextStyle(SourceSans, fontWeight = FontWeight.SemiBold,  fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.1.sp)
    val TicketField = TextStyle(SourceSans, fontWeight = FontWeight.ExtraBold, fontSize = 16.sp, lineHeight = 16.sp, fontFeatureSettings = TNUM)
}

val SchwabTypography = Typography(
    headlineLarge  = SchwabText.TotalValue,
    headlineMedium = SchwabText.ScreenTitle,
    titleMedium    = SchwabText.CardTitle,
    bodyMedium     = SchwabText.Body,
    labelSmall     = SchwabText.Tab,
)

3. Signature Components

Account Hero (navy gradient — the lead)

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Notifications
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.unit.dp

@Composable
fun AccountHero(
    title: String, totalValue: String,
    changeAmount: String, changePercent: String, change: Double,
    onBell: () -> Unit,
) {
    Column(
        Modifier.fillMaxWidth()
            .background(Brush.linearGradient(
                listOf(SchwabColors.Navy, SchwabColors.NavyDeep),
                start = Offset(0f, 0f), end = Offset.Infinite))
            .padding(horizontal = 20.dp).padding(top = 8.dp, bottom = 22.dp),
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Text(title, style = SchwabText.ScreenTitle, color = SchwabColors.OnHero, modifier = Modifier.weight(1f))
            IconButton(onClick = onBell, modifier = Modifier.size(34.dp)
                .clip(CircleShape).background(SchwabColors.OnHero.copy(alpha = 0.10f))) {
                Icon(Icons.Filled.Notifications, contentDescription = "Alerts", tint = SchwabColors.OnHero, modifier = Modifier.size(16.dp))
            }
        }
        Text("TOTAL VALUE", style = SchwabText.Caption, color = SchwabColors.OnHeroSub,
             modifier = Modifier.padding(top = 18.dp))
        Text(totalValue, style = SchwabText.TotalValue, color = SchwabColors.OnHero,
             modifier = Modifier.padding(top = 4.dp))
        Row(Modifier.padding(top = 8.dp), verticalAlignment = Alignment.CenterVertically) {
            Text(if (change >= 0) "▲ " else "▼ ", color = SchwabColors.OnHeroGain, style = SchwabText.NumericMono)
            Text("$changeAmount ", style = SchwabText.NumericMono, color = SchwabColors.OnHeroGain)
            Text("($changePercent) today", style = SchwabText.NumericMono, color = SchwabColors.OnHeroSub)
        }
    }
}

Account Card / List Cell

import androidx.compose.foundation.clickable
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.filled.*
import androidx.compose.ui.text.style.TextOverflow

@Composable
fun AccountCard(
    icon: androidx.compose.ui.graphics.vector.ImageVector,
    name: String, mask: String, value: String, changePct: String, change: Double, dark: Boolean,
) {
    val primary = if (dark) SchwabColors.DarkTextPrimary else SchwabColors.TextPrimary
    val secondary = if (dark) SchwabColors.DarkTextSecondary else SchwabColors.TextSecondary
    val surface2 = if (dark) SchwabColors.DarkSurface2 else SchwabColors.Surface
    val sky = if (dark) SchwabColors.Sky else SchwabColors.SkyLight

    Column {
        Row(
            Modifier.fillMaxWidth().height(66.dp).clickable {}.padding(horizontal = 20.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(12.dp),
        ) {
            Box(Modifier.size(38.dp).clip(RoundedCornerShape(10.dp)).background(surface2),
                contentAlignment = Alignment.Center) {
                Icon(icon, contentDescription = null, tint = sky, modifier = Modifier.size(18.dp))
            }
            Column(Modifier.weight(1f)) {
                Text(name, style = SchwabText.AcctName, color = primary)
                Text(mask, style = SchwabText.Caption, color = secondary, maxLines = 1, overflow = TextOverflow.Ellipsis)
            }
            Column(horizontalAlignment = Alignment.End) {
                Text(value, style = SchwabText.RowValue, color = primary)
                Text(changePct, style = SchwabText.NumericMono, color = changeColor(change, dark))
            }
        }
        Box(Modifier.fillMaxWidth().height(0.5.dp)
            .background(if (dark) SchwabColors.DarkDivider else SchwabColors.Divider))
    }
}

Trade Ticket (the centerpiece)

import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults

@Composable
fun TradeTicket(fields: List<Pair<String, String>>, onReview: () -> Unit) {
    var side by remember { mutableIntStateOf(0) }
    val haptics = LocalHapticFeedback.current

    Column(
        Modifier.fillMaxWidth().clip(RoundedCornerShape(12.dp))
            .background(SchwabColors.DarkSurface2).padding(16.dp),
    ) {
        Row(
            Modifier.clip(RoundedCornerShape(8.dp)).background(SchwabColors.DarkCanvas).padding(3.dp),
            horizontalArrangement = Arrangement.spacedBy(3.dp),
        ) {
            listOf("Buy", "Sell").forEachIndexed { i, label ->
                Box(
                    Modifier.weight(1f).height(36.dp).clip(RoundedCornerShape(6.dp))
                        .background(if (i == side) SchwabColors.Blue else Color.Transparent)
                        .clickable {
                            side = i
                            haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove)
                        },
                    contentAlignment = Alignment.Center,
                ) {
                    Text(label, style = SchwabText.NumericMono,
                        color = if (i == side) SchwabColors.OnBlue else SchwabColors.DarkTextSecondary)
                }
            }
        }

        fields.forEachIndexed { idx, (label, value) ->
            Row(
                Modifier.fillMaxWidth().padding(vertical = 12.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Text(label, style = SchwabText.NumericMono, color = SchwabColors.DarkTextSecondary)
                Text(value, style = SchwabText.TicketField, color = SchwabColors.DarkTextPrimary)
            }
            if (idx != fields.lastIndex) {
                Box(Modifier.fillMaxWidth().height(1.dp).background(SchwabColors.DarkDivider))
            }
        }

        Button(
            onClick = { haptics.performHapticFeedback(HapticFeedbackType.LongPress); onReview() },
            shape = RoundedCornerShape(8.dp),
            colors = ButtonDefaults.buttonColors(containerColor = SchwabColors.Blue, contentColor = SchwabColors.OnBlue),
            modifier = Modifier.fillMaxWidth().height(52.dp).padding(top = 14.dp),
        ) { Text("Review order", style = SchwabText.Button) }
    }
}

Sticky Trade Button & Balances Tiles

@Composable
fun StickyTradeBar(onTrade: () -> Unit) {
    val haptics = LocalHapticFeedback.current
    Column(
        Modifier.fillMaxWidth()
            .background(SchwabColors.DarkCanvas.copy(alpha = 0.94f))
            .navigationBarsPadding(),
    ) {
        Box(Modifier.fillMaxWidth().height(0.5.dp).background(SchwabColors.DarkDivider))
        Button(
            onClick = { haptics.performHapticFeedback(HapticFeedbackType.LongPress); onTrade() },
            shape = RoundedCornerShape(8.dp),
            colors = ButtonDefaults.buttonColors(containerColor = SchwabColors.Blue, contentColor = SchwabColors.OnBlue),
            modifier = Modifier.fillMaxWidth().height(52.dp).padding(horizontal = 16.dp).padding(top = 12.dp),
        ) { Text("Trade", style = SchwabText.Button) }
    }
}

@Composable
fun BalancesTiles(tiles: List<Triple<String, String, Double?>>, dark: Boolean) {
    val bg = if (dark) SchwabColors.DarkSurface2 else SchwabColors.Surface
    val primary = if (dark) SchwabColors.DarkTextPrimary else SchwabColors.TextPrimary
    val secondary = if (dark) SchwabColors.DarkTextSecondary else SchwabColors.TextSecondary
    Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
        tiles.chunked(2).forEach { row ->
            Row(horizontalArrangement = Arrangement.spacedBy(12.dp)) {
                row.forEach { (label, value, change) ->
                    Column(
                        Modifier.weight(1f).clip(RoundedCornerShape(12.dp)).background(bg)
                            .padding(horizontal = 16.dp, vertical = 14.dp),
                    ) {
                        Text(label, style = SchwabText.Caption, color = secondary)
                        Text(value, style = SchwabText.TicketField.copy(fontSize = 19.sp),
                            color = change?.let { changeColor(it, dark) } ?: primary,
                            modifier = Modifier.padding(top = 6.dp))
                    }
                }
            }
        }
    }
}

4. Navigation

Schwab has a five-tab bottom strip. On Android model it as a NavigationBar; there is no Material tint pill — active is just the sky-blue icon/label.

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.material3.*

@Composable
fun SchwabBottomBar(selected: Int, onSelect: (Int) -> Unit) {
    NavigationBar(containerColor = SchwabColors.DarkCanvas, tonalElevation = 0.dp) {
        val items = listOf(
            "Accounts" to Icons.Filled.Home,
            "Trade"    to Icons.Filled.TrendingUp,
            "Research" to Icons.Filled.Search,
            "Messages" to Icons.Filled.Email,
            "More"     to Icons.Filled.GridView,
        )
        items.forEachIndexed { i, (label, icon) ->
            NavigationBarItem(
                selected = selected == i,
                onClick = { onSelect(i) },
                icon = { Icon(icon, contentDescription = label, modifier = Modifier.size(22.dp)) },
                label = { Text(label, style = SchwabText.Tab) },
                colors = NavigationBarItemDefaults.colors(
                    selectedIconColor = SchwabColors.Sky,
                    selectedTextColor = SchwabColors.Sky,
                    unselectedIconColor = SchwabColors.DarkTextTertiary,
                    unselectedTextColor = SchwabColors.DarkTextTertiary,
                    indicatorColor = Color.Transparent, // no Material pill
                ),
            )
        }
    }
}

The account→trade spine is a NavHost slide push: Accounts → Account detail (TabRow underline: Positions/Balances/Activity) → Quote → Trade ticket (the TradeTicket composable) → Review → confirmation.

5. Motion

Schwab motion is calm — 120–300ms ease-out, never aggressive on money.

Haptics: LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.TextHandleMove) for tab/segmented/range change; HapticFeedbackType.LongPress for tap-Trade / Place-order; on order accepted use view.performHapticFeedback(HapticFeedbackConstants.CONFIRM).

6. Icons

Closest first-party set is androidx.compose.material:material-icons-extended. For directional gain/loss prefer Unicode triangles ▲ ▼.

7. Minimum SDK & Accessibility Notes

• minSdk 24, compileSdk 34+, Compose BOM 2024.09+, Kotlin 2.0+.
• Edge-to-edge: call enableEdgeToEdge(); let the navy hero gradient draw under the status bar (use statusBarsPadding() only on non-hero screens). The sticky Trade bar uses Modifier.navigationBarsPadding(); the trade keypad uses Modifier.imePadding().
• Schwab Blue contrast: onPrimary is OnBlue (#002233), never white — white-on-#009DDC fails WCAG at body sizes. Enforced in the color scheme above.
• Font scaling: sp honors the user’s font scale — keep it on total value, titles, body, meta. Pin layout-sensitive text (10sp tab labels, ticket field values, table headers) via dp-derived sizes. Tabular figures must stay tabular at every scale (fontFeatureSettings = "tnum").
• Do not rely on color alone: gain/loss must always carry +/− and ▲/▼ (components above do). Hard requirement for a finance app.
• TalkBack: announce an account row as one node — “Roth IRA, Retirement ending 8820, 158,330 dollars 7 cents, up 0.71 percent”. Use Modifier.semantics(mergeDescendants = true); never expose color as the only state.
• Touch targets: Material guidance is 48.dp — account rows are 66.dp (fine); give the bell button and segmented segments a 48.dp hit area via padding. Primary buttons ≥ 48.dp.
• Contrast: #009DDC + #002233 text passes AA at 16sp bold; #18B07B/#E2564E on #0A1622 pass AA at the bold numeric weights; #5FE3B0 on the navy hero passes AA. Validate any custom pair.
• Reduce motion: when Settings.Global.ANIMATOR_DURATION_SCALE == 0, snap the Buy/Sell pill, skip the chart morph and balance-tick color animation (set final state instantly); keep the static sign/arrow.
• Dark mode: invert via the Dark* palette — #0A1622, NOT true black; #10222E text becomes #E6EEF3; keep the navy hero gradient on dark. Shadows vanish on the navy canvas, so add a 1dp DarkDivider border to cards, the ticket, and sheets as the elevation cue. Do not enable dynamicColorScheme() — the banker-blue identity must not harmonize with wallpaper.