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

# Styling variables

> Visual reference for all Primer Checkout styling variables

Styling variables (design tokens) are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use tokens instead of hard-coded values to ensure a consistent UI across different platforms.

## Color

### Brand & primary

<div className="tokens-grid">
  | Example                                                                                                            | Description                                                                                             | Token                                 |
  | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | ------------------------------------- |
  | <span className="token-swatch" style={{backgroundColor: "#2f98ff"}} />                                             | **Brand** <br /> Primary brand color. Used for interactive elements, focus states, and primary actions. | `--primer-color-brand`                |
  | <span className="token-swatch" style={{backgroundColor: "#2f98ff"}} />                                             | **Focus** <br /> Focus ring color for interactive elements. Defaults to brand color.                    | `--primer-color-focus`                |
  | <span className="token-swatch" style={{backgroundColor: "#2f98ff"}} />                                             | **Loader** <br /> Loading indicator color.                                                              | `--primer-color-loader`               |
  | <span className="token-swatch" style={{backgroundColor: "#ffffff", border: "1px solid #E0E0E0"}} />                | **Background Primary** <br /> Primary background color for components and surfaces.                     | `--primer-color-background-primary`   |
  | <span className="token-swatch" style={{backgroundColor: "rgba(33, 33, 33, 0.04)", border: "1px solid #E0E0E0"}} /> | **Background Secondary** <br /> Secondary background for subtle differentiation.                        | `--primer-color-background-secondary` |
</div>

### Text colors

<div className="tokens-grid">
  | Example                                                                               | Description                                                          | Token                             |
  | ------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | --------------------------------- |
  | <span className="token-swatch" style={{backgroundColor: "#212121"}} />                | **Text Primary** <br /> Main text color for body content and labels. | `--primer-color-text-primary`     |
  | <span className="token-swatch" style={{backgroundColor: "rgba(33, 33, 33, 0.62)"}} /> | **Text Secondary** <br /> Supporting text, captions, and metadata.   | `--primer-color-text-secondary`   |
  | <span className="token-swatch" style={{backgroundColor: "rgba(33, 33, 33, 0.44)"}} /> | **Text Placeholder** <br /> Placeholder text in input fields.        | `--primer-color-text-placeholder` |
  | <span className="token-swatch" style={{backgroundColor: "rgba(33, 33, 33, 0.3)"}} />  | **Text Disabled** <br /> Disabled text states.                       | `--primer-color-text-disabled`    |
  | <span className="token-swatch" style={{backgroundColor: "#b4324b"}} />                | **Text Negative** <br /> Error messages and validation text.         | `--primer-color-text-negative`    |
  | <span className="token-swatch" style={{backgroundColor: "#2270f4"}} />                | **Text Link** <br /> Hyperlinks and interactive text.                | `--primer-color-text-link`        |
</div>

### Border colors

<div className="tokens-grid">
  | Example                                                                                                            | Description                                                       | Token                                     |
  | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------- | ----------------------------------------- |
  | <span className="token-swatch" style={{backgroundColor: "rgba(33, 33, 33, 0.14)"}} />                              | **Border Default** <br /> Default border for outlined containers. | `--primer-color-border-outlined-default`  |
  | <span className="token-swatch" style={{backgroundColor: "rgba(33, 33, 33, 0.3)"}} />                               | **Border Hover** <br /> Border color on hover state.              | `--primer-color-border-outlined-hover`    |
  | <span className="token-swatch" style={{backgroundColor: "rgba(33, 33, 33, 0.44)"}} />                              | **Border Active** <br /> Border color on active/pressed state.    | `--primer-color-border-outlined-active`   |
  | <span className="token-swatch" style={{backgroundColor: "#2f98ff"}} />                                             | **Border Focus** <br /> Border color when focused.                | `--primer-color-border-outlined-focus`    |
  | <span className="token-swatch" style={{backgroundColor: "#2f98ff"}} />                                             | **Border Selected** <br /> Border color when selected.            | `--primer-color-border-outlined-selected` |
  | <span className="token-swatch" style={{backgroundColor: "#ff7279"}} />                                             | **Border Error** <br /> Border color for error states.            | `--primer-color-border-outlined-error`    |
  | <span className="token-swatch" style={{backgroundColor: "rgba(33, 33, 33, 0.07)", border: "1px solid #E0E0E0"}} /> | **Border Disabled** <br /> Border color when disabled.            | `--primer-color-border-outlined-disabled` |
