Register design tokens

Why use Design tokens?

Design tokens allow you to easily manage and use consistent design values across all your users’ experiences.

For more information on the design tokens in Experiences, check out the Design tokens reference and continue below to see how you can register design tokens.

Register your Design tokens

To register your design tokens:

  1. Import the defineDesignTokens function and provide your design token definitions as an object.
1import { defineDesignTokens } from '@contentful/experiences-sdk-react';
2
3// register design tokens
4const textColorTokens = {
5  Primary: '#1890ff',
6  Heading: '#262626',
7  HeadingInverse: '#ffffff',
8  Paragraph: '#262626',
9  ParagraphLight: '#878787',
10  ParagraphInverse: '#ffffff',
11};
12
13const fontSizeTokens = {
14  XS: '14px',
15  S: '16px',
16  M: '20px',
17  L: '24px',
18  XL: '32px',
19  '2XL': '48px',
20  '3XL': '64px',
21  '4XL': '84px',
22};
23
24const lineHeightTokens = {
25  Paragraph: '150%',
26  Heading: '125%',
27};
28
29defineDesignTokens({
30  textColor: textColorTokens,
31  fontSize: fontSizeTokens,
32  lineHeight: lineHeightTokens,
33  color: {
34    Neutral: '#fafafa',
35    Warm: '#faf4f3',
36    Red: '#fff1f0',
37    Orange: '#fff7e6',
38    Gold: '#fffbe6',
39    Lime: '#fcffe6',
40    Cyan: '#e6fffb',
41    Blue: '#e6f7ff',
42    Purple: '#f9f0ff',
43    Magenta: '#fff0f6',
44  },
45  spacing: {
46    XXS: '8px',
47    XS: '12px',
48    S: '16px',
49    M: '24px',
50    L: '32px',
51    XL: '40px',
52    '2XL': '48px',
53    '3XL': '64px',
54    '4XL': '128px',
55  },
56  sizing: {
57    Layout: '960px',
58    'Content Block': '480px',
59  },
60  border: {
61    Card: {
62      width: '1px',
63      style: 'solid',
64      color: '#fafafa',
65    },
66    'Card Bold': {
67      width: '2px',
68      style: 'solid',
69      color: '#f0f0f0',
70    },
71  },
72  borderRadius: {
73    M: '8px',
74  },
75  text: {
76    'Hero H1': {
77      fontSize: fontSizeTokens['3XL'],
78      fontWeight: '600',
79      lineHeight: lineHeightTokens.Heading,
80      color: textColorTokens.ParagraphInverse,
81    },
82    'Hero Paragraph': {
83      fontSize: fontSizeTokens.S,
84      fontWeight: '500',
85      lineHeight: lineHeightTokens.Paragraph,
86      color: textColorTokens.ParagraphInverse,
87    },
88    H1: {
89      fontSize: fontSizeTokens['3XL'],
90      fontWeight: '600',
91      lineHeight: lineHeightTokens.Heading,
92      color: textColorTokens.Heading,
93    },
94    H2: {
95      fontSize: fontSizeTokens.XL,
96      fontWeight: '600',
97      lineHeight: lineHeightTokens.Heading,
98      color: textColorTokens.Heading,
99    },
100    H3: {
101      fontSize: fontSizeTokens.L,
102      fontWeight: '600',
103      lineHeight: lineHeightTokens.Heading,
104      color: textColorTokens.Heading,
105    },
106    H4: {
107      fontSize: fontSizeTokens.M,
108      fontWeight: '600',
109      lineHeight: lineHeightTokens.Heading,
110      color: textColorTokens.Heading,
111    },
112    H5: {
113      fontSize: fontSizeTokens.S,
114      fontWeight: '600',
115      lineHeight: lineHeightTokens.Heading,
116      color: textColorTokens.Heading,
117    },
118    Paragraph: {
119      fontSize: fontSizeTokens.S,
120      fontWeight: '500',
121      lineHeight: lineHeightTokens.Paragraph,
122      color: textColorTokens.Paragraph,
123    },
124    'Paragraph Large': {
125      fontSize: fontSizeTokens.M,
126      fontWeight: '500',
127      lineHeight: lineHeightTokens.Paragraph,
128      color: textColorTokens.Paragraph,
129    },
130  },
131});
  1. View and use design tokens in Experiences.

Reload the Experiences page in Contentful. In the Design tab of the right sidebar, the design variable for which the token has been defined displays an additional tab with the defined design tokens.

Design token text color