Docs

Theming

Design tokens: color, typography, shapes and spacing.

caveui is built on Material 3 with a thin design-token layer on top. Components never hard-code colors or sizes — they read from the theme so they adapt to light, dark and dynamic color automatically.

Tokens

  • Color — MaterialTheme.colorScheme.* (primary, surface, onSurface, …).
  • Shape — MaterialTheme.shapes.* for corner radii.
  • Spacing — CaveTheme.spacing.* for consistent padding and gaps.
  • Typography — MaterialTheme.typography.* for text styles.
kotlin
Surface(
    color = MaterialTheme.colorScheme.surface,
    shape = MaterialTheme.shapes.large,
) {
    Text(
        text = "Themed",
        style = MaterialTheme.typography.titleMedium,
        modifier = Modifier.padding(CaveTheme.spacing.md),
    )
}

The docs site uses its own token set — an amber primary on a warm stone surface, with class-based dark mode — but the principle is the same: style from tokens, never hard-coded values.