</div>

### Icon colors

<div className="tokens-grid">
  | Example                                                                              | Description                                              | Token                          |
  | ------------------------------------------------------------------------------------ | -------------------------------------------------------- | ------------------------------ |
  | <span className="token-swatch" style={{backgroundColor: "#212121"}} />               | **Icon Primary** <br /> Default icon color.              | `--primer-color-icon-primary`  |
  | <span className="token-swatch" style={{backgroundColor: "rgba(33, 33, 33, 0.3)"}} /> | **Icon Disabled** <br /> Disabled icon state.            | `--primer-color-icon-disabled` |
  | <span className="token-swatch" style={{backgroundColor: "#ff7279"}} />               | **Icon Negative** <br /> Error and warning icons.        | `--primer-color-icon-negative` |
  | <span className="token-swatch" style={{backgroundColor: "#3eb68f"}} />               | **Icon Positive** <br /> Success and confirmation icons. | `--primer-color-icon-positive` |
</div>

## Border radius

<div className="tokens-grid">
  | Example                                                                 | Description                                                      | Token                    |
  | ----------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------ |
  | <span className="token-radius" style={{borderRadius: "2px"}} /> `2px`   | **X-Small** <br /> Subtle rounding for small elements.           | `--primer-radius-xsmall` |
  | <span className="token-radius" style={{borderRadius: "4px"}} /> `4px`   | **Small** <br /> Default radius for inputs and small components. | `--primer-radius-small`  |
  | <span className="token-radius" style={{borderRadius: "8px"}} /> `8px`   | **Medium** <br /> Buttons and medium-sized components.           | `--primer-radius-medium` |
  | <span className="token-radius" style={{borderRadius: "12px"}} /> `12px` | **Large** <br /> Cards and larger containers.                    | `--primer-radius-large`  |
</div>

## Spacing

<div className="tokens-grid">
  | Example                                                         | Description                                                  | Token                    |
  | --------------------------------------------------------------- | ------------------------------------------------------------ | ------------------------ |
  | <span className="token-space" style={{width: "2px"}} /> `2px`   | **XX-Small** <br /> Minimal spacing for tight layouts.       | `--primer-space-xxsmall` |
  | <span className="token-space" style={{width: "4px"}} /> `4px`   | **X-Small** <br /> Compact spacing between related elements. | `--primer-space-xsmall`  |
  | <span className="token-space" style={{width: "8px"}} /> `8px`   | **Small** <br /> Standard tight spacing.                     | `--primer-space-small`   |
  | <span className="token-space" style={{width: "12px"}} /> `12px` | **Medium** <br /> Default component padding.                 | `--primer-space-medium`  |
  | <span className="token-space" style={{width: "16px"}} /> `16px` | **Large** <br /> Spacing between sections.                   | `--primer-space-large`   |
  | <span className="token-space" style={{width: "20px"}} /> `20px` | **X-Large** <br /> Generous spacing for visual separation.   | `--primer-space-xlarge`  |
</div>

## Size

<div className="tokens-grid">
  | Example                                                                        | Description                                  | Token                    |
  | ------------------------------------------------------------------------------ | -------------------------------------------- | ------------------------ |
  | <span className="token-size" style={{width: "16px", height: "16px"}} /> `16px` | **Small** <br /> Small icons and indicators. | `--primer-size-small`    |
  | <span className="token-size" style={{width: "20px", height: "20px"}} /> `20px` | **Medium** <br /> Default icon size.         | `--primer-size-medium`   |
  | <span className="token-size" style={{width: "24px", height: "24px"}} /> `24px` | **Large** <br /> Prominent icons.            | `--primer-size-large`    |
  | <span className="token-size" style={{width: "32px", height: "32px"}} /> `32px` | **X-Large** <br /> Large icons and avatars.  | `--primer-size-xlarge`   |
  | <span className="token-size" style={{width: "40px", height: "40px"}} /> `40px` | **XX-Large** <br /> Featured icons.          | `--primer-size-xxlarge`  |
  | <span className="token-size" style={{width: "56px", height: "56px"}} /> `56px` | **XXX-Large** <br /> Hero elements.          | `--primer-size-xxxlarge` |
