Design Tokens Explorer — iOS

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

This explorer showcases a subset of tokens from PrimerCheckoutTheme. For a complete reference, see the Theming 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 Swift code updates live — copy it directly into your project

Applying Tokens in Your Code

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

let theme = PrimerCheckoutTheme(
  colors: ColorOverrides(
    primerColorBrand: Color(red: 0.49, green: 0.36, blue: 0.75)
  ),
  radius: RadiusOverrides(
    primerRadiusMedium: 12
  )
)

PrimerCheckout(
  clientToken: clientToken,
  primerTheme: theme
)

colors applies in light mode only. To theme dark mode, pass the same kind of ColorOverrides as darkColors. Any color you leave out of darkColors uses Primer’s dark default, not your light value. See Theming.

Theming — Theming API reference
Card Form Layout Builder — Build card form layouts
Architecture Explorer — Explore the composable view and slot hierarchy

​How to Use

​Applying Tokens in Your Code

​Related

How to Use

Applying Tokens in Your Code

Related