Skip to main content
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

  1. Token → Components mode: Click a token to see which parts of the checkout it affects (highlighted in green)
  2. Component → Tokens mode: Click a component to see which tokens control its appearance
  3. Adjust values: Use the sliders and color pickers to preview changes in real-time
  4. 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),
)