Building a Custom Design System
Extend the theme with your own tokens.
Building a Custom Design System is a free Jetpack Compose Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Beyond the Defaults
Real brands need more than Material's built-ins. A design system bundles your colors, type, shapes, and extra tokens into one reusable theme. 🏗️
Wrap MaterialTheme
You start by writing your own AppTheme Composable that configures MaterialTheme, giving the whole app a single, named entry point.
@Composable
fun AppTheme(content: @Composable () -> Unit) { /* ... */ }Pass Your Tokens In
Inside AppTheme you hand MaterialTheme your custom colorScheme, typography, and shapes, so every screen inherits your brand automatically.
MaterialTheme(
colorScheme = brandColors,
typography = brandType,
shapes = brandShapes
) { content() }Material Misses Some Tokens
Some brand values, like a success green or a custom spacing unit, have no Material role. You add these as your own extra tokens.
Hold Extra Colors
You group extra colors in a small data class, a tidy home for brand values Material does not provide out of the box.
data class BrandColors(
val success: Color,
val warning: Color
)CompositionLocal
To share custom tokens down the tree without passing parameters, you use a CompositionLocal, Compose's built-in ambient value mechanism.
Create the Local
You declare a staticCompositionLocalOf with a default, creating a channel any Composable can read your brand colors from.
val LocalBrand = staticCompositionLocalOf { defaultBrand }Provide the Values
In AppTheme you wrap content in a CompositionLocalProvider, feeding your brand tokens into the tree alongside MaterialTheme.
CompositionLocalProvider(LocalBrand provides brand) {
MaterialTheme(/* ... */) { content() }
}Read Custom Tokens
Anywhere below, a Composable reads LocalBrand.current to grab your custom values, mirroring how MaterialTheme exposes its own.
val success = LocalBrand.current.successOffer a Clean API
Many teams expose an object so calls read like AppTheme.brand.success, a friendly facade over the CompositionLocal underneath.
One Source of Truth
Now colors, type, shapes, and custom tokens all flow from a single theme, so the app stays consistent and effortless to evolve. ✨
Quick Check
You need a brand color Material has no role for, shared app-wide. What do you reach for?
Recap: Your Own Theme
You wrapped MaterialTheme in an AppTheme, added extra tokens via CompositionLocal, and gave your app one branded source of truth. 🎉
Frequently asked questions
Is the “Building a Custom Design System” lesson free?
Yes — the full text of “Building a Custom Design System” is free to read here on the web, and the Jetpack Compose Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Jetpack Compose Academy course, upgrade to CoddyKit PRO.
What will I learn in “Building a Custom Design System”?
Extend the theme with your own tokens. You practise Jetpack Compose Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Jetpack Compose Academy?
No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Building a Custom Design System” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Jetpack Compose Academy lesson?
Yes. Every Jetpack Compose Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- MaterialTheme & Color Schemes
- Typography & Shape Tokens
- Dark Mode & Dynamic Color
- Building a Custom Design System