Design Tokens are the values of every design element retrieved from the original Figma project that are used to configure every aspect of the design system.
Below are the latest TPDS design tokens of the TPDS Figma document.
1{
2 "text": {
3 "fontSize": {
4 "text-sm": "0.875rem",
5 "text-4xl": "2.25rem",
6 "text-6xl": "3.75rem",
7 "text-xxs": "0.6875rem",
8 "text-lg": "1.125rem",
9 "text-2xl": "1.5rem",
10 "text-5xl": "3rem",
11 "text-7xl": "4.5rem",
12 "text-8xl": "6rem",
13 "text-xl": "1.25rem",
14 "text-xs": "0.75rem",
15 "text-3xl": "1.875rem",
16 "text-9xl": "8rem",
17 "text-2-xxs": "0.625rem",
18 "text-base": "1rem"
19 }
20 },
21 "spacing": {
22 "xxl": "80px",
23 "xxxl": "120px",
24 "xl": "64px",
25 "lg": "48px",
26 "md": "32px",
27 "sm": "24px",
28 "xs": "16px",
29 "xxs": "8px"
30 },
31 "breakpoints": {
32 "sm": "640px",
33 "md": "768px",
34 "lg": "1024px",
35 "xl": "1280px",
36 "2xl": "1536px"
37 },
38 "shadows": {
39 "light": {
40 "shadow-sm": "0px 1px 2px 0px rgba(0,0,0,0.05)",
41 "shadow-xl": "0px 8px 10px -6px rgba(0,0,0,0.10),0px 20px 25px -5px rgba(0,0,0,0.10)",
42 "shadow-2xl": "0px 25px 50px -12px rgba(0,0,0,0.25)",
43 "shadow": "0px 1px 3px 0px rgba(0,0,0,0.10)",
44 "shadow-md": "0px 4px 6px -1px rgba(0,0,0,0.10)",
45 "shadow-lg": "0px 10px 15px -3px rgba(0,0,0,0.10)"
46 },
47 "dark": {
48 "shadow": "0px 3px 12px 6px rgba(1,1,1,0.25),0px 4px 4px 0px rgba(0,0,0,0.25)",
49 "shadow-xl": "0px 6px 30px 10px rgba(1,1,1,0.25),0px 4px 17px 4px rgba(1,1,1,0.25),0px 4px 4px 0px rgba(0,0,0,0.25)",
50 "shadow-md": "0px 4px 13px 7px rgba(1,1,1,0.25),0px 4px 4px 0px rgba(0,0,0,0.25)",
51 "shadow-sm": "0px 4px 6px 3px rgba(1,1,1,0.24),0px 2px 6px 1px rgba(0,0,0,0.15)",
52 "shadow-lg": "0px 8px 15px 5px rgba(1,1,1,0.25),0px 4px 4px 0px rgba(0,0,0,0.25)",
53 "shadow-2xl": "0px 15px 50px 0px rgba(1,1,1,0.45),0px 10px 20px 0px rgba(1,1,1,0.30),0px 4px 4px 0px rgba(0,0,0,0.25)"
54 }
55 },
56 "colors": {
57 "light": {
58 "buttons": {
59 "danger": {
60 "text": {
61 "enabled": "#FDEEEE",
62 "hover": "#FFFFFF",
63 "default": "#EB5757",
64 "active": "#F9CBCB"
65 },
66 "bg": {
67 "default": "#EB5757",
68 "enabled": "#EB5757",
69 "hover": "#D64F4F",
70 "active": "#A73E3E"
71 },
72 "border": {
73 "enabled": "#EB5757",
74 "hover": "#D64F4F",
75 "active": "#A73E3E",
76 "default": "#EB5757"
77 }
78 },
79 "default": {
80 "bg": {
81 "enabled": "#F1F3F3",
82 "active": "#C9CDCF",
83 "hover": "#DFE1E2",
84 "default": "#939B9F"
85 },
86 "text": {
87 "default": "#323639",
88 "active": "#323639",
89 "hover": "#1E2224",
90 "enabled": "#323639"
91 },
92 "border": {
93 "active": "#C9CDCF",
94 "enabled": "#F1F3F3",
95 "hover": "#DFE1E2"
96 }
97 },
98 "success": {
99 "text": {
100 "hover": "#FFFFFF",
101 "enabled": "#E6F9FA",
102 "active": "#B0ECF0",
103 "default": "#00C2CE"
104 },
105 "border": {
106 "hover": "#00B1BB",
107 "active": "#008A92",
108 "enabled": "#00C2CE",
109 "default": "#00C2CE"
110 },
111 "bg": {
112 "active": "#008A92",
113 "enabled": "#00C2CE",
114 "default": "#00C2CE",
115 "hover": "#00B1BB"
116 }
117 },
118 "warning": {
119 "text": {
120 "default": "#F08727",
121 "enabled": "#FEF3E9",
122 "hover": "#FFFFFF",
123 "active": "#FADABC"
124 },
125 "border": {
126 "default": "#F08727",
127 "enabled": "#F08727",
128 "active": "#AA601C",
129 "hover": "#DA7B23"
130 },
131 "bg": {
132 "enabled": "#F08727",
133 "default": "#F08727",
134 "active": "#AA601C",
135 "hover": "#DA7B23"
136 }
137 },
138 "secondary": {
139 "bg": {
140 "active": "#FAFAFA",
141 "hover": "#FFFFFF",
142 "enabled": "#FFFFFF"
143 },
144 "border": {
145 "active": "#AEB3B6",
146 "hover": "#C9CDCF",
147 "enabled": "#DFE1E2"
148 },
149 "text": {
150 "hover": "#1E2224",
151 "active": "#323639",
152 "enabled": "#323639"
153 }
154 },
155 "info": {
156 "bg": {
157 "enabled": "#318DFF",
158 "active": "#2364B5",
159 "hover": "#2D80E8",
160 "default": "#318DFF"
161 },
162 "text": {
163 "enabled": "#EAF4FF",
164 "hover": "#FFFFFF",
165 "active": "#BFDCFF",
166 "default": "#318DFF"
167 },
168 "border": {
169 "enabled": "#318DFF",
170 "hover": "#2D80E8",
171 "default": "#318DFF",
172 "active": "#2364B5"
173 }
174 }
175 },
176 "input": {
177 "bg": {
178 "enabled": "#FAFAFA",
179 "focus": "#FFFFFF",
180 "hover": "#FAFAFA"
181 },
182 "text": {
183 "prefix": "#989FA3",
184 "hover": "#484D51",
185 "focus": "#282C2F",
186 "enabled": "#788187",
187 "field_label": "#3E4347"
188 },
189 "border": {
190 "focus": "#282C2F",
191 "default": "#C9CDCF"
192 }
193 },
194 "checkbox": {
195 "selected": {
196 "border": {
197 "active": "#008A92",
198 "hover": "#00B1BB",
199 "enabled": "#00C2CE"
200 },
201 "text": {
202 "hover": "#E6F9FA",
203 "active": "#E6F9FA",
204 "enabled": "#F1F3F3"
205 },
206 "bg": {
207 "hover": "#00B1BB",
208 "active": "#008A92",
209 "enabled": "#00C2CE"
210 }
211 },
212 "unselected": {
213 "bg": {
214 "enabled": "#F1F3F3",
215 "hover": "#E6F9FA",
216 "active": "#E6F9FA"
217 },
218 "border": {
219 "hover": "#00C2CE",
220 "active": "#00B1BB",
221 "enabled": "#323639"
222 },
223 "text": {
224 "enabled": "#323639",
225 "active": "#323639",
226 "hover": "#1E2224"
227 }
228 }
229 },
230 "radio_group": {
231 "bg": {
232 "active": "#00C2CE",
233 "enabled": "#FAFAFA",
234 "press": "#E9EBEC",
235 "hover": "#F1F3F3"
236 },
237 "text": {
238 "hover": "#323639",
239 "enabled": "#484D51",
240 "press": "#788187",
241 "active": "#FFFFFF"
242 }
243 },
244 "text_link": {
245 "active": "#2D80E8",
246 "enabled": "#318DFF",
247 "hover": "#2364B5",
248 "press": "#2D80E8",
249 "visited": "#6200EE"
250 },
251 "nav_bar": {
252 "text": {
253 "press": "#788187",
254 "active": "#151819",
255 "hover": "#323639",
256 "enabled": "#484D51"
257 },
258 "bg": "#FAFAFA"
259 },
260 "window_bg": "#FFFFFF",
261 "text_primary": "#151819",
262 "text_tertiary": "#B1BDC5",
263 "text_secondary": "#7F888E",
264 "window_border": "#FFFFFF",
265 "body_bg": "#EEF0F1"
266 },
267 "dark": {
268 "radio_group": {
269 "text": {
270 "enabled": "#DFE1E2",
271 "active": "#1E2224",
272 "hover": "#FCFCFC",
273 "press": "#AEB3B6"
274 },
275 "bg": {
276 "hover": "#1E2224",
277 "active": "#00C2CE",
278 "enabled": "#282C2F",
279 "press": "#151819"
280 }
281 },
282 "checkbox": {
283 "selected": {
284 "border": {
285 "active": "#00B1BB",
286 "hover": "#54D6DE",
287 "enabled": "#00C2CE"
288 },
289 "text": {
290 "active": "#02292C",
291 "hover": "#02292C",
292 "enabled": "#02292C"
293 },
294 "bg": {
295 "hover": "#54D6DE",
296 "active": "#00B1BB",
297 "enabled": "#00C2CE"
298 }
299 },
300 "unselected": {
301 "text": {
302 "enabled": "#3E4347",
303 "active": "#155257",
304 "hover": "#155257"
305 },
306 "bg": {
307 "active": "#155257",
308 "hover": "#155257",
309 "enabled": "#3E4347"
310 },
311 "border": {
312 "active": "#00C2CE",
313 "hover": "#54D6DE",
314 "enabled": "#60676C"
315 }
316 }
317 },
318 "buttons": {
319 "warning": {
320 "border": {
321 "enabled": "#F08727",
322 "hover": "#F5AF6E",
323 "active": "#AA601C"
324 },
325 "text": {
326 "active": "#653910",
327 "hover": "#37210C",
328 "enabled": "#37210C"
329 },
330 "bg": {
331 "hover": "#F5AF6E",
332 "active": "#AA601C",
333 "enabled": "#F08727"
334 }
335 },
336 "secondary": {
337 "bg": {
338 "hover": "#1E2224",
339 "active": "#282C2F",
340 "enabled": "#1E2224"
341 },
342 "border": {
343 "active": "#AEB3B6",
344 "enabled": "#484D51",
345 "hover": "#989FA4"
346 },
347 "text": {
348 "enabled": "#DFE1E2",
349 "hover": "#F1F3F3",
350 "active": "#DFE1E2"
351 }
352 },
353 "info": {
354 "bg": {
355 "enabled": "#318DFF",
356 "hover": "#75B3FF",
357 "active": "#2364B5"
358 },
359 "border": {
360 "enabled": "#318DFF",
361 "hover": "#75B3FF",
362 "active": "#2364B5"
363 },
364 "text": {
365 "enabled": "#0D223D",
366 "active": "#153B6B",
367 "hover": "#0D223D"
368 }
369 },
370 "success": {
371 "border": {
372 "active": "#00B1BB",
373 "hover": "#54D6DE",
374 "enabled": "#00C2CE"
375 },
376 "text": {
377 "active": "#005157",
378 "hover": "#02282B",
379 "enabled": "#02282B"
380 },
381 "bg": {
382 "hover": "#54D6DE",
383 "active": "#00B1BB",
384 "enabled": "#00C2CE"
385 }
386 },
387 "default": {
388 "border": {
389 "enabled": "#282C2F",
390 "active": "#484D51",
391 "hover": "#3E4347"
392 },
393 "bg": {
394 "enabled": "#282C2F",
395 "hover": "#3E4347",
396 "active": "#484D51"
397 },
398 "text": {
399 "active": "#DFE1E2",
400 "enabled": "#DFE1E2",
401 "hover": "#F1F3F3"
402 }
403 },
404 "danger": {
405 "border": {
406 "enabled": "#EB5757",
407 "hover": "#EF7979",
408 "active": "#D64F4F"
409 },
410 "bg": {
411 "enabled": "#EB5757",
412 "active": "#D64F4F",
413 "hover": "#EF7979"
414 },
415 "text": {
416 "active": "#632525",
417 "hover": "#3B1515",
418 "enabled": "#3B1515"
419 }
420 }
421 },
422 "text_link": {
423 "press": "#2D80E8",
424 "visited": "#6200EE",
425 "enabled": "#318DFF",
426 "active": "#2D80E8",
427 "hover": "#75B3FF"
428 },
429 "input": {
430 "bg": {
431 "hover": "#31373B",
432 "focus": "#1E2224",
433 "enabled": "#2C3135"
434 },
435 "text": {
436 "field_label": "#86949F",
437 "focus": "#FFFFFF",
438 "hover": "#DFE1E2",
439 "enabled": "#9DA1A4",
440 "prefix": "#788289"
441 },
442 "border": {
443 "default": "#57636B",
444 "focus": "#B9C5CD"
445 }
446 },
447 "nav_bar": {
448 "text": {
449 "enabled": "#DFE1E2",
450 "press": "#AEB3B6",
451 "active": "#FCFCFC",
452 "hover": "#FCFCFC"
453 },
454 "bg": "#151819"
455 },
456 "text_secondary": "#AEB3B6",
457 "text_tertiary": "#757E84",
458 "text_primary": "#F7F7F7",
459 "window_bg": "#1D1E20",
460 "window_border": "#2D3033",
461 "body_bg": "#17181A"
462 },
463 "color_palettes": {
464 "red": {
465 "50": "#FDEEEE",
466 "100": "#F9CBCB",
467 "200": "#F6B2B2",
468 "300": "#F28E8E",
469 "400": "#EF7979",
470 "500": "#EB5757",
471 "600": "#D64F4F",
472 "700": "#A73E3E",
473 "800": "#813030",
474 "900": "#632525",
475 "950": "#3B1515"
476 },
477 "brand": {
478 "50": "#E6F9FA",
479 "100": "#B0ECF0",
480 "200": "#8AE3E8",
481 "300": "#54D6DE",
482 "400": "#33CED8",
483 "500": "#00C2CE",
484 "600": "#00B1BB",
485 "800": "#006B71",
486 "900": "#005157"
487 },
488 "orange": {
489 "50": "#FEF3E9",
490 "100": "#FADABC",
491 "200": "#F8C89C",
492 "300": "#F5AF6E",
493 "400": "#F39F52",
494 "500": "#F08727",
495 "600": "#DA7B23",
496 "700": "#AA601C",
497 "800": "#844A15",
498 "900": "#653910",
499 "950": "#37210C"
500 },
501 "yellow": {
502 "50": "#FFFBE8",
503 "100": "#FEF4B7",
504 "200": "#FEEE94",
505 "300": "#FDE764",
506 "400": "#FDE245",
507 "500": "#FCDB17",
508 "600": "#E5C715",
509 "700": "#B39B10",
510 "800": "#8B780D",
511 "900": "#6A5C0A"
512 },
513 "purple": {
514 "50": "#EFE6FD",
515 "100": "#CEB0FA",
516 "200": "#B78AF7",
517 "300": "#9654F4",
518 "400": "#8133F1",
519 "500": "#6200EE",
520 "600": "#5900D9",
521 "700": "#4600A9",
522 "800": "#360083",
523 "900": "#290064"
524 },
525 "magenta": {
526 "50": "#FCEDFF",
527 "100": "#F7C7FF",
528 "200": "#F3ABFF",
529 "300": "#EE85FF",
530 "400": "#EA6DFF",
531 "500": "#E549FF",
532 "600": "#D042E8",
533 "700": "#A334B5",
534 "800": "#7E288C",
535 "900": "#601F6B"
536 },
537 "blue": {
538 "50": "#E8F1FE",
539 "100": "#D1E3FD",
540 "200": "#A3C7FB",
541 "300": "#75AAF9",
542 "400": "#478EF7",
543 "500": "#1972F5",
544 "600": "#1561D0",
545 "700": "#1250AB",
546 "800": "#0E3F87",
547 "900": "#0A2E62",
548 "950": "#061D3D"
549 },
550 "green": {
551 "50": "#EBFAEB",
552 "100": "#C1F0C1",
553 "200": "#99E699",
554 "300": "#84E184",
555 "400": "#32CD32",
556 "500": "#2DB92D",
557 "600": "#28A428",
558 "700": "#1E7B1E",
559 "800": "#145214",
560 "900": "#0F3E0F",
561 "950": "#0B2E0B"
562 },
563 "grey_dark": {
564 "50": "#717980",
565 "100": "#666D73",
566 "200": "#5A6166",
567 "300": "#4F555A",
568 "400": "#44494D",
569 "500": "#393D40",
570 "600": "#2D3033",
571 "700": "#222426",
572 "800": "#1D1E20",
573 "900": "#17181A"
574 },
575 "grey_light": {
576 "50": "#FDFDFD",
577 "100": "#F9F9FA",
578 "200": "#F6F7F7",
579 "300": "#EEEFF1",
580 "400": "#D7DEE5",
581 "500": "#C6D0D9",
582 "600": "#AEB9C4",
583 "700": "#9DA6AE",
584 "800": "#88929A",
585 "900": "#717980"
586 }
587 },
588 "black": "#000000",
589 "white": "#FFFFFF"
590 }
591}