Design Tokens Explorer — Android

Explore how PrimerTheme tokens affect different parts of the Android Checkout. Select a token to see which components it impacts, adjust values with sliders and color pickers, and copy the generated Kotlin code directly into your project.

This explorer showcases a subset of tokens from PrimerTheme. For a complete reference, see the Android Color Tokens page.

How to Use

Token → Components mode: Click a token to see which parts of the checkout it affects (highlighted in green)
Component → Tokens mode: Click a component to see which tokens control its appearance
Adjust values: Use the sliders and color pickers to preview changes in real-time
Copy generated code: The Kotlin code updates live — copy it directly into your project

Applying Tokens in Your Code

Once you’ve configured your theme, apply it when creating PrimerTheme:

val customTheme = PrimerTheme(
    lightColorTokens = object : LightColorTokens() {
        override val primerColorBrand = Color(0xFF6C5CE7)
    },
    spacingTokens = SpacingTokens(small = 10.dp, medium = 14.dp),
    radiusTokens = RadiusTokens(medium = 12.dp),
)

Card Form Layout Builder — Build card form layouts
Component Architecture Explorer — Compose component hierarchy

iOS Layout customization

⌘I

​How to Use

​Applying Tokens in Your Code

​Related

How to Use

Applying Tokens in Your Code

Related