@kartikarora Brand Jetpack Compose & Multiplatform Theme (v2.0.0)

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. Authoritative Editorial Statements: Render pull quotes with the BrandStatement composable featuring the 3.dp signal left border and balanced semibold styling (no faux italics).
  6. Fast Transitions: UI animations and state transitions must use standard Android emphasized easing (FastTransitionSpec = tween(220, 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 CSS Token Hex (Light) Hex (Dark) Material 3 Semantic Role Components / Usage
--color-signal #0066CC #0099FF primary Button, active states, key interactive accents
On Signal #FFFFFF #090D12 onPrimary Text/icons on primary components
--color-ink-muted #5C646E #8B949E secondary / onSurfaceVariant Secondary controls, subtitles, metadata
--color-ink-faint #8E96A0 #484F58 tertiary Tertiary elements, subtle indicators
--color-paper #FBFBFC #0D1117 background Screen background (Scaffold, Surface)
--color-ink #1A1D20 #E6EDF3 onBackground, onSurface Main body text, headings, prominent icons
--color-paper-alt #F3F4F6 #161B22 surface, surfaceContainer Card, ElevatedCard, Sheets, Dialogs
--color-paper-sunken #EAECEF #090D12 surfaceVariant, surfaceContainerLowest Code blocks, input containers
--color-rule #DDE1E6 #21262D outline OutlinedButton, OutlinedTextField, card borders
--color-rule-strong #B8C0CA #30363D outlineVariant Active card borders, dividers

📲 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, follow the specifications in references/Typography.kt.