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

> Explore the `--primer-*` CSS custom properties and see which components they affect, with live CSS generation.

> [!NOTE]
>
> This explorer showcases a subset of available tokens and components. For a complete reference of all styling variables, see the [Styling Variables](https://primer.io/docs/sdk/primer-checkout-web/styling-variables.md) page.

**primer-checkout**

**primer-main**

**payment-method-container**

**primer-card-form**

**input-wrapper**

**input-label**

**card-number**

**input-wrapper (expiry)**

**input-wrapper (cvv)**

**submit**

**error-container**

Live Preview

Card number

4242 4242 4242 4242

Expiry

12/28

CVV

123

Pay \$49.99

Affected

Selected

***

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

```css theme={"dark"}
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-brand` | `primerColorBrand` | `#2F98FF` |
| `--primer-color-focus` | `primerColorFocus` | `#2F98FF` |
| `--primer-color-text-primary` | `primerColorTextPrimary` | `#212121` |
| `--primer-color-text-secondary` | `primerColorTextSecondary` | `#757575` |
| `--primer-color-text-placeholder` | `primerColorTextPlaceholder` | `#9E9E9E` |
| `--primer-color-text-outlined-default` | `primerColorTextOutlinedDefault` | `#212121` |
| `--primer-color-border-outlined-default` | `primerColorBorderOutlinedDefault` | `#E0E0E0` |
| `--primer-color-border-outlined-hover` | -- | `#BDBDBD` |
| `--primer-color-border-outlined-error` | `primerColorBorderOutlinedError` | `#FF7279` |
| `--primer-color-icon-primary` | `primerColorIconPrimary` | `#212121` |
| `--primer-color-icon-positive` | `primerColorIconPositive` | `#3EB68F` |
| `--primer-color-icon-negative` | `primerColorIconNegative` | `#FF7279` |

### Spacing Tokens

| CSS Variable (Web) | Kotlin Property (Android) | Default |
| - | - | - |
| `--primer-space-xsmall` | `SpacingTokens.xsmall` | `4.dp` / `4px` |
| `--primer-space-small` | `SpacingTokens.small` | `8.dp` / `8px` |
| `--primer-space-medium` | `SpacingTokens.medium` | `12.dp` / `12px` |
| `--primer-space-large` | `SpacingTokens.large` | `16.dp` / `16px` |
| `--primer-space-xlarge` | `SpacingTokens.xlarge` | `20.dp` / `20px` |

### Border & Radius Tokens

| CSS Variable (Web) | Kotlin Property (Android) | Default |
| - | - | - |
| `--primer-radius-small` | `RadiusTokens.small` | `4.dp` / `4px` |
| `--primer-radius-medium` | `RadiusTokens.medium` | `8.dp` / `8px` |
| `--primer-radius-large` | `RadiusTokens.large` | `12.dp` / `12px` |
| `--primer-width-default` | `WidthTokens.default` | `1.dp` / `1` |
| `--primer-width-focus` | `WidthTokens.focus` | `2.dp` / `2` |

Web border widths are unitless: write `2`, not `2px`.

### Typography Tokens

| CSS Variable (Web) | Kotlin Property (Android) | Default |
| - | - | - |
| `--primer-typography-body-small-size` | `TypographyTokens.bodySmall.size` | `12sp` / `12px` |
| `--primer-typography-body-medium-size` | `TypographyTokens.bodyMedium.size` | `14sp` / `14px` |
| `--primer-typography-body-large-size` | `TypographyTokens.bodyLarge.size` | `16sp` / `16px` |
| `--primer-typography-title-large-weight` | `TypographyTokens.titleLarge.weight` | `550` |

***

## See also

> [card] [Styling guide](https://primer.io/docs/checkout/primer-checkout/build-your-ui/styling-customization.md)
>
> How to apply styles to Primer Checkout

> [card] [Web styling variables](https://primer.io/docs/sdk/primer-checkout-web/styling-variables.md)
>
> Complete list of all available Web tokens

> [card] [Android design tokens](https://primer.io/docs/sdk/android-checkout/v3.0.0-beta/api/theming/color-tokens.md)
>
> Complete list of all available Android tokens


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