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

> Explore design tokens and see which components they affect in real-time.

Explore how design tokens affect different components in Primer Checkout. Select a token to see which components it impacts, adjust values with sliders and color pickers, and copy the generated code.
Choose your platform to launch the interactive explorer:

<CardGroup cols={3}>
  <Card title="Web" icon="globe" href="/checkout/primer-checkout/build-your-ui/design-tokens-explorer-web">
    CSS variables with live component tree preview and cross-platform token mapping.
  </Card>

  <Card title="iOS" icon="apple" href="/checkout/primer-checkout/build-your-ui/design-tokens-explorer-ios">
    PrimerCheckoutTheme tokens with live preview and Swift code generation.
  </Card>

  <Card title="Android" icon="android" href="/checkout/primer-checkout/build-your-ui/design-tokens-explorer-android">
    PrimerTheme tokens with live preview and Kotlin code generation.
  </Card>
</CardGroup>