> This page is for Studio.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://contentful-staging.ferndocs.com/developers/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://contentful-staging.ferndocs.com/developers/docs/_mcp/server.

# Design tokens

> Lists all design token attributes and their definitions.

## Overview

In the Experiences **Design** sidebar, specific design tokens such as `spacing`, `sizing`, `color`, `border`, `fontSize`, `lineHeight`, `letterSpacing`, `textColor`, and `text` are used by input elements. These design tokens directly influence the design variables within the sidebar. You can define custom key-value pairings per design token.

Among these, the `border` and `text` design tokens are unique. They are defined as objects with distinct parts, in contrast to other design tokens which are typically defined as straightforward key-value objects.

All fields are CSS variables compatible.

## Definition

Below are the defined design token fields. To see the latest updates, check out the types are defined in the [Experiences repo](https://github.com/contentful/experience-builder/blob/main/packages/core/src/types.ts#L310-L333).

### <ins>spacing</ins>

**Description**: Affects the **Padding**, **Margin** section and input controls and the **Layout** section for the **Gaps** input in the Design sidebar.

**Type definition**: `spacing: { [key: string]: string }`

**Properties**:

`key`: Name of the design token.

`value`: Any valid CSS value for margin and padding (px, %, em, and rem are supported).

**Example**: `spacing: { XS: '4px', S: '16%', M: '32rem', L: '64em', XL: var(-xl-size) }`

### <ins>sizing</ins>

**Description**: Affects the **Size** section of the Design sidebar for the **Height**, **Width**, and **Max-width** inputs when the fixed option is selected.

**Type definition**: `sizing: { [key: string]: string }`

**Properties**:

`key`: Name of the design token.

`value`: Any valid CSS value for width and height (px, %, em, and rem are supported).

**Example**: `sizing: { XS: '16px', S: '10%', M: '300px', L: '60em', XL: '100rem' }`

### <ins>color</ins>

**Description**: Affects the **Background color** section of the Design sidebar for the **Color** and **Opacity** inputs.

**Type definition**: `color: { [key: string]: string }`

**Properties**:

`key`: Name of the design token.

`value`: Any valid color value like hexcode, RGBA, RGB, and named colors.

**Example**: `color: { Slate: '#94a3b8', Azure: 'azure', Orange: '#fdba74' }`

### <ins>border</ins>

**Description**: Affects the **Border** section of the Design sidebar for the **Style**, **Width**, **Type**, **Color**, and **Opacity** inputs.

**Type definition**:

```TypeScript
border: {
  [key: string]: {
    width: string;
    style: 'solid' | 'dashed' | 'dotted';
    color: string;
  }
}
```

**Properties**:

`key`: Name of the design token.

`width`: Any valid CSS value for margin and padding (px, %, em, and rem are supported).

`style`: Must be one of 'solid', 'dashed', or 'dotted'.

`color`: Any valid color value like hexcode, RGBA, RGB, and named colors.

**Example**:

```
  border: {
    Azure: { width: '1px', style: 'solid', color: 'azure' },
    Hero: { width: '2px', style: 'dashed', color: '#ffaabb' },
    Card: { width: '1px', style: 'solid', color: '#ffccbb' },
    Carousel: { width: '2px', style: 'dotted', color: 'rgba(30, 25, 25, 0.75)' },
  }
```

### <ins>fontSize</ins>

**Description**: Affects the **Text** section of the Design sidebar for the **Font size** input.

**Type definition**: `fontSize { [key: string]: string }`

**Properties**:

`key`: Name of the design token.

`value`: Any valid CSS value for margin and padding (px, %, em, and rem are supported).

**Example** `fontSize: { SM: '14px', MD: '16px', LG: '32px', XL: var(xl-size) }`

### <ins>lineHeight</ins>

**Description**: Affects the **Text** section of the Design sidebar for the **Line height** input.

**Type definition**: `lineHeight: { [key: string]: string }`

**Properties**:

`key`: Name of the design token.

`value`: Any valid CSS value for margin and padding (px, %, em, and rem are supported).

**Example** `lineHeight: { XS: '1', SM: '1.25', MD: '1.5', LG: '200%' }`

### <ins>letterSpacing</ins>

**Description**: Affects the **Text** section of the Design sidebar for the **Letter spacing** input.

**Type definition**: `letterSpacing: { [key: string]: string }`

**Properties**:

`key`: Name of the design token.

`value`: Any valid CSS value for margin and padding (px, %, em, and rem are supported).

**Example**: `letterSpacing: { None: '0', XS: '0.05em', SM: '0.1em', MD: '0.15em' }`

### <ins>textColor</ins>

**Description**: Affects the **Text** section of the Design sidebar for the **Color** input.

**Type definition**: `text { [key: string]: string }`

**Properties**:

`key`: Name of the design token.

`value`: Any valid color value like hexcode, RGBA, RGB, and named colors.

**Example**: `textColor: { Dark: '#1a1a1a', Slate: '#94a3b8', Orange: var(--cf-color-orange) }`

### <ins>text</ins>

**Description**: Affects the **Text** section of the Design sidebar for the **Style** input. The `text` design token allows you to define various text styles for your components. Each text style can be customized with properties such as emphasis, font size, case, font weight, line height, letter spacing, and color.

**Type definition**:

```TypeScript
text: { 
  [key: string]: {
    emphasis?: 'bold' | 'italic' | 'underline' | 'bold italic' | 'bold underline' |
      'italic underline' | 'bold italic underline' | 'none';
    fontSize?: string;
    case?: 'capitalize' | 'uppercase' | 'lowercase' | 'normal';
    fontWeight?: string;
    lineHeight?: string;
    letterSpacing?: string;
    color?: string;
  }
}
```

**Properties**:

`emphasis`: Specifies the emphasis style for the text such as bold or italic.

`fontSize`: Defines the size of the font.

`case`: Specifies the text transformation case to apply uppercase, lowercase, or capitalize.

`fontWeight`: Defines the weight of the font.

`lineHeight`: Specifies the line height for the text.

`letterSpacing`: Defines the spacing between letters.

`color`: Specifies the color of the text.

**Example**:

```TypeScript
text: { 
  Heading: {
    fontSize: '32px',
    fontWeight: '600',
    lineHeight: '1.25',
    case: 'capitalize',
    color: '#94a3b8',
  },
  Body: {
    fontSize: '16px',
    lineHeight: '1.5',
    color: '#1a1a1a',
  },
}
```