# Reference (/platforms/embedded-integration/reference)



## Soft descriptors [#soft-descriptors]

A descriptor is the identifying information your customers will see on their statement when they purchase through your mobile app or website.

PayPal uses specific logic to determine the soft descriptor on consumer statements and transaction history on issuer statements and customer portals.

Soft descriptors are limited to 22 characters. PayPal will trim merchant names as necessary to fit this limit.

PayPal determines the soft descriptor using the following logic:

* **Orders API descriptor**: When you include the soft descriptor in your Create Order API request, PayPal automatically prepends any required prefix to the descriptor.
* **Partner Delegated Merchant Account descriptor**: If you don't include the soft descriptor in your Create Order API request, PayPal uses the soft descriptor assigned to the Partner Delegated Merchant Account during account creation.
* **PayPal internal logic**: If you don't include a soft descriptor in your Create Order API request and the Partner Delegated Merchant Account merchant account does not have an assigned soft descriptor, PayPal applies its own internal logic to specify the soft descriptor.

### PayPal wallet soft descriptors [#paypal-wallet-soft-descriptors]

For PayPal wallet transactions, set the `SOFT_DESCRIPTOR` either in your Orders API request or on the merchant's Partner Delegated Merchant Account.

| Soft descriptor          | Example              |
| ------------------------ | -------------------- |
| `PAYPAL*SOFT_DESCRIPTOR` | `PAYPAL*PARTNERNAME` |

### Unbranded soft descriptors [#unbranded-soft-descriptors]

For unbranded transactions, set the `SOFT_DESCRIPTOR` either in your Orders API request or on the merchant's Partner Delegated Merchant Account.

| Card type                  | Soft descriptor      | Example       |
| -------------------------- | -------------------- | ------------- |
| Visa, Mastercard, Discover | `SOFT_DESCRIPTOR`    | `PARTNERNAME` |
| American Express           | `PP*SOFT_DESCRIPTOR` | `PP*PARTNER`  |

## Customize SDK styles [#customize-sdk-styles]

Customize the appearance of the Partner SDK using PayPal's design system tokens for spacing, color, size, and motion values. To override specific styles, provide your custom styles in the PayPal theme token format. PayPal applies your tokens to override its default theme using vanilla-extract.

### Sample code to override theme styles [#sample-code-to-override-theme-styles]

The following sample code shows how to override theme elements during SDK initialization:

```html lineNumbers
style: {
                    color: {
                        background: {
                            highContrast: '#48484a', // font color
                        },
                        primary: {
                            main: '#1b75bc', //header & button
                            mainHover: '#1871b6',
                            mainActive: '#204d74', // button color after you click
                        },
                    },
                }
```

### Default PayPal theme [#default-paypal-theme]

The following code shows the default PayPal theme structure with available design tokens:

