Skip to main content
Wondering which components will be affected when you change the default value of a CSS variable? Use this interactive tool to explore how design tokens affect different components in Primer Checkout. Select a token to see which components it impacts, or select a component to discover which tokens control its appearance.
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 in your CSS: 
primer-checkout {
  /* Spacing */
  --primer-space-small: 12px;
  --primer-space-medium: 16px;

  /* Brand & Focus Colors */
  --primer-color-brand: #6c5ce7;
  --primer-color-focus: #6c5ce7;

  /* Border Colors */
  --primer-color-border-outlined-default: rgba(108, 92, 231, 0.2);
  --primer-color-border-outlined-hover: rgba(108, 92, 231, 0.4);

  /* Border radius */
  --primer-radius-small: 8px;
  --primer-radius-medium: 12px;

  /* Typography */
  --primer-typography-body-medium-size: 15px;
  --primer-typography-body-large-size: 17px;
}