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