# Android Design System (Jetpack Compose)

> Enforce Material Design 3 and design token usage in Jetpack Compose apps.

- Skill: `fierzone/android-design-system-jetpack-compose` (Agent Skill)
- Install (CLI): `npx skillmds@latest add fierzone/android-design-system-jetpack-compose`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fierzone/android-design-system-jetpack-compose/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: fierzone (https://skillmd.com/u/fierzone)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/fierzone/android-design-system-jetpack-compose

---


# Android Design System (Jetpack Compose)

## **Priority: P2 (OPTIONAL)**

Enforce Material Design 3 tokens in Jetpack Compose. Use `MaterialTheme` for consistency.

## Token Structure

```kotlin
// ui/theme/Color.kt
val Primary = Color(0xFF2196F3)
val Secondary = Color(0xFF9C27B0)
val Background = Color(0xFFFFFFFF)

// ui/theme/Theme.kt
private val LightColorScheme = lightColorScheme(
    primary = Primary,
    secondary = Secondary,
    background = Background
)

// ui/theme/Type.kt
val Typography = Typography(
    headlineLarge = TextStyle(fontSize = 32.sp, fontWeight = FontWeight.Bold),
    bodyMedium = TextStyle(fontSize = 16.sp, fontWeight = FontWeight.Normal)
)
```

## Usage

```kotlin
// ❌ FORBIDDEN
Box(modifier = Modifier.background(Color(0xFF2196F3)))
Text("Title", fontSize = 32.sp, color = Color.Black)

// ✅ ENFORCED
Box(modifier = Modifier.background(MaterialTheme.colorScheme.primary))
Text("Title", style = MaterialTheme.typography.headlineLarge)
Spacer(modifier = Modifier.height(16.dp)) // Use dp units
```

## Anti-Patterns

- **No Hardcoded Colors**: Use `Color(0xFF...)` → Error. Use `MaterialTheme.colorScheme.*`.
- **No Inline Typography**: Define `fontSize = 32.sp` → Error. Use `MaterialTheme.typography.*`.
- **No Magic Spacing**: Use `padding = 16.dp` inline → Acceptable, but consider tokens.

## Related Topics

mobile-ux-core | android/compose