@kartikarora Brand Jetpack Compose & Multiplatform Theme

This skill defines the official Material 3 Design System for Jetpack Compose on Android and Compose Multiplatform (CMP - iOS, Desktop, Web/Wasm). It ensures all UI components automatically conform to @kartikarora brand guidelines across colors, typography, shapes, spacing, and animations.

⚠️ Strict Mandates for AI Agents

  1. Brand Fidelity: The Material 3 ColorScheme, Typography, and Shapes must strictly follow the brand tokens.
  2. No Dynamic Color: Avoid Android 12+ Wallpaper/Dynamic Color (dynamicLightColorScheme / dynamicDarkColorScheme) to ensure visual brand consistency across all platforms.
  3. Typography Standard: Use Albert Sans as the sans-serif font family and JetBrains Mono for code/monospace blocks. Headings must have -0.02em letter spacing and bold (700) weight.
  4. Spacing System: Use MaterialTheme.spacing (8dp base scale: 8dp, 16dp, 24dp, 32dp, 48dp, 64dp, 96dp) instead of arbitrary hardcoded padding.
  5. High-Impact Blockquotes: Render pull quotes with the BrandBlockquote composable featuring the mandatory 6.dp accent left border and bold italic styling.
  6. Fast Transitions: UI animations and state transitions must use a fast 0.2s duration (FastTransitionSpec = tween(200, easing = FastOutSlowInEasing)).
  7. System Theme Tracking: Respect isSystemInDarkTheme(). Do not create custom theme switchers or manually forced state without explicit requirement.
  8. Brand Synchronization: This skill derives directly from kartikarora-brand. Any changes to brand tokens, CSS, or guidelines must immediately be reflected here.

🎨 Design Tokens & Specifications

1. Color Scheme Mapping

Brand Token Hex (Light) Hex (Dark) Material 3 Semantic Role Components / Usage
--accent #0066CC #0099FF primary Button, active states, key interactive accents
On Accent #FFFFFF #0D1117 onPrimary Text/icons on primary components
--secondary #57606A #8B949E secondary / onSurfaceVariant Secondary controls, subtitles, metadata
--tertiary #8C959F #484F58 tertiary Tertiary elements, subtle indicators
--bg #FFFFFF #0D1117 background Screen background (Scaffold, Surface)
--primary (Text) #0D1117 #E6EDF3 onBackground, onSurface Main body text, headings, prominent icons
--card #FFFFFF #161B22 surface, surfaceContainer Card, ElevatedCard, Sheets, Dialogs
--bg-alt #F6F8FA #161B22 surfaceVariant, surfaceContainerLow Filter chips, table headers, container backgrounds
--border #D0D7DE #30363D outline OutlinedButton, OutlinedTextField, card borders

2. Typography Ratios & Google Fonts Integration

📲 How Android Apps Should Load Google Fonts (Downloadable Fonts)

To fetch Albert Sans and JetBrains Mono from Google Fonts on Android using the official Compose Downloadable Fonts API:

  1. Add Dependency in app/build.gradle.kts: 
    dependencies {
    implementation("androidx.compose.ui:ui-text-google-fonts:1.7.0") // Or your Compose version
}
  2. Add Font Certificates in res/values/font_certs.xml: 
    <?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="com_google_android_gms_fonts_certs">
        <item>@array/com_google_android_gms_fonts_certs_dev</item>
        <item>@array/com_google_android_gms_fonts_certs_prod</item>
    </array>
    <string-array name="com_google_android_gms_fonts_certs_dev">
        <item>MIIEqDCCA5CgAwIBAgIJANWFuGx90071MA0GCSqGSIb3DQEBBQUAMIGUMQswCQYDVQQGEwJVUzETMBEGA1UECBMKQ2FsaWZvcm5pYTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEQMA4GA1UEChMHR29vZ2xlMTExMC8GA1UECxMoQW5kcm9pZCBNYXJrZXQgUGxhY2Vob2xkZXIgQ2VydGlmaWNhdGVzMQwwCgYDVQQDEwNkdXkwHhcNMDkwNDI5MTkwNDQxWhcNMTkwNDI3MTkwNDQxWjCBnDELMAkGA1UEBhMCVVMxEzARBgNVBAgTCkNhbGlmb3JuaWExFjAUBgNVBAcTDU1vdW50YWluIFZpZXcxEDAOBgNVBAoTB0dvb2dsZTExMC8GA1UECxMoQW5kcm9pZCBNYXJrZXQgUGxhY2Vob2xkZXIgQ2VydGlmaWNhdGVzMQwwCgYDVQQDEwNkdXkwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDQn8r85N/Nn7vKhX3Bq+rP7vT8w/w1+e25/L2Zq8iL1yG...</item>
    </string-array>
    <string-array name="com_google_android_gms_fonts_certs_prod">
        <item>MIIEqDCCA5CgAwIBAgIJANWFuGx90071MA0GCSqGSIb3DQEBBQUAMIGUMQswCQYDVQQGEwJVUzETMBEGA1UECBMKQ2FsaWZvcm5pYTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEQMA4GA1UEChMHR29vZ2xlMTExMC8GA1UECxMoQW5kcm9pZCBNYXJrZXQgUGxhY2Vob2xkZXIgQ2VydGlmaWNhdGVzMQwwCgYDVQQDEwNkdXkwHhcNMDkwNDI5MTkwNDQxWhcNMTkwNDI3MTkwNDQxWjCBnDELMAkGA1UEBhMCVVMxEzARBgNVBAgTCkNhbGlmb3JuaWExFjAUBgNVBAcTDU1vdW50YWluIFZpZXcxEDAOBgNVBAoTB0dvb2dsZTExMC8GA1UECxMoQW5kcm9pZCBNYXJrZXQgUGxhY2Vob2xkZXIgQ2VydGlmaWNhdGVzMQwwCgYDVQQDEwNkdXkwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDQn8r85N/Nn7vKhX3Bq+rP7vT8w/w1+e25/L2Zq8iL1yG...</item>
    </string-array>