```
const PAYPAL_THEME = {
  size: {
    icon: {
      xs: '1.125rem',
      sm: '1.5rem',
      md: '2rem',
      lg: '3rem',
      xl: '4rem',
    },
    circle: {
      xs: '1.5rem',
      sm: '2rem',
      md: '3rem',
      lg: '4rem',
      xl: '6rem',
    },
    tapTarget: {
      sm: '2.75rem',
      default: '3rem',
      lg: '4rem',
      tiny: '2rem',
      xs: '2.5rem',
    },
    pointerWidth: {
      sm: '0.75rem',
      lg: '1rem',
    },
    indicator: {
      xs: '0.1875rem',
      sm: '0.25rem',
      md: '0.375rem',
      lg: '0.5rem',
    },
    field: {
      sm: '3rem',
      lg: '4rem',
    },
    media: {
      xs: '22rem',
      sm: '36rem',
      md: '47rem',
      lg: '64rem',
      xl: '72rem',
      xxl: '90rem',
    },
    pictogram: {
      sm: '6rem',
      md: '8.5rem',
      lg: '10rem',
    },
  },
  space: {
    0: '0rem',
    25: '0.125rem',
    50: '0.25rem',
    75: '0.375rem',
    100: '0.5rem',
    150: '0.75rem',
    200: '1rem',
    250: '1.25rem',
    300: '1.5rem',
    350: '1.75rem',
    400: '2rem',
    450: '2.25rem',
    500: '2.5rem',
    600: '3rem',
    700: '3.5rem',
    800: '4rem',
    900: '4.5rem',
    1000: '5rem',
    1100: '5.5rem',
    1200: '6rem',
    tiny: '0.125rem',
    xs: '0.25rem',
    sm: '0.5rem',
    md: '0.75rem',
    lg: '1rem',
    xl: '1.5rem',
    jumbo: '2rem',
  },
  elevation: {
    blurCurve: '1',
    blurSlope: '-1',
    blurBase: '0.625rem',
    opacity: '0.15',
    brightenFactor: '0.02',
    verticalOffsetRatio: '1',
    horizontalOffsetRatio: '0',
    level1: {
      yoffset: '0.0625rem',
      opacity: '0.08',
      blur: '0.75rem',
    },
    level2: {
      yoffset: '0.125rem',
      opacity: '0.1',
      blur: '0.875rem',
    },
    level3: {
      yoffset: '0.125rem',
      opacity: '0.1',
      blur: '1.125rem',
    },
  },
  motion: {
    timing: {
      x1: '0',
      y1: '0.9',
      x2: '0.3',
      y2: '1',
    },
    duration: {
      hover: '0.10s',
      action: '0.20s',
      arrive: '0.50s',
      depart: '0.30s',
      repeat: '1.30s',
      linger: '5.00s',
      enter: {
        small: '0.20s',
        medium: '0.30s',
        large: '0.50s',
      },
      exit: {
        small: '0.10s',
        medium: '0.20s',
        large: '0.20s',
      },
      move: {
        small: '0.20s',
        medium: '0.50s',
        large: '0.80s',
      },
      loop: {
        backForth: '0.50s',
        standard: '1.30s',
      },
      pause: {
        read: '5.00s',
        reveal: '4.00s',
      },
    },
    easing: {
      enter: {
        small: '0,0,0,1',
        medium: '0.05,0.7,0.1,1',
        large: '0.05,0.7,0.1,1',
      },
      exit: {
        small: '0.3,0,1,1',
        medium: '0.3,0,0.8,0.15',
        large: '0.3,0,0.8,0.15',
      },
      move: {
        small: '0.2,0,0,1',
        medium: '0.2,0,0,1',
        large: '0.2,0,0,1',
      },
      loop: {
        backForth: '0.2,0,0,1',
        standard: '0,0,1,1',
      },
    },
  },
  border: {
    thickness: {
      normal: '0.0625rem',
      emphasis: '0.125rem',
      focus: '0.1875rem',
      focusOutline: '0.375rem',
    },
    radius: {
      tiny: '0.125rem',
      xs: '0.25rem',
      sm: '0.375rem',
      md: '0.5rem',
      lg: '0.75rem',
      xl: '1rem',
      jumbo: '2rem',
      interactive: '50%',
    },
  },
  typography: {
    displayStrong: {
      family: 'PayPalPro-Black',
      size: '4rem',
      sizeInPx: '64px',
      weight: '400',
      lineHeight: '4.375rem',
      lineHeightInPx: '70px',
      letterSpacing: '-0.04em',
      maxScaleFactor: '1.25',
    },
    displayMedium: {
      family: 'PayPalPro-Black',
      size: '4rem',
      sizeInPx: '64px',
      weight: '400',
      lineHeight: '4.375rem',
      lineHeightInPx: '70px',
      letterSpacing: '-0.04em',
      maxScaleFactor: '1.25',
    },
    display: {
      family: 'PayPalPro-Black',
      size: '4rem',
      sizeInPx: '64px',
      weight: '400',
      lineHeight: '4.375rem',
      lineHeightInPx: '70px',
      letterSpacing: '-0.04em',
      maxScaleFactor: '1.25',
    },
    displaySmStrong: {
      family: 'PayPalPro-Black',
      size: '2.5rem',
      sizeInPx: '40px',
      weight: '400',
      lineHeight: '2.75rem',
      lineHeightInPx: '44px',
      letterSpacing: '-0.04em',
      maxScaleFactor: '1.25',
    },
    displaySmMedium: {
      family: 'PayPalPro-Black',
      size: '2.5rem',
      sizeInPx: '40px',
      weight: '400',
      lineHeight: '2.75rem',
      lineHeightInPx: '44px',
      letterSpacing: '-0.04em',
      maxScaleFactor: '1.25',
    },
    displaySm: {
      family: 'PayPalPro-Black',
      size: '2.5rem',
      sizeInPx: '40px',
      weight: '400',
      lineHeight: '2.75rem',
      lineHeightInPx: '44px',
      letterSpacing: '-0.04em',
      maxScaleFactor: '1.25',
    },
    headingLgStrong: {
      family: 'PayPalPro-Black',
      size: '2rem',
      sizeInPx: '32px',
      weight: '400',
      lineHeight: '2.25rem',
      lineHeightInPx: '36px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '1.5',
    },
    headingLgMedium: {
      family: 'PayPalPro-Black',
      size: '2rem',
      sizeInPx: '32px',
      weight: '400',
      lineHeight: '2.25rem',
      lineHeightInPx: '36px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '1.5',
    },
    headingLg: {
      family: 'PayPalPro-Black',
      size: '2rem',
      sizeInPx: '32px',
      weight: '400',
      lineHeight: '2.25rem',
      lineHeightInPx: '36px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '1.5',
    },
    headingSmStrong: {
      family: 'PayPalPro-Black',
      size: '1.5rem',
      sizeInPx: '24px',
      weight: '400',
      lineHeight: '2rem',
      lineHeightInPx: '32px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '1.5',
    },
    headingSmMedium: {
      family: 'PayPalPro-Black',
      size: '1.5rem',
      sizeInPx: '24px',
      weight: '400',
      lineHeight: '2rem',
      lineHeightInPx: '32px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '1.5',
    },
    headingSm: {
      family: 'PayPalPro-Black',
      size: '1.5rem',
      sizeInPx: '24px',
      weight: '400',
      lineHeight: '2rem',
      lineHeightInPx: '32px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '1.5',
    },
    titleStrong: {
      family: 'PayPalPlain-Bold',
      size: '1rem',
      sizeInPx: '16px',
      weight: '400',
      lineHeight: '1.25rem',
      lineHeightInPx: '20px',
      letterSpacing: '-0.01em',
      maxScaleFactor: '2',
    },
    titleMedium: {
      family: 'PayPalPlain-Medium',
      size: '1rem',
      sizeInPx: '16px',
      weight: '400',
      lineHeight: '1.25rem',
      lineHeightInPx: '20px',
      letterSpacing: '-0.01em',
      maxScaleFactor: '2',
    },
    title: {
      family: 'PayPalPlain-Regular',
      size: '1rem',
      sizeInPx: '16px',
      weight: '400',
      lineHeight: '1.25rem',
      lineHeightInPx: '20px',
      letterSpacing: '-0.01em',
      maxScaleFactor: '2',
    },
    bodyStrong: {
      family: 'PayPalPlain-Bold',
      size: '0.875rem',
      sizeInPx: '14px',
      weight: '400',
      lineHeight: '1.125rem',
      lineHeightInPx: '18px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '2',
    },
    bodyMedium: {
      family: 'PayPalPlain-Medium',
      size: '0.875rem',
      sizeInPx: '14px',
      weight: '400',
      lineHeight: '1.125rem',
      lineHeightInPx: '18px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '2',
    },
    body: {
      family: 'PayPalPlain-Regular',
      size: '0.875rem',
      sizeInPx: '14px',
      weight: '400',
      lineHeight: '1.125rem',
      lineHeightInPx: '18px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '2',
    },
    captionStrong: {
      family: 'PayPalPlain-Bold',
      size: '0.75rem',
      sizeInPx: '12px',
      weight: '400',
      lineHeight: '1rem',
      lineHeightInPx: '16px',
      letterSpacing: '-0.01em',
      maxScaleFactor: '2',
    },
    captionMedium: {
      family: 'PayPalPlain-Medium',
      size: '0.75rem',
      sizeInPx: '12px',
      weight: '400',
      lineHeight: '1rem',
      lineHeightInPx: '16px',
      letterSpacing: '-0.01em',
      maxScaleFactor: '2',
    },
    caption: {
      family: 'PayPalPlain-Regular',
      size: '0.75rem',
      sizeInPx: '12px',
      weight: '400',
      lineHeight: '1rem',
      lineHeightInPx: '16px',
      letterSpacing: '-0.01em',
      maxScaleFactor: '2',
    },
    linkLg: {
      family: 'PayPalPlain-Medium',
      size: '0.875rem',
      sizeInPx: '14px',
      weight: '400',
      lineHeight: '1.125rem',
      lineHeightInPx: '18px',
      letterSpacing: '-0.02em',
      underline: 'true',
      maxScaleFactor: '2',
    },
    linkSm: {
      family: 'PayPalPlain-Medium',
      size: '0.75rem',
      sizeInPx: '12px',
      weight: '400',
      lineHeight: '1rem',
      lineHeightInPx: '16px',
      letterSpacing: '-0.01em',
      underline: 'true',
      maxScaleFactor: '2',
    },
    tagStrong: {
      family: 'PayPalPlain-Bold',
      size: '0.625rem',
      sizeInPx: '10px',
      weight: '400',
      lineHeight: '1rem',
      lineHeightInPx: '16px',
      letterSpacing: '-0.01em',
      maxScaleFactor: '2',
    },
    tagMedium: {
      family: 'PayPalPlain-Medium',
      size: '0.625rem',
      sizeInPx: '10px',
      weight: '400',
      lineHeight: '1rem',
      lineHeightInPx: '16px',
      letterSpacing: '-0.01em',
      maxScaleFactor: '2',
    },
    tag: {
      family: 'PayPalPlain-Regular',
      size: '0.625rem',
      sizeInPx: '10px',
      weight: '400',
      lineHeight: '1rem',
      lineHeightInPx: '16px',
      letterSpacing: '-0.01em',
      maxScaleFactor: '2',
    },
    dataVizStrong: {
      family: 'PayPalPlain-Bold',
      size: '0.625rem',
      sizeInPx: '10px',
      weight: '400',
      lineHeight: '0.75rem',
      lineHeightInPx: '12px',
      letterSpacing: '-0.01em',
      maxScaleFactor: '2',
    },
    dataVizMedium: {
      family: 'PayPalPlain-Medium',
      size: '0.625rem',
      sizeInPx: '10px',
      weight: '400',
      lineHeight: '0.75rem',
      lineHeightInPx: '12px',
      letterSpacing: '-0.01em',
      maxScaleFactor: '2',
    },
    dataViz: {
      family: 'PayPalPlain-Regular',
      size: '0.625rem',
      sizeInPx: '10px',
      weight: '400',
      lineHeight: '0.75rem',
      lineHeightInPx: '12px',
      letterSpacing: '-0.01em',
      maxScaleFactor: '2',
    },
    buttonXl: {
      family: 'PayPalPro-Black',
      size: '1.5rem',
      sizeInPx: '24px',
      weight: '400',
      lineHeight: '2rem',
      lineHeightInPx: '32px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '1.5',
    },
    buttonLg: {
      family: 'PayPalPro-Black',
      size: '0.875rem',
      sizeInPx: '14px',
      weight: '400',
      lineHeight: '1.125rem',
      lineHeightInPx: '18px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '2',
    },
    buttonSm: {
      family: 'PayPalPro-Black',
      size: '0.75rem',
      sizeInPx: '12px',
      weight: '400',
      lineHeight: '1rem',
      lineHeightInPx: '16px',
      letterSpacing: '-0.01em',
      maxScaleFactor: '2',
    },
    fieldLabelLg: {
      family: 'PayPalPlain-Regular',
      size: '0.875rem',
      sizeInPx: '14px',
      weight: '400',
      lineHeight: '1.5rem',
      lineHeightInPx: '24px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '2',
    },
    fieldLabelSm: {
      family: 'PayPalPlain-Regular',
      size: '0.75rem',
      sizeInPx: '12px',
      weight: '400',
      lineHeight: '1.25rem',
      lineHeightInPx: '20px',
      letterSpacing: '-0.01em',
      maxScaleFactor: '2',
    },
    fieldPrefixCurrency2Xl: {
      family: 'PayPalPro-Black',
      size: '3rem',
      sizeInPx: '48px',
      weight: '400',
      lineHeight: '6.3125rem',
      lineHeightInPx: '101px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '2',
    },
    fieldPrefixCurrencyXl: {
      family: 'PayPalPro-Black',
      size: '1.5rem',
      sizeInPx: '24px',
      weight: '400',
      lineHeight: '3.625rem',
      lineHeightInPx: '58px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '2',
    },
    fieldPrefixCurrencyLg: {
      family: 'PayPalPro-Black',
      size: '1.125rem',
      sizeInPx: '18px',
      weight: '400',
      lineHeight: '2.25rem',
      lineHeightInPx: '36px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '2',
    },
    fieldPrefixCurrencyMd: {
      family: 'PayPalPro-Black',
      size: '1rem',
      sizeInPx: '16px',
      weight: '400',
      lineHeight: '1.75rem',
      lineHeightInPx: '28px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '2',
    },
    fieldPrefixCurrencySm: {
      family: 'PayPalPro-Black',
      size: '0.75rem',
      sizeInPx: '12px',
      weight: '400',
      lineHeight: '1.5rem',
      lineHeightInPx: '24px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '2',
    },
    fieldValueCurrency2Xl: {
      family: 'PayPalPro-Black',
      size: '7.5rem',
      sizeInPx: '120px',
      weight: '400',
      lineHeight: '9rem',
      lineHeightInPx: '144px',
      letterSpacing: '-0.04em',
      maxScaleFactor: '2',
    },
    fieldValueCurrencyXl: {
      family: 'PayPalPro-Black',
      size: '4.25rem',
      sizeInPx: '68px',
      weight: '400',
      lineHeight: '5.125rem',
      lineHeightInPx: '82px',
      letterSpacing: '-0.04em',
      maxScaleFactor: '2',
    },
    fieldValueCurrencyLg: {
      family: 'PayPalPro-Black',
      size: '3rem',
      sizeInPx: '48px',
      weight: '400',
      lineHeight: '3.625rem',
      lineHeightInPx: '58px',
      letterSpacing: '-0.04em',
      maxScaleFactor: '2',
    },
    fieldValueCurrencyMd: {
      family: 'PayPalPro-Black',
      size: '2rem',
      sizeInPx: '32px',
      weight: '400',
      lineHeight: '2.25rem',
      lineHeightInPx: '36px',
      letterSpacing: '-0.04em',
      maxScaleFactor: '2',
    },
    fieldValueCurrencySm: {
      family: 'PayPalPro-Black',
      size: '1.5rem',
      sizeInPx: '24px',
      weight: '400',
      lineHeight: '2rem',
      lineHeightInPx: '32px',
      letterSpacing: '-0.04em',
      maxScaleFactor: '2',
    },
    fieldValueXl: {
      family: 'PayPalPlain-Regular',
      size: '2.5rem',
      sizeInPx: '40px',
      weight: '400',
      lineHeight: '2.75rem',
      lineHeightInPx: '44px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '1.5',
    },
    fieldValueLg: {
      family: 'PayPalPlain-Regular',
      size: '1.5rem',
      sizeInPx: '24px',
      weight: '400',
      lineHeight: '2rem',
      lineHeightInPx: '32px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '2',
    },
    fieldValueSm: {
      family: 'PayPalPlain-Regular',
      size: '0.875rem',
      sizeInPx: '14px',
      weight: '400',
      lineHeight: '1.5rem',
      lineHeightInPx: '24px',
      letterSpacing: '-0.02em',
      maxScaleFactor: '2',
    },
    navigationBarStrong: {
      family: 'PayPalPlain-Bold',
      size: '0.625rem',
      sizeInPx: '10px',
      weight: '400',
      lineHeight: '0.75rem',
      lineHeightInPx: '12px',
      letterSpacing: '0.03em',
      maxScaleFactor: '2',
    },
    navigationBarMedium: {
      family: 'PayPalPlain-Medium',
      size: '0.625rem',
      sizeInPx: '10px',
      weight: '400',
      lineHeight: '0.75rem',
      lineHeightInPx: '12px',
      letterSpacing: '0.03em',
      maxScaleFactor: '2',
    },
    navigationBar: {
      family: 'PayPalPlain-Regular',
      size: '0.625rem',
      sizeInPx: '10px',
      weight: '400',
      lineHeight: '0.75rem',
      lineHeightInPx: '12px',
      letterSpacing: '0.03em',
      maxScaleFactor: '2',
    },
    legalStrong: {
      family: 'PayPalPlain-Bold',
      size: '0.75rem',
      sizeInPx: '12px',
      weight: '400',
      lineHeight: '1rem',
      lineHeightInPx: '16px',
      letterSpacing: '-0.01em',
      maxScaleFactor: '2',
    },
    legalMedium: {
      family: 'PayPalPlain-Medium',
      size: '0.75rem',
      sizeInPx: '12px',
      weight: '400',
      lineHeight: '1rem',
      lineHeightInPx: '16px',
      letterSpacing: '-0.01em',
      maxScaleFactor: '2',
    },
    legal: {
      family: 'PayPalPlain-Regular',
      size: '0.75rem',
      sizeInPx: '12px',
      weight: '400',
      lineHeight: '1rem',
      lineHeightInPx: '16px',
      letterSpacing: '-0.01em',
      maxScaleFactor: '2',
    },
  },
  blur: {
    interactive: '0.5rem',
  },
  color: {
    background: {
      main: '#f0f2f9',
      alt: '#f5f7fa',
      surface: '#ffffff',
      surfaceHover: '#cccccc',
      surfaceActive: '#999999',
      highContrast: '#000000',
      mediumContrast: '#696969',
    },
    primary: {
      main: '#000000',
      mainHover: '#333333',
      mainActive: '#696969',
      contrast: '#ffffff',
      contrastHover: '#cccccc',
      contrastActive: '#999999',
      medium: {
        main: '#333333',
        mainHover: '#000000',
        mainActive: '#696969',
        contrast: '#ffffff',
      },
    },
    secondary: {
      main: '#0066f5',
      medium: {
        main: '#e3f7ff',
        mainHover: '#008cff',
        mainActive: '#0057d9',
        contrast: '#002991',
      },
      mainHover: '#0038ba',
      mainActive: '#3db5ff',
      contrast: '#ffffff',
    },
    tertiary: {
      main: '#000000',
      mainHover: '#333333',
      mainActive: '#696969',
      contrast: '#f5f7fa',
      contrastHover: '#cccccc',
      contrastActive: '#808080',
    },
    featured: {
      main: '#60cdff',
      mainHover: '#008cff',
      mainActive: '#e3f7ff',
      contrast: '#000000',
    },
    promotion: {
      main: '#0057d9',
      mainHover: '#002991',
      mainActive: '#008cff',
      contrast: '#ffffff',
      medium: {
        main: '#60cdff',
        mainHover: '#008cff',
        mainActive: '#e3f7ff',
        contrast: '#000000',
      },
      light: {
        main: '#e3f7ff',
        mainHover: '#60cdff',
        mainActive: '#008cff',
        contrast: '#000000',
      },
      moderate: {
        main: '#b8e9ff',
        mainHover: '#e3f7ff',
        mainActive: '#60cdff',
        contrast: '#008cff',
      },
      soft: {
        main: '#e3f7ff',
        mainHover: '#b8e9ff',
        mainActive: '#60cdff',
        contrast: '#008cff',
      },
    },
    unselected: {
      main: '#696969',
      mainHover: '#333333',
      mainActive: '#999999',
      contrast: '#edf0f2',
    },
    selected: {
      main: '#000000',
      mainHover: '#333333',
      mainActive: '#696969',
      alt: '#0066f5',
      altHover: '#0038ba',
      altActive: '#3db5ff',
      contrast: '#ffffff',
    },
    selectedRange: {
      main: '#b8e9ff',
      mainHover: '#3db5ff',
      mainActive: '#0066f5',
      contrast: '#000000',
    },
    link: {
      main: '#0066f5',
      mainHover: '#0038ba',
      mainActive: '#3db5ff',
      contrast: '#ffffff',
      contrastHover: '#b8e9ff',
      contrastActive: '#3db5ff',
      alt: '#808080',
      altHover: '#808080',
      altActive: '#696969',
    },
    overlay: {
      main: 'rgba(0, 0, 0, 0.55)',
      mainHover: 'rgba(0, 0, 0, 0.5)',
      mainActive: 'rgba(0, 0, 0, 0.1)',
      contrast: '#ffffff',
    },
    overlayInverse: {
      main: 'rgba(255, 255, 255, 0.7)',
      mainHover: 'rgba(255, 255, 255, 0.9)',
      mainActive: 'rgba(255, 255, 255, 0.5)',
      contrast: '#000000',
      light: {
        main: 'rgba(255, 255, 255, 0.25)',
        mainHover: 'rgba(255, 255, 255, 0.6)',
        mainActive: 'rgba(255, 255, 255, 0.04)',
        contrast: '#ffffff',
      },
    },
    accent1: {
      main: '#0066f5',
      contrast: '#ffffff',
    },
    accent2: {
      main: '#60cdff',
      contrast: '#000000',
    },
    accent3: {
      main: '#002991',
      contrast: '#ffffff',
    },
    accent4: {
      main: '#1a1a1a',
      contrast: '#ffffff',
    },
    error: {
      main: '#c31526',
      mainHover: '#9f111f',
      mainActive: '#e9585f',
      contrast: '#ffffff',
      medium: {
        main: '#f7d0d1',
        mainHover: '#e9585f',
        mainActive: '#c31526',
        contrast: '#770a0a',
      },
    },
    warning: {
      main: '#ffaa00',
      mainHover: '#aa7100',
      mainActive: '#ffdb93',
      alt: '#d08b00',
      contrast: '#000000',
      medium: {
        main: '#fff5e1',
        mainHover: '#ffdb93',
        mainActive: '#ffaa00',
        contrast: '#785000',
      },
    },
    success: {
      main: '#008556',
      mainHover: '#006b51',
      mainActive: '#0ac886',
      contrast: '#ffffff',
      medium: {
        main: '#e6faee',
        mainHover: '#73e6ab',
        mainActive: '#00a86d',
        contrast: '#005243',
      },
    },
    system: {
      main: '#696969',
      mainHover: '#333333',
      mainActive: '#999999',
      contrast: '#ffffff',
    },
    info: {
      main: '#cccccc',
      mainHover: '#808080',
      mainActive: '#f5f7fa',
      contrast: '#000000',
    },
    specialty: {
      main: '#4422bf',
      mainHover: '#1d0088',
      mainActive: '#9b80ff',
      contrast: '#ffffff',
      medium: {
        main: '#efebff',
        mainHover: '#b5a0ff',
        mainActive: '#7a57f9',
        contrast: '#1d0088',
      },
    },
    dataViz: {
      empty: '#edf0f2',
      value1: '#0066f5',
      value2: '#e3f7ff',
    },
    structure: {
      borderHighContrast: '#999999',
      borderLowContrast: '#cccccc',
      divider: 'rgba(0, 0, 0, 0.1)',
      focus: '#0066f5',
      scrim: 'rgba(0, 0, 0, 0.4)',
      shimmer: '#f0f2f9',
      shimmerInverse: '#808080',
      sheen: 'rgba(255, 255, 255, 0.7)',
      shadow: '#000000',
      focusOutline: '#0066f5',
      errorOutline: '#c31526',
    },
  },
}
```