@maggioli-design-system/design-tokens
Version:
This is the Design Token library of Maggioli Design System, here you'll find all the visual data used around the libraries.
1,598 lines • 31.7 kB
JSON
{
"color": {
"tone": {
"neutral": {
"light": {
"1": {
"value": "#000000"
},
"2": {
"value": "#2a2a2a"
},
"3": {
"value": "#404040"
},
"4": {
"value": "#595959"
},
"5": {
"value": "#757575"
},
"6": {
"value": "#a2a2a2"
},
"7": {
"value": "#b8b8b8"
},
"8": {
"value": "#d0d0d0"
},
"9": {
"value": "#e4e4e4"
},
"10": {
"value": "#eeeeee"
},
"color": {
"value": "#FFFFFF"
}
},
"dark": {
"1": {
"value": "#ffffff"
},
"2": {
"value": "#f4f4f4"
},
"3": {
"value": "#e9e9e9"
},
"4": {
"value": "#dadada"
},
"5": {
"value": "#c5c5c5"
},
"6": {
"value": "#9e9e9e"
},
"7": {
"value": "#868686"
},
"8": {
"value": "#6b6b6b"
},
"9": {
"value": "#4c4c4c"
},
"10": {
"value": "#3c3c3c"
},
"color": {
"value": "#000000"
}
}
}
},
"status": {
"info": {
"light": {
"1": {
"value": "#00244c"
},
"2": {
"value": "#003862"
},
"3": {
"value": "#00507b"
},
"4": {
"value": "#006d9a"
},
"5": {
"value": "#008ab8"
},
"6": {
"value": "#37b6e3"
},
"7": {
"value": "#7ccaeb"
},
"8": {
"value": "#a8dbf2"
},
"9": {
"value": "#d2ecf9"
},
"10": {
"value": "#def2fa"
},
"color": {
"value": "#23B2E1"
}
},
"dark": {
"1": {
"value": "#edf8fd"
},
"2": {
"value": "#def2fa"
},
"3": {
"value": "#c6e7f7"
},
"4": {
"value": "#9fd8f1"
},
"5": {
"value": "#70c6ea"
},
"6": {
"value": "#00a1d0"
},
"7": {
"value": "#0086b4"
},
"8": {
"value": "#006b97"
},
"9": {
"value": "#004974"
},
"10": {
"value": "#003d67"
},
"color": {
"value": "#23B2E1"
}
}
},
"success": {
"light": {
"1": {
"value": "#002b00"
},
"2": {
"value": "#004000"
},
"3": {
"value": "#005911"
},
"4": {
"value": "#007630"
},
"5": {
"value": "#00944c"
},
"6": {
"value": "#2bc076"
},
"7": {
"value": "#78d29b"
},
"8": {
"value": "#a5e1ba"
},
"9": {
"value": "#d1efdb"
},
"10": {
"value": "#def4e4"
},
"color": {
"value": "#21BF73"
}
},
"dark": {
"1": {
"value": "#edf9f1"
},
"2": {
"value": "#def4e4"
},
"3": {
"value": "#c4ebd1"
},
"4": {
"value": "#9edeb5"
},
"5": {
"value": "#6bce93"
},
"6": {
"value": "#00ab61"
},
"7": {
"value": "#009048"
},
"8": {
"value": "#00742e"
},
"9": {
"value": "#005209"
},
"10": {
"value": "#004500"
},
"color": {
"value": "#21BF73"
}
}
},
"error": {
"light": {
"1": {
"value": "#480000"
},
"2": {
"value": "#6a0000"
},
"3": {
"value": "#930419"
},
"4": {
"value": "#b83438"
},
"5": {
"value": "#d95352"
},
"6": {
"value": "#f58b86"
},
"7": {
"value": "#fbaba6"
},
"8": {
"value": "#fec6c2"
},
"9": {
"value": "#ffe1df"
},
"10": {
"value": "#ffeae7"
},
"color": {
"value": "#ED6663"
}
},
"dark": {
"1": {
"value": "#fff3f2"
},
"2": {
"value": "#ffeae7"
},
"3": {
"value": "#ffd9d6"
},
"4": {
"value": "#fec1bd"
},
"5": {
"value": "#faa5a0"
},
"6": {
"value": "#ef6c69"
},
"7": {
"value": "#d4504f"
},
"8": {
"value": "#b63236"
},
"9": {
"value": "#87000e"
},
"10": {
"value": "#730000"
},
"color": {
"value": "#ED6663"
}
}
},
"warning": {
"light": {
"1": {
"value": "#302400"
},
"2": {
"value": "#463500"
},
"3": {
"value": "#624900"
},
"4": {
"value": "#836200"
},
"5": {
"value": "#a47b00"
},
"6": {
"value": "#d6a000"
},
"7": {
"value": "#f2b500"
},
"8": {
"value": "#ffcd39"
},
"9": {
"value": "#ffe69d"
},
"10": {
"value": "#ffedb9"
},
"color": {
"value": "#FFC107"
}
},
"dark": {
"1": {
"value": "#fff6d9"
},
"2": {
"value": "#ffedb9"
},
"3": {
"value": "#ffdf81"
},
"4": {
"value": "#ffc821"
},
"5": {
"value": "#edb100"
},
"6": {
"value": "#be8e00"
},
"7": {
"value": "#9f7800"
},
"8": {
"value": "#816000"
},
"9": {
"value": "#5a4300"
},
"10": {
"value": "#4d3900"
},
"color": {
"value": "#FFC107"
}
}
}
},
"label": {
"red": {
"light": {
"1": {
"value": "#480909"
},
"2": {
"value": "#690e0e"
},
"3": {
"value": "#911313"
},
"4": {
"value": "#c31919"
},
"5": {
"value": "#e64242"
},
"6": {
"value": "#f08e8e"
},
"7": {
"value": "#f4adad"
},
"8": {
"value": "#f8c9c9"
},
"9": {
"value": "#fbe2e2"
},
"10": {
"value": "#fceaea"
},
"color": {
"value": "#d01b1b"
}
},
"dark": {
"1": {
"value": "#fef3f3"
},
"2": {
"value": "#fceaea"
},
"3": {
"value": "#fadada"
},
"4": {
"value": "#f7c3c3"
},
"5": {
"value": "#f4a7a7"
},
"6": {
"value": "#ec6e6e"
},
"7": {
"value": "#e53838"
},
"8": {
"value": "#c01919"
},
"9": {
"value": "#861111"
},
"10": {
"value": "#730f0f"
},
"color": {
"value": "#d01b1b"
}
}
},
"amaranth": {
"light": {
"1": {
"value": "#480410"
},
"2": {
"value": "#6a0617"
},
"3": {
"value": "#920820"
},
"4": {
"value": "#c40b2b"
},
"5": {
"value": "#f22548"
},
"6": {
"value": "#f8879b"
},
"7": {
"value": "#faaab7"
},
"8": {
"value": "#fcc5cf"
},
"9": {
"value": "#fde1e6"
},
"10": {
"value": "#fee9ed"
},
"color": {
"value": "#f43f5e"
}
},
"dark": {
"1": {
"value": "#fef3f5"
},
"2": {
"value": "#fee9ed"
},
"3": {
"value": "#fdd9df"
},
"4": {
"value": "#fbc0cb"
},
"5": {
"value": "#faa3b2"
},
"6": {
"value": "#f6637d"
},
"7": {
"value": "#ef0e34"
},
"8": {
"value": "#c10b2a"
},
"9": {
"value": "#87081e"
},
"10": {
"value": "#720719"
},
"color": {
"value": "#f43f5e"
}
}
},
"orchid": {
"light": {
"1": {
"value": "#460727"
},
"2": {
"value": "#660b38"
},
"3": {
"value": "#8e0f4d"
},
"4": {
"value": "#be1468"
},
"5": {
"value": "#e92c89"
},
"6": {
"value": "#f286bc"
},
"7": {
"value": "#f6a9cf"
},
"8": {
"value": "#f9c5df"
},
"9": {
"value": "#fce1ef"
},
"10": {
"value": "#fde9f3"
},
"color": {
"value": "#ec4899"
}
},
"dark": {
"1": {
"value": "#fef3f9"
},
"2": {
"value": "#fde9f3"
},
"3": {
"value": "#fbd8ea"
},
"4": {
"value": "#f8c0dc"
},
"5": {
"value": "#f5a3cb"
},
"6": {
"value": "#ef63a8"
},
"7": {
"value": "#e71c81"
},
"8": {
"value": "#bb1366"
},
"9": {
"value": "#830e47"
},
"10": {
"value": "#6f0c3d"
},
"color": {
"value": "#ec4899"
}
}
},
"purple": {
"light": {
"1": {
"value": "#31045c"
},
"2": {
"value": "#480687"
},
"3": {
"value": "#6409bc"
},
"4": {
"value": "#8919f4"
},
"5": {
"value": "#a856f7"
},
"6": {
"value": "#c792fa"
},
"7": {
"value": "#d7b0fb"
},
"8": {
"value": "#e4cafc"
},
"9": {
"value": "#f1e4fe"
},
"10": {
"value": "#f5eafe"
},
"color": {
"value": "#a855f7"
}
},
"dark": {
"1": {
"value": "#faf4fe"
},
"2": {
"value": "#f5eafe"
},
"3": {
"value": "#eddbfd"
},
"4": {
"value": "#e1c4fc"
},
"5": {
"value": "#d4aafb"
},
"6": {
"value": "#ba77f9"
},
"7": {
"value": "#a54ff7"
},
"8": {
"value": "#8511f4"
},
"9": {
"value": "#5c08ad"
},
"10": {
"value": "#4e0792"
},
"color": {
"value": "#a855f7"
}
}
},
"violet": {
"light": {
"1": {
"value": "#240668"
},
"2": {
"value": "#340899"
},
"3": {
"value": "#490cd3"
},
"4": {
"value": "#7239f4"
},
"5": {
"value": "#9164f6"
},
"6": {
"value": "#b799f9"
},
"7": {
"value": "#cab5fb"
},
"8": {
"value": "#dbcdfc"
},
"9": {
"value": "#ece4fe"
},
"10": {
"value": "#f1ecfe"
},
"color": {
"value": "#8b5cf6"
}
},
"dark": {
"1": {
"value": "#f8f4fe"
},
"2": {
"value": "#f1ebfe"
},
"3": {
"value": "#e7ddfd"
},
"4": {
"value": "#d8c8fc"
},
"5": {
"value": "#c6affb"
},
"6": {
"value": "#a681f8"
},
"7": {
"value": "#8d5ff6"
},
"8": {
"value": "#6f35f4"
},
"9": {
"value": "#430bc3"
},
"10": {
"value": "#3909a5"
},
"color": {
"value": "#8b5cf6"
}
}
},
"blue": {
"light": {
"1": {
"value": "#04156a"
},
"2": {
"value": "#061f9a"
},
"3": {
"value": "#082bd5"
},
"4": {
"value": "#2e51f7"
},
"5": {
"value": "#5a75f9"
},
"6": {
"value": "#92a4fb"
},
"7": {
"value": "#afbdfc"
},
"8": {
"value": "#c8d2fd"
},
"9": {
"value": "#e3e7fe"
},
"10": {
"value": "#eaeefe"
},
"color": {
"value": "#0E36F6"
}
},
"dark": {
"1": {
"value": "#f4f5ff"
},
"2": {
"value": "#eaeefe"
},
"3": {
"value": "#dae0fe"
},
"4": {
"value": "#c4cefd"
},
"5": {
"value": "#aab8fc"
},
"6": {
"value": "#798ffa"
},
"7": {
"value": "#5571f9"
},
"8": {
"value": "#2a4df7"
},
"9": {
"value": "#0728c4"
},
"10": {
"value": "#0622a6"
},
"color": {
"value": "#0E36F6"
}
}
},
"sky": {
"light": {
"1": {
"value": "#032839"
},
"2": {
"value": "#053b53"
},
"3": {
"value": "#075173"
},
"4": {
"value": "#096d9b"
},
"5": {
"value": "#0c88c1"
},
"6": {
"value": "#28b4f2"
},
"7": {
"value": "#6acbf6"
},
"8": {
"value": "#9ddcf9"
},
"9": {
"value": "#cdedfc"
},
"10": {
"value": "#dbf2fd"
},
"color": {
"value": "#0ea5e9"
}
},
"dark": {
"1": {
"value": "#ecf8fe"
},
"2": {
"value": "#dbf2fd"
},
"3": {
"value": "#bfe8fb"
},
"4": {
"value": "#94d9f9"
},
"5": {
"value": "#5ec6f5"
},
"6": {
"value": "#0d9ee0"
},
"7": {
"value": "#0b85bc"
},
"8": {
"value": "#096b98"
},
"9": {
"value": "#064c6b"
},
"10": {
"value": "#053f5a"
},
"color": {
"value": "#0ea5e9"
}
}
},
"aqua": {
"light": {
"1": {
"value": "#012930"
},
"2": {
"value": "#023d46"
},
"3": {
"value": "#035462"
},
"4": {
"value": "#047183"
},
"5": {
"value": "#058da5"
},
"6": {
"value": "#06b8d7"
},
"7": {
"value": "#07d0f3"
},
"8": {
"value": "#63e5fb"
},
"9": {
"value": "#b5f2fd"
},
"10": {
"value": "#cbf6fe"
},
"color": {
"value": "#06b6d4"
}
},
"dark": {
"1": {
"value": "#e5fbfe"
},
"2": {
"value": "#cbf6fe"
},
"3": {
"value": "#9eeefc"
},
"4": {
"value": "#51e1fa"
},
"5": {
"value": "#07cbed"
},
"6": {
"value": "#05a3be"
},
"7": {
"value": "#0589a0"
},
"8": {
"value": "#046e81"
},
"9": {
"value": "#034d5a"
},
"10": {
"value": "#02414c"
},
"color": {
"value": "#06b6d4"
}
}
},
"green": {
"light": {
"1": {
"value": "#082b15"
},
"2": {
"value": "#0b3f1e"
},
"3": {
"value": "#0f582a"
},
"4": {
"value": "#147739"
},
"5": {
"value": "#1a9447"
},
"6": {
"value": "#21c15c"
},
"7": {
"value": "#2cda6c"
},
"8": {
"value": "#7de8a4"
},
"9": {
"value": "#c1f4d4"
},
"10": {
"value": "#d3f7e1"
},
"color": {
"value": "#22c55e"
}
},
"dark": {
"1": {
"value": "#e7fbef"
},
"2": {
"value": "#d3f7e0"
},
"3": {
"value": "#adf1c6"
},
"4": {
"value": "#71e69c"
},
"5": {
"value": "#25d566"
},
"6": {
"value": "#1eab52"
},
"7": {
"value": "#199145"
},
"8": {
"value": "#147438"
},
"9": {
"value": "#0e5127"
},
"10": {
"value": "#0c4421"
},
"color": {
"value": "#22c55e"
}
}
},
"lime": {
"light": {
"1": {
"value": "#1b2a05"
},
"2": {
"value": "#283d07"
},
"3": {
"value": "#375509"
},
"4": {
"value": "#4a720c"
},
"5": {
"value": "#5d8f0f"
},
"6": {
"value": "#79bb14"
},
"7": {
"value": "#89d317"
},
"8": {
"value": "#9fe82e"
},
"9": {
"value": "#d1f49c"
},
"10": {
"value": "#dff7b9"
},
"color": {
"value": "#84cc16"
}
},
"dark": {
"1": {
"value": "#eefbd9"
},
"2": {
"value": "#dff7b9"
},
"3": {
"value": "#c1f17a"
},
"4": {
"value": "#94e519"
},
"5": {
"value": "#86cf16"
},
"6": {
"value": "#6ca712"
},
"7": {
"value": "#5a8b0f"
},
"8": {
"value": "#49700c"
},
"9": {
"value": "#334f08"
},
"10": {
"value": "#2b4207"
},
"color": {
"value": "#84cc16"
}
}
},
"yellow": {
"light": {
"1": {
"value": "#302402"
},
"2": {
"value": "#463602"
},
"3": {
"value": "#604a03"
},
"4": {
"value": "#816304"
},
"5": {
"value": "#a17c06"
},
"6": {
"value": "#d3a207"
},
"7": {
"value": "#efb708"
},
"8": {
"value": "#f9cf4e"
},
"9": {
"value": "#fce7a8"
},
"10": {
"value": "#fdeebf"
},
"color": {
"value": "#eab308"
}
},
"dark": {
"1": {
"value": "#fef6dd"
},
"2": {
"value": "#fdeebe"
},
"3": {
"value": "#fbe08e"
},
"4": {
"value": "#f8ca3c"
},
"5": {
"value": "#eab308"
},
"6": {
"value": "#bc8f06"
},
"7": {
"value": "#9e7805"
},
"8": {
"value": "#7f6104"
},
"9": {
"value": "#594403"
},
"10": {
"value": "#4b3903"
},
"color": {
"value": "#eab308"
}
}
},
"orange": {
"light": {
"1": {
"value": "#3e1b02"
},
"2": {
"value": "#5b2702"
},
"3": {
"value": "#7f3603"
},
"4": {
"value": "#ab4804"
},
"5": {
"value": "#d55a05"
},
"6": {
"value": "#fa8c40"
},
"7": {
"value": "#fcae79"
},
"8": {
"value": "#fdc9a6"
},
"9": {
"value": "#fee4d1"
},
"10": {
"value": "#feebdf"
},
"color": {
"value": "#f97316"
}
},
"dark": {
"1": {
"value": "#fff4ed"
},
"2": {
"value": "#feebde"
},
"3": {
"value": "#fddbc4"
},
"4": {
"value": "#fcc49e"
},
"5": {
"value": "#fba86f"
},
"6": {
"value": "#f76906"
},
"7": {
"value": "#d05805"
},
"8": {
"value": "#a74704"
},
"9": {
"value": "#743103"
},
"10": {
"value": "#632a03"
},
"color": {
"value": "#f97316"
}
}
}
},
"variant": {
"primary": {
"light": {
"1": {
"value": "#001f5a"
},
"2": {
"value": "#002d83"
},
"3": {
"value": "#003fb6"
},
"4": {
"value": "#0054f3"
},
"5": {
"value": "#3279ff"
},
"6": {
"value": "#7ba9ff"
},
"7": {
"value": "#9fc0ff"
},
"8": {
"value": "#bed4ff"
},
"9": {
"value": "#dce8ff"
},
"10": {
"value": "#e6efff"
},
"color": {
"value": "#00379E"
}
},
"dark": {
"1": {
"value": "#f2f6ff"
},
"2": {
"value": "#e6efff"
},
"3": {
"value": "#d3e2ff"
},
"4": {
"value": "#b8d0ff"
},
"5": {
"value": "#98bcff"
},
"6": {
"value": "#5a93ff"
},
"7": {
"value": "#2c75ff"
},
"8": {
"value": "#0053ef"
},
"9": {
"value": "#003aa8"
},
"10": {
"value": "#00318e"
},
"color": {
"value": "#00379E"
}
}
},
"secondary": {
"light": {
"1": {
"value": "#061f5a"
},
"2": {
"value": "#092d83"
},
"3": {
"value": "#0d3fb5"
},
"4": {
"value": "#1657ef"
},
"5": {
"value": "#487af2"
},
"6": {
"value": "#87a8f7"
},
"7": {
"value": "#a7bff9"
},
"8": {
"value": "#c3d3fb"
},
"9": {
"value": "#e0e8fd"
},
"10": {
"value": "#e8eefd"
},
"color": {
"value": "#0f4ad5"
}
},
"dark": {
"1": {
"value": "#f3f6fe"
},
"2": {
"value": "#e8eefd"
},
"3": {
"value": "#d7e2fc"
},
"4": {
"value": "#bed0fa"
},
"5": {
"value": "#a1bbf8"
},
"6": {
"value": "#6a93f5"
},
"7": {
"value": "#4276f2"
},
"8": {
"value": "#1253ee"
},
"9": {
"value": "#0c3aa8"
},
"10": {
"value": "#0a318e"
},
"color": {
"value": "#0f4ad5"
}
}
},
"ai": {
"light": {
"1": {
"value": "#280465"
},
"2": {
"value": "#3b0694"
},
"3": {
"value": "#5109cf"
},
"4": {
"value": "#7931f6"
},
"5": {
"value": "#9861f8"
},
"6": {
"value": "#bc97fb"
},
"7": {
"value": "#ceb3fc"
},
"8": {
"value": "#decbfd"
},
"9": {
"value": "#eee4fe"
},
"10": {
"value": "#f2ebfe"
},
"color": {
"value": "#782FF6"
}
},
"dark": {
"1": {
"value": "#f8f4ff"
},
"2": {
"value": "#f2ebfe"
},
"3": {
"value": "#e9dcfe"
},
"4": {
"value": "#dac7fd"
},
"5": {
"value": "#caaefb"
},
"6": {
"value": "#ac7ef9"
},
"7": {
"value": "#945bf8"
},
"8": {
"value": "#762cf6"
},
"9": {
"value": "#4b08bd"
},
"10": {
"value": "#3f07a1"
},
"color": {
"value": "#782FF6"
}
}
}
},
"brand": {
"maggioli": {
"light": {
"1": {
"value": "#092252"
},
"2": {
"value": "#022e82"
},
"3": {
"value": "#013fb4"
},
"4": {
"value": "#125be3"
},
"5": {
"value": "#4a7ee0"
},
"6": {
"value": "#91aada"
},
"7": {
"value": "#b2c0dc"
},
"8": {
"value": "#ccd4e2"
},
"9": {
"value": "#e6e8ec"
},
"10": {
"value": "#edeef1"
},
"color": {
"value": "#00379E"
}
},
"dark": {
"1": {
"value": "#f6f6f7"
},
"2": {
"value": "#edeef1"
},
"3": {
"value": "#dee2e8"
},
"4": {
"value": "#c8d0e1"
},
"5": {
"value": "#acbcdc"
},
"6": {
"value": "#7296db"
},
"7": {
"value": "#447ae1"
},
"8": {
"value": "#1058e0"
},
"9": {
"value": "#003aa7"
},
"10": {
"value": "#01318d"
},
"color": {
"value": "#00379E"
}
}
},
"maggioli-editore": {
"light": {
"1": {
"value": "#182542"
},
"2": {
"value": "#173274"
},
"3": {
"value": "#1040b3"
},
"4": {
"value": "#1957eb"
},
"5": {
"value": "#517de4"
},
"6": {
"value": "#93a9df"
},
"7": {
"value": "#b3c0e0"
},
"8": {
"value": "#cdd3e4"
},
"9": {
"value": "#e6e8ed"
},
"10": {
"value": "#edeef1"
},
"color": {
"value": "#0f4ad5"
}
},
"dark": {
"1": {
"value": "#f6f6f7"
},
"2": {
"value": "#edeef1"
},
"3": {
"value": "#dee2ea"
},
"4": {
"value": "#c8d0e3"
},
"5": {
"value": "#acbbdf"
},
"6": {
"value": "#7595e0"
},
"7": {
"value": "#4a78e5"
},
"8": {
"value": "#1454ec"
},
"9": {
"value": "#123ca1"
},
"10": {
"value": "#153581"
},
"color": {
"value": "#0f4ad5"
}
}
}
}
}
}