> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Design Tokens Explorer — Android

> Explore PrimerTheme tokens and see which components they affect, with live Kotlin code generation.

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.

> [!NOTE]
>
> This explorer showcases a subset of tokens from `PrimerTheme`. For a complete reference, see the [Android Color Tokens](https://primer.io/docs/sdk/android-checkout/v3.0.0-beta/api/theming/color-tokens.md) page.

Android Preview

Card number

4242 4242 4242 4242

Expiry

MM/YY

CVV

123

Pay \$49.99

Generated Kotlin Code

<pre />

Affected

Selected

***

## 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`:

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

***

## Related

* [Card Form Layout Builder](https://primer.io/docs/checkout/primer-checkout/build-your-ui/card-form-layout-builder.md) — Build card form layouts
* [Component Architecture Explorer](https://primer.io/docs/checkout/primer-checkout/build-your-ui/component-architecture-explorer-android.md) — Compose component hierarchy


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.