MaaS Design System¶

Components:

MaaS Design System for Jetpack Compose¶

Work in progress, not ready for use in production.

A design system built for mobility-as-a-service (MaaS) data and services.

Usage¶

The design system consists of several key parts:

A @Composable fun MaasTheme() that allows configuring design tokens - colors, typography, spacing & corner radius.
Foundational UI components such as Button that adhere to MaasTheme tokens.

The API of MaasTheme closely matches that of MaterialTheme in Google’s Jetpack Compose theming guide.

MaasTheme {
  Button("Hello!", onClick = {})
}

Colors¶

MaasTheme(
  colors = MaasTheme.darkColors(primary = Color(0xffff1499))
) {
  Button("Hello color!", onClick = {})
}

Typography¶

MaasTheme(
  typography = MaasTypography(defaultFontFamily = ComicNeue)
) {
  Button("Hello fonts!", onClick = {})
}

private val ComicNeue = fontFamily(
  font(R.font.comic_neue_regular, FontWeight.Normal),
  font(R.font.comic_neue_bold, FontWeight.Bold),
)

Spacing¶

MaasTheme(
  spacing = MaasSpacing(globalMargin = Spacing.md)
) {
  Button("Hello space!", onClick = {})
}

Corner radius¶

MaasTheme(
  cornerRadius = MaasCornerRadius(buttonRadius = CornerRadius.none)
) {
  Button("Hello corners!", onClick = {})
}

Attribution¶

The bundled font Inter is licensed under the SIL Open Font License.