Design Systems in Compose — From Scratch

2. Color Scheme

data class MyColorScheme(
    val primary: Color, val onPrimary: Color,
    val secondary: Color, val tertiary: Color,
    val surface: Color, val onSurface: Color,
    val background: Color, val border: Color,
    val error: Color, val warning: Color, val success: Color,
) {
    companion object {
        fun fromSeed(seed: Color, isDark: Boolean = false): MyColorScheme {
            // HSL hue rotation: secondary = +120°, tertiary = +240°, accent = +180°
        }
    }
}

3. Dark Mode — Design Intentionally

// Don't just invert. Design each mode:
fun light() = MyColorScheme(
    surface = Color.White, onSurface = Color.Black,
    background = Color(0xFFF5F0E8), // warm paper
    // shadows = black offset
)
fun dark() = MyColorScheme(
    surface = Color(0xFF1A1A1A), onSurface = Color(0xFFE0E0E0),
    background = Color(0xFF121212),
    // shadows = white glow (black shadows are invisible on dark!)
)

4. Module Structure

my-design-system/
├── src/
│   ├── commonMain/        # ALL components here
│   │   └── kotlin/
│   │       ├── components/
│   │       ├── foundation/
│   │       └── theme/
│   ├── androidMain/       # Haptics, insets
│   ├── desktopMain/       # Cursor icons
│   └── wasmJsMain/        # Web-specific
├── catalog/               # Showcase app (separate module)
└── build.gradle.kts

5. Build Config

kotlin {
    androidTarget(); jvm("desktop"); wasmJs { browser() }; iosArm64(); iosSimulatorArm64()
    sourceSets {
        commonMain.dependencies {
            implementation(compose.foundation)
            implementation(compose.ui)
            implementation(compose.runtime)
            // NO compose.material3!
        }
    }
}

Component Design Principles

Modifier for layout, theme for look

// ✅ Colors, borders, corners come from theme
@Composable
fun Button(onClick: () -> Unit, modifier: Modifier = Modifier, content: @Composable () -> Unit) {
    Box(modifier = modifier.background(MyTheme.colors.primary).border(MyTheme.borders.default, MyTheme.colors.border)) { content() }
}

// ❌ Never pass style as parameters
@Composable
fun Button(backgroundColor: Color = ..., borderWidth: Dp = ...) // NO

Composable slots over string params

// ✅ Flexible
@Composable fun Card(modifier: Modifier = Modifier, content: @Composable ColumnScope.() -> Unit)

// ❌ Rigid
@Composable fun Card(title: String, subtitle: String, body: String) // NO

State hoisting

// ✅ Caller owns state
@Composable fun Toggle(checked: Boolean, onCheckedChange: (Boolean) -> Unit)

// ❌ Internal state
@Composable fun Toggle(initialChecked: Boolean = false) // NO

Semantic severity enums

enum class Severity(val label: String, val icon: ImageVector) {
    Info("Note", Lucide.Info), Success("Tip", Lucide.Lightbulb),
    Warning("Warning", Lucide.TriangleAlert), Danger("Danger", Lucide.OctagonAlert),
}
// Reuse across Callout, Banner, Notification, Toast

Catalog App

@Composable
fun ComponentShowcase(name: String, description: String, code: String, content: @Composable () -> Unit) {
    Card {
        BasicText(name, style = typography.headline)
        BasicText(description, style = typography.body)
        Box(background = colors.background) { content() } // Live demo
        var showCode by remember { mutableStateOf(false) }
        if (showCode) Code(code = code, language = "kotlin")
    }
}

Anti-Patterns

Quality Standards

• All public components = @Composable functions with Modifier parameter
• Theme accessor = single object (MyTheme.colors, .typography, .spacing)
• Transitive deps use api() not implementation()
• No internal state leaks — all state hoisted
• 48dp minimum touch targets on all interactive elements
• Screenshot tests for visual regression
• Interaction tests for state changes

Testing

// Screenshot test
@Test fun buttonVariants() {
    composeTestRule.setContent { MyTheme { Column { /* variants */ } } }
    composeTestRule.onRoot().captureToImage()
}

// Interaction test
@Test fun toggleChangesState() {
    var checked = false
    composeTestRule.setContent { Toggle(checked = checked, onCheckedChange = { checked = it }) }
    composeTestRule.onNodeWithTag("toggle").performClick()
    assertTrue(checked)
}

Done Checklist

• Token hierarchy defined (global → semantic → component)
• Color scheme with light and dark modes (designed, not inverted)
• Typography, spacing, borders, corners, shadows as data classes
• Theme delivered via CompositionLocalProvider + accessor object
• Components use Foundation only — zero Material imports
• State hoisting on all interactive components
• Composable slots for content
• Catalog app showcasing all components
• KMP module structure with platform-specific source sets
• Published with proper Maven coordinates