</resources>
  3. Instantiate Google Fonts Families in Kotlin: 
    import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.googlefonts.GoogleFont
import androidx.compose.ui.text.googlefonts.Font
import <your.package.name>.R

val googleFontProvider = GoogleFont.Provider(
    providerAuthority = "com.google.android.gms.fonts",
    providerPackage = "com.google.android.gms",
    certificates = R.array.com_google_android_gms_fonts_certs
)

val AlbertSansGoogleFont = GoogleFont("Albert Sans")
val JetBrainsMonoGoogleFont = GoogleFont("JetBrains Mono")

val AlbertSansFontFamily = FontFamily(
    Font(googleFont = AlbertSansGoogleFont, fontProvider = googleFontProvider, weight = FontWeight.Light),
    Font(googleFont = AlbertSansGoogleFont, fontProvider = googleFontProvider, weight = FontWeight.Normal),
    Font(googleFont = AlbertSansGoogleFont, fontProvider = googleFontProvider, weight = FontWeight.Medium),
    Font(googleFont = AlbertSansGoogleFont, fontProvider = googleFontProvider, weight = FontWeight.SemiBold),
    Font(googleFont = AlbertSansGoogleFont, fontProvider = googleFontProvider, weight = FontWeight.Bold)
)

val JetBrainsMonoFontFamily = FontFamily(
    Font(googleFont = JetBrainsMonoGoogleFont, fontProvider = googleFontProvider, weight = FontWeight.Normal),
    Font(googleFont = JetBrainsMonoGoogleFont, fontProvider = googleFontProvider, weight = FontWeight.Medium),
    Font(googleFont = JetBrainsMonoGoogleFont, fontProvider = googleFontProvider, weight = FontWeight.SemiBold),
    Font(googleFont = JetBrainsMonoGoogleFont, fontProvider = googleFontProvider, weight = FontWeight.Bold)
)

// Pass into custom brand typography
val typography = createKartikAroraTypography(
    sansFontFamily = AlbertSansFontFamily,
    monoFontFamily = JetBrainsMonoFontFamily
)

🌐 Compose Multiplatform (CMP) Alternative

For non-Android platforms (iOS, Desktop, Wasm), include albert_sans_*.ttf and jetbrains_mono_*.ttf inside commonMain/composeResources/font/ and load via org.jetbrains.compose.resources.Font.

// Material 3 Typography Scale mapped to Albert Sans
val KartikAroraTypography = Typography(
    displayLarge = TextStyle(fontFamily = AlbertSansFontFamily, fontWeight = FontWeight.Bold, fontSize = 48.sp, letterSpacing = (-0.02).em),
    headlineLarge = TextStyle(fontFamily = AlbertSansFontFamily, fontWeight = FontWeight.Bold, fontSize = 28.sp, letterSpacing = (-0.02).em),
    headlineMedium = TextStyle(fontFamily = AlbertSansFontFamily, fontWeight = FontWeight.Bold, fontSize = 24.sp, letterSpacing = (-0.01).em),
    titleLarge = TextStyle(fontFamily = AlbertSansFontFamily, fontWeight = FontWeight.SemiBold, fontSize = 18.sp),
    bodyLarge = TextStyle(fontFamily = AlbertSansFontFamily, fontWeight = FontWeight.Normal, fontSize = 16.sp),
    bodyMedium = TextStyle(fontFamily = AlbertSansFontFamily, fontWeight = FontWeight.Normal, fontSize = 14.sp),
    labelLarge = TextStyle(fontFamily = AlbertSansFontFamily, fontWeight = FontWeight.SemiBold, fontSize = 14.sp)
)

3. Spacing System (MaterialTheme.spacing)

// Spacing scale: 8dp base
val spacing = MaterialTheme.spacing
spacing.extraSmall      // 8.dp  (--space-xs)
spacing.small           // 16.dp (--space-sm)
spacing.medium          // 24.dp (--space-md)
spacing.large           // 32.dp (--space-lg)
spacing.extraLarge      // 48.dp (--space-xl)
spacing.twoExtraLarge   // 64.dp (--space-2xl)
spacing.threeExtraLarge // 96.dp (--space-3xl)

// Container constraints
spacing.maxWidth        // 1200.dp (--max-width)
spacing.maxWidthNarrow  // 800.dp  (--max-width-narrow)

4. Shapes & Border Radius

5. Specialized Brand Components

High-Impact Blockquote (BrandBlockquote)

BrandBlockquote(
    text = "Building reliable systems requires extreme attention to detail and crisp visual identity."
)

Translucent Glassmorphic Card (GlassmorphicCard)

GlassmorphicCard(
    modifier = Modifier.fillMaxWidth().padding(MaterialTheme.spacing.medium)
) {
    Column(modifier = Modifier.padding(MaterialTheme.spacing.small)) {
        Text("Glassmorphic Card", style = MaterialTheme.typography.titleMedium)
    }
}

Badges & Tech Tags (BrandBadge, TechTag)

Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
    BrandBadge(text = "Win", variant = BadgeVariant.Win)
    BrandBadge(text = "Draw", variant = BadgeVariant.Draw)
    TechTag(text = "Kotlin")
    TechTag(text = "Compose Multiplatform")
}

📦 Reference Files

The full, copy-pasteable Kotlin reference code is available in the references/ directory: