Color Tokens
Color |
Hex |
Token Name |
|
#ffffff |
-color-base-white |
|
#111111 |
-color-base-black |
|
#f1f1f1 |
-color-neutral-100 |
|
#e7e7e7 |
-color-neutral-200 |
|
#cfcfcf |
-color-neutral-300 |
|
#b9b9b9 |
-color-neutral-400 |
|
#a2a2a2 |
-color-neutral-500 |
|
#8c8c8c |
-color-neutral-600 |
|
#777777 |
-color-neutral-700 |
|
#626262 |
-color-neutral-800 |
|
#4e4e4e |
-color-neutral-900 |
|
#3b3b3b |
-color-neutral-1000 |
|
#292929 |
-color-neutral-1100 |
|
#242424 |
-color-neutral-1200 |
|
#feeded |
-color-red-100 |
|
#fde1e1 |
-color-red-200 |
|
#fcc1c1 |
-color-red-300 |
|
#faa1a1 |
-color-red-400 |
|
#f97d7d |
-color-red-500 |
|
#f85151 |
-color-red-600 |
|
#e52929 |
-color-red-700 |
|
#bf2222 |
-color-red-800 |
|
#991b1b |
-color-red-900 |
|
#761515 |
-color-red-1000 |
|
#540f0f |
-color-red-1100 |
|
#330909 |
-color-red-1200 |
|
#feedea |
-color-pumpkin-100 |
|
#fde0db |
-color-pumpkin-200 |
|
#fbbdb1 |
-color-pumpkin-300 |
|
#f9947c |
-color-pumpkin-400 |
|
#f75d07 |
-color-pumpkin-500 |
|
#da5206 |
-color-pumpkin-600 |
|
#bd4705 |
-color-pumpkin-700 |
|
#9f3c05 |
-color-pumpkin-800 |
|
#803004 |
-color-pumpkin-900 |
|
#602403 |
-color-pumpkin-1000 |
|
#401802 |
-color-pumpkin-1100 |
|
#210c01 |
-color-pumpkin-1200 |
|
#fff1ea |
-color-orange-100 |
|
#ffe8db |
-color-orange-200 |
|
#ffcfb1 |
-color-orange-300 |
|
#ffb37b |
-color-orange-400 |
|
#ff9400 |
-color-orange-500 |
|
#e18300 |
-color-orange-600 |
|
#c37100 |
-color-orange-700 |
|
#a45f00 |
-color-orange-800 |
|
#844d00 |
-color-orange-900 |
|
#633a00 |
-color-orange-1000 |
|
#422700 |
-color-orange-1100 |
|
#221400 |
-color-orange-1200 |
|
#fff9ea |
-color-yellow-100 |
|
#fff5db |
-color-yellow-200 |
|
#ffebb1 |
-color-yellow-300 |
|
#ffe07b |
-color-yellow-400 |
|
#ffd600 |
-color-yellow-500 |
|
#e1bd00 |
-color-yellow-600 |
|
#c3a400 |
-color-yellow-700 |
|
#a48a00 |
-color-yellow-800 |
|
#846f00 |
-color-yellow-900 |
|
#635300 |
-color-yellow-1000 |
|
#423800 |
-color-yellow-1100 |
|
#221d00 |
-color-yellow-1200 |
|
#f3faea |
-color-lime-100 |
|
#eaf7db |
-color-lime-200 |
|
#d3efb2 |
-color-lime-300 |
|
#bbe77d |
-color-lime-400 |
|
#a0df18 |
-color-lime-500 |
|
#8dc515 |
-color-lime-600 |
|
#7aab12 |
-color-lime-700 |
|
#678f0f |
-color-lime-800 |
|
#53730c |
-color-lime-900 |
|
#3e5709 |
-color-lime-1000 |
|
#2a3a06 |
-color-lime-1100 |
|
#151e03 |
-color-lime-1200 |
|
#ebf9ec |
-color-green-100 |
|
#dcf5de |
-color-green-200 |
|
#b3ebb7 |
-color-green-300 |
|
#7fe089 |
-color-green-400 |
|
#23d643 |
-color-green-500 |
|
#1fbd3b |
-color-green-600 |
|
#1ba433 |
-color-green-700 |
|
#178a2b |
-color-green-800 |
|
#126f23 |
-color-green-900 |
|
#0e531a |
-color-green-1000 |
|
#093811 |
-color-green-1100 |
|
#051d09 |
-color-green-1200 |
|
#eaf8f5 |
-color-teal-100 |
|
#dbf3ee |
-color-teal-200 |
|
#b1e7dd |
-color-teal-300 |
|
#7bdbca |
-color-teal-400 |
|
#00cfb7 |
-color-teal-500 |
|
#00b7a2 |
-color-teal-600 |
|
#009e8c |
-color-teal-700 |
|
#008576 |
-color-teal-800 |
|
#006b5f |
-color-teal-900 |
|
#005147 |
-color-teal-1000 |
|
#003630 |
-color-teal-1100 |
|
#001c19 |
-color-teal-1200 |
|
#ebf9fe |
-color-aqua-100 |
|
#dcf4fd |
-color-aqua-200 |
|
#b3e9fc |
-color-aqua-300 |
|
#80defa |
-color-aqua-400 |
|
#27d3f9 |
-color-aqua-500 |
|
#22bbdc |
-color-aqua-600 |
|
#1ea2bf |
-color-aqua-700 |
|
#1988a0 |
-color-aqua-800 |
|
#146d81 |
-color-aqua-900 |
|
#0f5261 |
-color-aqua-1000 |
|
#0a3741 |
-color-aqua-1100 |
|
#051c21 |
-color-aqua-1200 |
|
#f2f4fd |
-color-blue-100 |
|
#e9ecfc |
-color-blue-200 |
|
#d0d7fa |
-color-blue-300 |
|
#b5c0f7 |
-color-blue-400 |
|
#94a5f4 |
-color-blue-500 |
|
#6986f2 |
-color-blue-600 |
|
#105cef |
-color-blue-700 |
|
#0f54da |
-color-blue-800 |
|
#0d4bc3 |
-color-blue-900 |
|
#0b41a9 |
-color-blue-1000 |
|
#09358a |
-color-blue-1100 |
|
#072561 |
-color-blue-1200 |
|
#f3f2fb |
-color-indigo-100 |
|
#eae9f9 |
-color-indigo-200 |
|
#d3d1f2 |
-color-indigo-300 |
|
#bab5eb |
-color-indigo-400 |
|
#9d95e4 |
-color-indigo-500 |
|
#786bdd |
-color-indigo-600 |
|
#411bd5 |
-color-indigo-700 |
|
#3b19c3 |
-color-indigo-800 |
|
#3516ae |
-color-indigo-900 |
|
#2e1397 |
-color-indigo-1000 |
|
#26107b |
-color-indigo-1100 |
|
#1a0b57 |
-color-indigo-1200 |
|
#f5f2fe |
-color-violet-100 |
|
#eee9fd |
-color-violet-200 |
|
#dcd1fb |
-color-violet-300 |
|
#c9b6f9 |
-color-violet-400 |
|
#b396f6 |
-color-violet-500 |
|
#9a6cf4 |
-color-violet-600 |
|
#7c20f2 |
-color-violet-700 |
|
#711ddd |
-color-violet-800 |
|
#651ac5 |
-color-violet-900 |
|
#5817ab |
-color-violet-1000 |
|
#48128c |
-color-violet-1100 |
|
#330d63 |
-color-violet-1200 |
|
#f9f3fe |
-color-purple-100 |
|
#f5eafd |
-color-purple-200 |
|
#e9d3fa |
-color-purple-300 |
|
#deb9f8 |
-color-purple-400 |
|
#d29bf6 |
-color-purple-500 |
|
#c575f3 |
-color-purple-600 |
|
#b73cf1 |
-color-purple-700 |
|
#a737dc |
-color-purple-800 |
|
#9531c5 |
-color-purple-900 |
|
#812aaa |
-color-purple-1000 |
|
#6a238b |
-color-purple-1100 |
|
#4b1862 |
-color-purple-1200 |
|
#fdf3fb |
-color-magenta-100 |
|
#fcebf8 |
-color-magenta-200 |
|
#f9d4f1 |
-color-magenta-300 |
|
#f6bcea |
-color-magenta-400 |
|
#f39fe3 |
-color-magenta-500 |
|
#f07cdb |
-color-magenta-600 |
|
#ed4ad3 |
-color-magenta-700 |
|
#d844c1 |
-color-magenta-800 |
|
#c13cac |
-color-magenta-900 |
|
#a83495 |
-color-magenta-1000 |
|
#892b7a |
-color-magenta-1100 |
|
#611e56 |
-color-magenta-1200 |
|
#fef3f5 |
-color-pink-100 |
|
#fdeaee |
-color-pink-200 |
|
#fad3dc |
-color-pink-300 |
|
#f8b9c9 |
-color-pink-400 |
|
#f69bb3 |
-color-pink-500 |
|
#f3759a |
-color-pink-600 |
|
#f13b7d |
-color-pink-700 |
|
#dc3672 |
-color-pink-800 |
|
#c53066 |
-color-pink-900 |
|
#aa2a58 |
-color-pink-1000 |
|
#8b2248 |
-color-pink-1100 |
|
#621833 |
-color-pink-1200 |
|
#f2f4fd |
-color-primary-100 |
|
#e9ecfc |
-color-primary-200 |
|
#d0d7fa |
-color-primary-300 |
|
#b5c0f7 |
-color-primary-400 |
|
#94a5f4 |
-color-primary-500 |
|
#6986f2 |
-color-primary-600 |
|
#105cef |
-color-primary-700 |
|
#0f54da |
-color-primary-800 |
|
#0d4bc3 |
-color-primary-900 |
|
#0b41a9 |
-color-primary-1000 |
|
#09358a |
-color-primary-1100 |
|
#072561 |
-color-primary-1200 |
|
#105cef |
-color-primary-base |
|
#ebf9fe |
-color-info-100 |
|
#dcf4fd |
-color-info-200 |
|
#b3e9fc |
-color-info-300 |
|
#80defa |
-color-info-400 |
|
#27d3f9 |
-color-info-500 |
|
#22bbdc |
-color-info-600 |
|
#1ea2bf |
-color-info-700 |
|
#1988a0 |
-color-info-800 |
|
#146d81 |
-color-info-900 |
|
#0f5261 |
-color-info-1000 |
|
#0a3741 |
-color-info-1100 |
|
#051c21 |
-color-info-1200 |
|
#1ea2bf |
-color-info-base |
|
#fff1ea |
-color-warning-100 |
|
#ffe8db |
-color-warning-200 |
|
#ffcfb1 |
-color-warning-300 |
|
#ffb37b |
-color-warning-400 |
|
#ff9400 |
-color-warning-500 |
|
#e18300 |
-color-warning-600 |
|
#c37100 |
-color-warning-700 |
|
#a45f00 |
-color-warning-800 |
|
#844d00 |
-color-warning-900 |
|
#633a00 |
-color-warning-1000 |
|
#422700 |
-color-warning-1100 |
|
#221400 |
-color-warning-1200 |
|
#c37100 |
-color-warning-base |
|
#feeded |
-color-danger-100 |
|
#fde1e1 |
-color-danger-200 |
|
#fcc1c1 |
-color-danger-300 |
|
#faa1a1 |
-color-danger-400 |
|
#f97d7d |
-color-danger-500 |
|
#f85151 |
-color-danger-600 |
|
#e52929 |
-color-danger-700 |
|
#bf2222 |
-color-danger-800 |
|
#991b1b |
-color-danger-900 |
|
#761515 |
-color-danger-1000 |
|
#540f0f |
-color-danger-1100 |
|
#330909 |
-color-danger-1200 |
|
#e52929 |
-color-danger-base |
|
#ebf9ec |
-color-success-100 |
|
#dcf5de |
-color-success-200 |
|
#b3ebb7 |
-color-success-300 |
|
#7fe089 |
-color-success-400 |
|
#23d643 |
-color-success-500 |
|
#1fbd3b |
-color-success-600 |
|
#1ba433 |
-color-success-700 |
|
#178a2b |
-color-success-800 |
|
#126f23 |
-color-success-900 |
|
#0e531a |
-color-success-1000 |
|
#093811 |
-color-success-1100 |
|
#051d09 |
-color-success-1200 |
|
#1ba433 |
-color-success-base |
Font Size Tokens
-font-size-275 (11px)
-font-size-300 (12px)
-font-size-350 (14px)
-font-size-400 (16px)
-font-size-450 (18px)
-font-size-500 (20px)
-font-size-550 (22px)
-font-size-600 (24px)
-font-size-650 (26px)
-font-size-700 (28px)
-font-size-800 (32px)
-font-size-900 (36px)
Font Weight Tokens
-font-weight-thin (100)
-font-weight-extra-light (200)
-font-weight-light (300)
-font-weight-regular (400)
-font-weight-medium (500)
-font-weight-semi-bold (600)
-font-weight-bold (700)
-font-weight-extra-bold (800)
-font-weight-black (900)
Letter Spacing Tokens
-letter-spacing-0 (0px)
-letter-spacing-1 (1px)
-letter-spacing-2 (1.5px)
Box Shadow Tokens
-elevation-100
-elevation-200
-elevation-300
-elevation-400
-elevation-500
-elevation-600
-elevation-700
-elevation-800
Border Size Tokens
-border-size-0 (0px)
-border-size-025 (1px)
-border-size-050 (2px)
-border-size-075 (3px)
Border Radius Tokens
-border-radius-0 (0px)
-border-radius-050 (2px)
-border-radius-100 (4px)
-border-radius-200 (8px)
-border-radius-300 (12px)
-border-radius-400 (16px)
-border-radius-800 (32px)
-border-radius-1000 (40px)
-border-radius-full (999px)
Border Style Tokens
-border-style-none (none)
-border-style-solid (solid)
-border-style-dashed (dashed)
-border-style-dotted (dotted)
Space Tokens