Getting Started Theming

Theming

FormaTheme installs a color scheme, the Public Sans type scale, a 4dp spacing grid, and a shape set — each exposed as its own token, so you can read or override any part of it.

KOTLIN

123456FormaTheme(darkTheme = isSystemInDarkTheme()) {
    val colors = FormaTheme.colors
    val spacing = FormaTheme.spacing   // xs sm md lg xl
    val type = FormaTheme.typography
    App()
}

Color

FormaUI’s default palette is warm and editorial — a cream surface paired with a coral primary — and it’s fully defined for both light and dark. Material You dynamic color needs Android 12+ (API 31); older Android versions, and this site’s browser previews, use these static brand values instead.

Primary

#c84219

On primary

#fdfbf7

Canvas / Surface

#f8f4ed

Ink

#26201d

Typography

Type is Public Sans, set at an editorial scale — a handful of sizes, distinguished by weight and tracking as much as by size, rather than a dense ramp of near-identical steps.

Token	Sample
displayLarge	Better defaults
headlineMedium	Better defaults
titleMedium	Better defaults
bodyLarge	Better defaults

Spacing

Every spacing token snaps to a 4dp grid, so layouts stay aligned without hand-tuned padding.

xs4dp

sm8dp

md16dp

lg24dp

xl32dp

Shape

Corner radii range from a tight, functional 6dp up to a fully rounded pill — the same shape scale FormaButtonDefaults and friends draw from.

sm · 6dp

md · 12dp

lg · 20dp

full

Overriding the theme

Every FormaUI component accepts modifier, colors, and shape parameters, so you can reach for the brand defaults or override down to the pixel on a single instance.

KOTLIN

1234567FormaButton(
    onClick = { },
    shape = RoundedCornerShape(8.dp),
    colors = ButtonDefaults.buttonColors(
        containerColor = Color(0xFF2C6E63),
    ),
) { Text("Custom") }

PreviousComponents Next Button