Jenga

A Kotlin Multiplatform and Compose Multiplatform design system. Brandable design tokens and ready-made Jenga* components that render the same on Android, iOS, Desktop and the Web (Wasm), from one shared commonMain codebase.

Jenga is Swahili for "to build". You build screens out of Jenga components, not out of raw Compose or Material primitives.

Button Text field Status pill

Example

// Light and dark follow the system.
JengaTheme(
    content = {
        JengaScaffold(
            topBar = {
                JengaTopAppBar(
                    title = "Events",
                )
            },
            content = { padding ->
                JengaStack(
                    modifier = Modifier.padding(
                        paddingValues = padding,
                    ),
                    content = {
                        JengaText(
                            text = "Tonight",
                            style = JengaTheme.typography.headingMedium,
                        )
                        JengaButton(
                            text = "Scan a ticket",
                            onClick = { },
                        )
                    },
                )
            },
        )
    },
)

Brand it from one seed, and every component re-themes in light and dark:

JengaTheme(
    brand = jengaBrand(
        seed = Color(
            color = 0xFF6D28D9,
        ),
    ),
    content = { App() },
)

Accessibility

Accessibility is built in and enforced in CI:

• Interactive blocks reserve a 48dp touch target.
• Color pairs are contrast-tested to WCAG AA (4.5:1 for text, 3:1 for brand fills), including brand-derived schemes across a range of seeds.
• Inputs show a focus ring, and directional icons mirror for right-to-left layouts.
• Every block ships verified light, dark, large-font and RTL screenshots.

Get started Browse components