</div>

## Typography

### Font family

<div className="tokens-grid">
  | Example                                                                                                                               | Description                                                                     | Token                       |
  | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------------- |
  | <span style={{fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", fontSize: "16px"}}>Aa Bb Cc 123</span> | **Brand Font** <br /> System font stack for optimal rendering across platforms. | `--primer-typography-brand` |
</div>

### Title X-Large

<div className="tokens-grid">
  | Property       | Value             | Token                                             |
  | -------------- | ----------------- | ------------------------------------------------- |
  | Font Family    | System font stack | `--primer-typography-title-xlarge-font`           |
  | Font Size      | `24px`            | `--primer-typography-title-xlarge-size`           |
  | Font Weight    | `550`             | `--primer-typography-title-xlarge-weight`         |
  | Line Height    | `32px`            | `--primer-typography-title-xlarge-line-height`    |
  | Letter Spacing | `-0.6px`          | `--primer-typography-title-xlarge-letter-spacing` |
</div>

<div className="token-typography-preview" style={{fontSize: "24px", fontWeight: 550, lineHeight: "32px", letterSpacing: "-0.6px"}}>
  The quick brown fox jumps over the lazy dog
</div>

### Title Large

<div className="tokens-grid">
  | Property       | Value             | Token                                            |
  | -------------- | ----------------- | ------------------------------------------------ |
  | Font Family    | System font stack | `--primer-typography-title-large-font`           |
  | Font Size      | `16px`            | `--primer-typography-title-large-size`           |
  | Font Weight    | `550`             | `--primer-typography-title-large-weight`         |
  | Line Height    | `20px`            | `--primer-typography-title-large-line-height`    |
  | Letter Spacing | `-0.2px`          | `--primer-typography-title-large-letter-spacing` |
</div>

<div className="token-typography-preview" style={{fontSize: "16px", fontWeight: 550, lineHeight: "20px", letterSpacing: "-0.2px"}}>
  The quick brown fox jumps over the lazy dog
</div>

### Body Large

<div className="tokens-grid">
  | Property       | Value             | Token                                           |
  | -------------- | ----------------- | ----------------------------------------------- |
  | Font Family    | System font stack | `--primer-typography-body-large-font`           |
  | Font Size      | `16px`            | `--primer-typography-body-large-size`           |
  | Font Weight    | `400`             | `--primer-typography-body-large-weight`         |
  | Line Height    | `20px`            | `--primer-typography-body-large-line-height`    |
  | Letter Spacing | `-0.2px`          | `--primer-typography-body-large-letter-spacing` |
</div>

<div className="token-typography-preview" style={{fontSize: "16px", fontWeight: 400, lineHeight: "20px", letterSpacing: "-0.2px"}}>
  The quick brown fox jumps over the lazy dog
</div>

### Body Medium

<div className="tokens-grid">
  | Property       | Value             | Token                                            |
  | -------------- | ----------------- | ------------------------------------------------ |
  | Font Family    | System font stack | `--primer-typography-body-medium-font`           |
  | Font Size      | `14px`            | `--primer-typography-body-medium-size`           |
  | Font Weight    | `400`             | `--primer-typography-body-medium-weight`         |
  | Line Height    | `20px`            | `--primer-typography-body-medium-line-height`    |
  | Letter Spacing | `0px`             | `--primer-typography-body-medium-letter-spacing` |
</div>

<div className="token-typography-preview" style={{fontSize: "14px", fontWeight: 400, lineHeight: "20px", letterSpacing: "0px"}}>
  The quick brown fox jumps over the lazy dog
</div>

### Body Small

<div className="tokens-grid">
  | Property       | Value             | Token                                           |
  | -------------- | ----------------- | ----------------------------------------------- |
  | Font Family    | System font stack | `--primer-typography-body-small-font`           |
  | Font Size      | `12px`            | `--primer-typography-body-small-size`           |
  | Font Weight    | `400`             | `--primer-typography-body-small-weight`         |
  | Line Height    | `16px`            | `--primer-typography-body-small-line-height`    |
  | Letter Spacing | `0px`             | `--primer-typography-body-small-letter-spacing` |
</div>

<div className="token-typography-preview" style={{fontSize: "12px", fontWeight: 400, lineHeight: "16px", letterSpacing: "0px"}}>
  The quick brown fox jumps over the lazy dog
</div>

## Border width

<div className="tokens-grid">
  | Example                                                             | Description                                          | Token                     |
  | ------------------------------------------------------------------- | ---------------------------------------------------- | ------------------------- |
  | <span className="token-width" style={{borderWidth: "1px"}} /> `1px` | **Default** <br /> Standard border width for inputs. | `--primer-width-default`  |
  | <span className="token-width" style={{borderWidth: "2px"}} /> `2px` | **Focus** <br /> Emphasized border for focus states. | `--primer-width-focus`    |
  | <span className="token-width" style={{borderWidth: "2px"}} /> `2px` | **Selected** <br /> Border width when selected.      | `--primer-width-selected` |
  | <span className="token-width" style={{borderWidth: "2px"}} /> `2px` | **Error** <br /> Border width for error states.      | `--primer-width-error`    |
</div>

## Animation

<div className="tokens-grid">
  | Property | Value                           | Token                         |
  | -------- | ------------------------------- | ----------------------------- |
  | Duration | `200ms`                         | `--primer-animation-duration` |
  | Easing   | `cubic-bezier(0.44, 0, 0.4, 1)` | `--primer-animation-easing`   |
</div>

<div className="token-animation-preview">
  <div className="animation-demo" />

  <span>Hover to see animation</span>
</div>

***

## Input styling tokens

The hosted input components (`primer-input-card-number`, `primer-input-card-expiry`, `primer-input-cvv`, `primer-input-cardholder-name`) share a common set of CSS variables for consistent styling. These properties are applied via the `primer-input-wrapper` component which provides the visual structure.

### Input structure

All input components use these tokens for their visual appearance:

| Category   | Properties                                       | Description                         |
| ---------- | ------------------------------------------------ | ----------------------------------- |
| Typography | `--primer-typography-body-large-*`               | Input text (16px, weight 400)       |
| Label      | `--primer-typography-body-small-*`               | Label text (12px, weight 400)       |
| Spacing    | `--primer-space-xsmall`, `--primer-space-medium` | Internal padding and gaps           |
| Border     | `--primer-radius-small`                          | Border radius (4px)                 |
| Colors     | See state-specific colors below                  | Background, border, and text colors |

### Input state colors

Inputs respond to user interaction with different visual states:

| State       | Border                                    | Background                                    | Text                              |
| ----------- | ----------------------------------------- | --------------------------------------------- | --------------------------------- |
| Default     | `--primer-color-border-outlined-default`  | `--primer-color-background-outlined-default`  | `--primer-color-text-primary`     |
| Hover       | `--primer-color-border-outlined-hover`    | `--primer-color-background-outlined-hover`    | -                                 |
| Focus       | `--primer-color-border-outlined-focus`    | -                                             | -                                 |
| Error       | `--primer-color-border-outlined-error`    | `--primer-color-background-outlined-error`    | `--primer-color-text-negative`    |
| Disabled    | `--primer-color-border-outlined-disabled` | `--primer-color-background-outlined-disabled` | `--primer-color-text-disabled`    |
| Placeholder | -                                         | -                                             | `--primer-color-text-placeholder` |

### Border width by State

Border widths change based on interaction state to provide visual feedback:

| State    | Token                     | Value |
| -------- | ------------------------- | ----- |
| Default  | `--primer-width-default`  | `1px` |
| Hover    | `--primer-width-hover`    | `1px` |
| Active   | `--primer-width-active`   | `1px` |
| Focus    | `--primer-width-focus`    | `2px` |
| Error    | `--primer-width-error`    | `2px` |
| Disabled | `--primer-width-disabled` | `1px` |

### Animation

All state transitions use consistent animation:

| Property | Token                         | Value                           |
| -------- | ----------------------------- | ------------------------------- |
| Duration | `--primer-animation-duration` | `200ms`                         |
| Easing   | `--primer-animation-easing`   | `cubic-bezier(0.44, 0, 0.4, 1)` |

### Example: customizing input appearance

```css theme={"dark"}
primer-checkout {
  /* Change input border radius */
  --primer-radius-small: 8px;

  /* Custom focus color */
  --primer-color-border-outlined-focus: #6366f1;

  /* Larger input text */
  --primer-typography-body-large-size: 18px;

  /* Custom error styling */
  --primer-color-border-outlined-error: #dc2626;
  --primer-color-text-negative: #dc2626;
}
```

***

## Primitive color tokens

These are the base color values that semantic tokens reference. You typically won't customize these directly — instead, customize the semantic tokens above which use these as their default values.

### Gray scale

<div className="tokens-grid">
  | Example                                                                                                            | Description                                               | Token                     |
  | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ------------------------- |
  | <span className="token-swatch" style={{backgroundColor: "#ffffff", border: "1px solid #E0E0E0"}} />                | **Gray 000** <br /> Pure white. Base background color.    | `--primer-color-gray-000` |
  | <span className="token-swatch" style={{backgroundColor: "rgba(33, 33, 33, 0.04)", border: "1px solid #E0E0E0"}} /> | **Gray 100** <br /> Subtle backgrounds, disabled states.  | `--primer-color-gray-100` |
  | <span className="token-swatch" style={{backgroundColor: "rgba(33, 33, 33, 0.07)", border: "1px solid #E0E0E0"}} /> | **Gray 200** <br /> Light borders, dividers.              | `--primer-color-gray-200` |
  | <span className="token-swatch" style={{backgroundColor: "rgba(33, 33, 33, 0.14)"}} />                              | **Gray 300** <br /> Default border color.                 | `--primer-color-gray-300` |
  | <span className="token-swatch" style={{backgroundColor: "rgba(33, 33, 33, 0.3)"}} />                               | **Gray 400** <br /> Disabled text, hover borders.         | `--primer-color-gray-400` |
  | <span className="token-swatch" style={{backgroundColor: "rgba(33, 33, 33, 0.44)"}} />                              | **Gray 500** <br /> Placeholder text, active borders.     | `--primer-color-gray-500` |
  | <span className="token-swatch" style={{backgroundColor: "rgba(33, 33, 33, 0.62)"}} />                              | **Gray 600** <br /> Secondary text color.                 | `--primer-color-gray-600` |
  | <span className="token-swatch" style={{backgroundColor: "#212121"}} />                                             | **Gray 900** <br /> Primary text color. Highest contrast. | `--primer-color-gray-900` |
</div>

### Red

<div className="tokens-grid">
  | Example                                                                | Description                                         | Token                    |
  | ---------------------------------------------------------------------- | --------------------------------------------------- | ------------------------ |
  | <span className="token-swatch" style={{backgroundColor: "#ffecec"}} /> | **Red 100** <br /> Light red for error backgrounds. | `--primer-color-red-100` |
  | <span className="token-swatch" style={{backgroundColor: "#ff7279"}} /> | **Red 500** <br /> Error borders and icons.         | `--primer-color-red-500` |
  | <span className="token-swatch" style={{backgroundColor: "#b4324b"}} /> | **Red 900** <br /> Error text color.                | `--primer-color-red-900` |
</div>

### Green

<div className="tokens-grid">
  | Example                                                                | Description                                       | Token                      |
  | ---------------------------------------------------------------------- | ------------------------------------------------- | -------------------------- |
  | <span className="token-swatch" style={{backgroundColor: "#3eb68f"}} /> | **Green 500** <br /> Success and positive states. | `--primer-color-green-500` |
</div>

### Blue

<div className="tokens-grid">
  | Example                                                                | Description                                 | Token                     |
  | ---------------------------------------------------------------------- | ------------------------------------------- | ------------------------- |
  | <span className="token-swatch" style={{backgroundColor: "#399dff"}} /> | **Blue 500** <br /> Informational elements. | `--primer-color-blue-500` |
  | <span className="token-swatch" style={{backgroundColor: "#2270f4"}} /> | **Blue 900** <br /> Link text color.        | `--primer-color-blue-900` |
</div>