> For the complete documentation index, see [llms.txt](https://developer.usemultiplier.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.usemultiplier.com/multiplier-embed-sdks/css-and-customization.md).

# CSS & Customization

The Partner SDK is designed to be visually flexible, allowing it to blend seamlessly into your application's design system. You can customize the look and feel using two methods: the **JavaScript Config object** (recommended for global themes) or **CSS Overrides** (for granular control).

### 1. Theming via Config (Recommended)

The easiest way to style the SDK is by passing a `theme` object to the `createGlobalConfig()` builder. This allows you to set high-level design tokens like brand colors, spacing, and border radius.

#### Example Configuration

```tsx
const config = createGlobalConfig()
  .setAccessToken(accessToken)
  .setTheme({
    colors: {
      // Brand colors
      'background-brand': '#2B7FFF',
      'background-brand---hover': '#1E5FCC',
      'background-brand---faded': '#E8F2FF',
      'text-brand-link': '#2B7FFF',
      'text-brand-primary': '#1E5FCC',
      'border-brand': '#2B7FFF',
      'icon-brand': '#2B7FFF',

      // Action colors
      'background-action': '#1E5FCC',
      'text-action': '#FFFFFF',

      // Semantic colors
      'background-positive': '#10B981',
      'text-positive': '#047857',
      'background-negative': '#EF4444',
      'text-negative': '#B91C1C',
      'background-warning': '#F59E0B',
      'text-warning': '#92400E',
    },
    spacing: {
      'spacing---tiny': '6px',
      'spacing---base': '20px',
      'spacing---large': '32px',
    },
    borderRadius: {
      'border-radius---base': '12px',
      'border-radius---large': '16px',
    },
    fontFamily: {
      'sans-font-family': 'Inter, system-ui, sans-serif',
    },
    fontSize: {
      'font-size-h1': '3.5rem',
      'font-size-p': '1.125rem',
    },
    boxShadow: {
      'shadow--small': '0 2px 8px rgba(0, 0, 0, 0.1)',
      'shadow--large': '0 8px 32px rgba(0, 0, 0, 0.15)',
    },
  })
  .build();
```

#### Available Color Variables

**Background Colors**

| Variable                       | Default     |
| ------------------------------ | ----------- |
| `background-action`            | `#0e0500`   |
| `background-action---hover`    | `#0e0500cc` |
| `background-brand`             | `#f76918`   |
| `background-brand---hover`     | `#ff8a55`   |
| `background-brand---faded`     | `#fbf6ee`   |
| `background-brand---subtle`    | `#f6efe1`   |
| `background-inverted`          | `#3d1806`   |
| `background-negative`          | `#fa4d4e`   |
| `background-negative---faded`  | `#fff4f3`   |
| `background-negative---subtle` | `#ffe8e6`   |
| `background-negative---hover`  | `#fa4d4ecc` |
| `background-overlay`           | `#000000bf` |
| `background-positive`          | `#00ab62`   |
| `background-positive---faded`  | `#e1fae8`   |
| `background-positive---subtle` | `#c3fad5`   |
| `background-positive---hover`  | `#00ab62cc` |
| `background-primary`           | `#fafafa`   |
| `background-secondary`         | `#f2efed`   |
| `background-tertiary`          | `#d7d6d5`   |
| `background-warning`           | `#ba8e17`   |
| `background-warning---faded`   | `#fff3da`   |
| `background-warning---subtle`  | `#ffebc1`   |
| `background-white`             | `#ffffff`   |
| `background-white---hover`     | `#ffffff33` |
| `background-blocked`           | `#d7d6d5`   |
| `background-surface`           | `#fafafa`   |

**Text Colors**

| Variable                  | Default     |
| ------------------------- | ----------- |
| `text-action`             | `#221811`   |
| `text-brand-link`         | `#f76918`   |
| `text-brand-primary`      | `#9e4619`   |
| `text-inverted-primary`   | `#ffffff`   |
| `text-inverted-secondary` | `#ffffffcc` |
| `text-inverted-tertiary`  | `#ffffff80` |
| `text-negative`           | `#ba242b`   |
| `text-positive`           | `#016f3e`   |
| `text-primary`            | `#332e2b`   |
| `text-secondary`          | `#635f5e`   |
| `text-tertiary`           | `#979493`   |
| `text-warning`            | `#785c18`   |

**Border Colors**

| Variable                          | Default   |
| --------------------------------- | --------- |
| `border-action`                   | `#221811` |
| `border-brand`                    | `#ffac89` |
| `border-brand---high-contrast`    | `#cf5200` |
| `border-brand---subtle`           | `#ffcab4` |
| `border-high-contrast`            | `#7d7978` |
| `border-inverted`                 | `#ffffff` |
| `border-negative`                 | `#ffaaa3` |
| `border-negative---high-contrast` | `#e82d37` |
| `border-negative---subtle`        | `#ffc9c4` |
| `border-positive`                 | `#20dc82` |
| `border-positive---high-contrast` | `#038c50` |
| `border-positive---subtle`        | `#8ceaae` |
| `border-primary`                  | `#d7d6d5` |
| `border-secondary`                | `#acaaa9` |
| `border-warning`                  | `#ebb93f` |
| `border-warning---high-contrast`  | `#997518` |
| `border-warning---subtle`         | `#fbd175` |

**Icon Colors**

| Variable                  | Default     |
| ------------------------- | ----------- |
| `icon-action`             | `#2240cd`   |
| `icon-brand`              | `#f76918`   |
| `icon-inverted-primary`   | `#ffffffcc` |
| `icon-inverted-secondary` | `#ffffff80` |
| `icon-inverted-tertiary`  | `#ffffff54` |
| `icon-negative`           | `#e82d37`   |
| `icon-positive`           | `#038c50`   |
| `icon-primary`            | `#524d4a`   |
| `icon-secondary`          | `#7d7978`   |
| `icon-tertiary`           | `#acaaa9`   |
| `icon-warning`            | `#997518`   |

#### Available Spacing Variables

| Variable                | Default   |
| ----------------------- | --------- |
| `spacing---none`        | `0`       |
| `spacing---tiny`        | `0.25rem` |
| `spacing---extra-small` | `0.5rem`  |
| `spacing---small`       | `0.75rem` |
| `spacing---base`        | `1rem`    |
| `spacing---large`       | `1.5rem`  |
| `spacing---extra-large` | `2rem`    |

#### Available Border Radius Variables

| Variable                | Default |
| ----------------------- | ------- |
| `border-radius---none`  | `0`     |
| `border-radius---tiny`  | `4px`   |
| `border-radius---base`  | `8px`   |
| `border-radius---large` | `12px`  |
| `border-radius---full`  | `100px` |

#### Available Font Size Variables

| Variable        | Default    |
| --------------- | ---------- |
| `font-size-h1`  | `4rem`     |
| `font-size-h2`  | `3.125rem` |
| `font-size-h3`  | `2.375rem` |
| `font-size-h4`  | `2rem`     |
| `font-size-h5`  | `1.625rem` |
| `font-size-h6`  | `1.25rem`  |
| `font-size-pl`  | `1.25rem`  |
| `font-size-p`   | `1rem`     |
| `font-size-ps`  | `0.875rem` |
| `font-size-pxs` | `0.75rem`  |
| `font-size-18`  | `1.125rem` |

#### Available Shadow Variables

| Variable              | Default                                                     |
| --------------------- | ----------------------------------------------------------- |
| `shadow--flat`        | `0px 1px 2px 0px #0000000d`                                 |
| `shadow--tiny`        | `0px 1px 3px 0px #0000001a, 0px 1px 2px -1px #0000001a`     |
| `shadow--small`       | `0px 0px 4px -2px #0000001a, 0px 1px 6px 0px #0000001a`     |
| `shadow--large`       | `0px 10px 15px -3px #0000001a, 0px 4px 6px -4px #0000001a`  |
| `shadow--extra-large` | `0px 25px 25px -5px #0000001a, 0px 8px 10px -6px #0000001a` |

#### Available Font Weight Variables

| Variable                 | Default |
| ------------------------ | ------- |
| `font-weight-thin`       | `100`   |
| `font-weight-extralight` | `200`   |
| `font-weight-light`      | `300`   |
| `font-weight-normal`     | `400`   |
| `font-weight-medium`     | `500`   |
| `font-weight-semibold`   | `600`   |
| `font-weight-bold`       | `700`   |
| `font-weight-extrabold`  | `800`   |
| `font-weight-black`      | `900`   |

***

### 2. CSS Class Overrides

For specific components or deeper customization that the theme object doesn't cover, the SDK exposes stable CSS class names. You can target these classes in your application's stylesheet. You can find the list of CSS class names in the CSS Customization of each component

> Note: We recommend using `!important` or high-specificity selectors to ensure your styles override the SDK's default compiled CSS.

#### Example Override

```css
/* styles.css */

/* Make the offboarding cards have a deep shadow */
.multiplier-offboarding__card {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e5e7eb !important;
}

/* Change the submit button style */
.multiplier-offboarding__action-submit button {
  background-color: black !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
}
```

***

### 3. Responsive Behavior

All SDK components are built to be responsive.

* Mobile: Components stack vertically and use full width.
* Desktop: Components utilize grid layouts and standard modals.

If you are embedding a component into a restricted width area (like a sidebar), ensure the container has a minimum width of `320px` to prevent layout breakage. SDK components fill their parent container (`width: 100%`). **You control the size by wrapping in a sized container.**

**Examples**

```tsx
// Full-width (fills parent)
<EmployeeOffboarding.Container contractId="..." />

// Fixed width (like a dialog)
<div style={{ maxWidth: '742px', margin: '0 auto' }}>
  <EmployeeOffboarding.Container contractId="..." />
</div>

// Custom width
<div style={{ maxWidth: '900px', margin: '0 auto' }}>
  <EmployeeOffboarding.Container contractId="..." />
</div>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://developer.usemultiplier.com/multiplier-embed-sdks/css-and-customization.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.