Skip to main content
This explorer showcases a subset of available tokens and components. For a complete reference of all styling variables, see the Styling Variables page.

​
How to Use

  1. Token → Components mode: Click a token on the left to see which components are affected (highlighted in green)
  2. Component → Tokens mode: Click a component in the tree to see which tokens control its appearance
  3. Adjust values: Use the sliders and color pickers to preview changes in real-time

​
Applying Tokens in Your Code

Once you’ve found the tokens you want to customize, apply them as CSS variables: 
primer-checkout {
  --primer-space-small: 12px;
  --primer-space-medium: 16px;
  --primer-color-brand: #6c5ce7;
  --primer-color-focus: #6c5ce7;
  --primer-color-border-outlined-default: rgba(108, 92, 231, 0.2);
  --primer-color-border-outlined-hover: rgba(108, 92, 231, 0.4);
  --primer-radius-small: 8px;
  --primer-radius-medium: 12px;
  --primer-typography-body-medium-size: 15px;
  --primer-typography-body-large-size: 17px;
}

​
Token Mapping Reference

The table below maps Web CSS variables to Android Kotlin properties for the most commonly used tokens.

​
Color Tokens

CSS Variable (Web)Kotlin Property (Android)Default
--primer-color-brandprimerColorBrand#2F98FF
--primer-color-focusprimerColorFocus#2F98FF
--primer-color-text-primaryprimerColorTextPrimary#212121
--primer-color-text-secondaryprimerColorTextSecondary#757575
--primer-color-text-placeholderprimerColorTextPlaceholder#9E9E9E
--primer-color-border-outlined-defaultprimerColorBorderOutlinedDefault#E0E0E0
--primer-color-border-outlined-hoverprimerColorBorderOutlinedHover#BDBDBD
--primer-color-border-outlined-errorprimerColorBorderOutlinedError#FF7279
--primer-color-icon-primaryprimerColorIconPrimary#212121
--primer-color-icon-positiveprimerColorIconPositive#3EB68F
--primer-color-icon-negativeprimerColorIconNegative#FF7279

​
Spacing Tokens

CSS Variable (Web)Kotlin Property (Android)Default
--primer-space-xsmallSpacingTokens.xsmall4.dp / 4px
--primer-space-smallSpacingTokens.small8.dp / 8px
--primer-space-mediumSpacingTokens.medium12.dp / 12px
--primer-space-largeSpacingTokens.large16.dp / 16px
--primer-space-xlargeSpacingTokens.xlarge20.dp / 20px

​
Border & Radius Tokens

CSS Variable (Web)Kotlin Property (Android)Default
--primer-radius-smallRadiusTokens.small4.dp / 4px
--primer-radius-mediumRadiusTokens.medium8.dp / 8px
--primer-radius-largeRadiusTokens.large12.dp / 12px
--primer-width-defaultBorderWidthTokens.thin1.dp / 1px
--primer-width-focusBorderWidthTokens.medium2.dp / 2px

​
Typography Tokens

CSS Variable (Web)Kotlin Property (Android)Default
--primer-typography-body-small-sizeTypographyTokens.bodySmall.size12sp / 12px
--primer-typography-body-medium-sizeTypographyTokens.bodyMedium.size14sp / 14px
--primer-typography-body-large-sizeTypographyTokens.bodyLarge.size16sp / 16px
--primer-typography-title-large-weightTypographyTokens.titleLarge.weight550

​
See also

Styling guide

How to apply styles to Primer Checkout

Web styling variables

Complete list of all available Web tokens

Android design tokens

Complete list of all available Android tokens