Design Tokens - Preview

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

-space-0 (0px)
-space-050 (2px)
-space-100 (4px)
-space-150 (6px)
-space-200 (8px)
-space-250 (10px)
-space-300 (12px)
-space-400 (16px)
-space-500 (20px)
-space-600 (24px)
-space-700 (28px)
-space-800 (32px)
-space-900 (36px)
-space-1000 (40px)
-space-1200 (48px)