Skip to content

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.

FormaTheme(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. Note that Material You dynamic color is Android-only; every other target uses these static brand values.

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.

TokenSample
displayLargeBetter defaults
headlineMediumBetter defaults
titleMediumBetter defaults
bodyLargeBetter 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.

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