Tokens

A complete list of Protocol tokens and their values. The source code for all tokens can be found here.

Name	Value
`$border-radius-xs`	`2px`
`$border-radius-sm`	`4px`
`$border-radius-md`	`8px`
`$border-radius-lg`	`16px`
`$box-shadow-sm`	`0 8px 12px 1px rgba(29, 17, 51, .04), 0 3px 16px 2px rgba(9, 32, 77, .12), 0 5px 10px -3px rgba(29, 17, 51, .12)`
`$box-shadow-md`	`0 16px 24px 2px rgba(29, 17, 51, .04), 0 6px 32px 4px rgba(9, 32, 77, .12), 0 8px 12px -5px rgba(29, 17, 51, .12)`
`$box-shadow-lg`	`0 24px 38px 3px rgba(29, 17, 51, .04), 0 10px 48px 8px rgba(9, 32, 77, .12), 0 12px 16px -6px rgba(29, 17, 51, .12)`
`$color-green-05`	`#e3fff3`
`$color-green-10`	`#d1ffee`
`$color-green-20`	`#b3ffe3`
`$color-green-30`	`#88ffd1`
`$color-green-40`	`#54ffbd`
`$color-green-50`	`#3fe1b0`
`$color-green-60`	`#2ac3a2`
`$color-green-70`	`#008787`
`$color-green-80`	`#005e5e`
`$color-green-90`	`#08403f`
`$color-blue-05`	`#aaf2ff`
`$color-blue-10`	`#80ebff`
`$color-blue-20`	`#00ddff`
`$color-blue-30`	`#00b3f4`
`$color-blue-40`	`#0090ed`
`$color-blue-50`	`#0060df`
`$color-blue-60`	`#0250bb`
`$color-blue-70`	`#054096`
`$color-blue-80`	`#073072`
`$color-blue-90`	`#09204d`
`$color-violet-05`	`#e7dfff`
`$color-violet-10`	`#d9bfff`
`$color-violet-20`	`#cb9eff`
`$color-violet-30`	`#c689ff`
`$color-violet-40`	`#ab71ff`
`$color-violet-50`	`#9059ff`
`$color-violet-60`	`#7542e5`
`$color-violet-70`	`#592acb`
`$color-violet-80`	`#45278d`
`$color-violet-90`	`#321c64`
`$color-purple-05`	`#f7e2ff`
`$color-purple-10`	`#f6b8ff`
`$color-purple-20`	`#f68fff`
`$color-purple-30`	`#f770ff`
`$color-purple-40`	`#d74cf0`
`$color-purple-50`	`#b833e1`
`$color-purple-60`	`#952bb9`
`$color-purple-70`	`#722291`
`$color-purple-80`	`#4e1a69`
`$color-purple-90`	`#2b1141`
`$color-pink-05`	`#ffdef0`
`$color-pink-10`	`#ffb4db`
`$color-pink-20`	`#ff8ac5`
`$color-pink-30`	`#ff6bba`
`$color-pink-40`	`#ff4aa2`
`$color-pink-50`	`#ff298a`
`$color-pink-60`	`#e31587`
`$color-pink-70`	`#c60084`
`$color-pink-80`	`#7f145b`
`$color-pink-90`	`#50134b`
`$color-red-05`	`#ffdfe7`
`$color-red-10`	`#ffbdc5`
`$color-red-20`	`#ff9aa2`
`$color-red-30`	`#ff848b`
`$color-red-40`	`#ff6a75`
`$color-red-50`	`#ff4f5e`
`$color-red-60`	`#e22850`
`$color-red-70`	`#c50042`
`$color-red-80`	`#810220`
`$color-red-90`	`#440306`
`$color-orange-05`	`#fff4de`
`$color-orange-10`	`#ffd5b2`
`$color-orange-20`	`#ffb587`
`$color-orange-30`	`#ffa266`
`$color-orange-40`	`#ff8a50`
`$color-orange-50`	`#ff7139`
`$color-orange-60`	`#e25920`
`$color-orange-70`	`#cc3d00`
`$color-orange-80`	`#9e280b`
`$color-orange-90`	`#7c1504`
`$color-yellow-05`	`#ffffcc`
`$color-yellow-10`	`#ffff98`
`$color-yellow-20`	`#ffea80`
`$color-yellow-30`	`#ffd567`
`$color-yellow-40`	`#ffbd4f`
`$color-yellow-50`	`#ffa436`
`$color-yellow-60`	`#e27f2e`
`$color-yellow-70`	`#c45a27`
`$color-yellow-80`	`#a7341f`
`$color-yellow-90`	`#960e18`
`$color-light-gray-05`	`#ffffff`
`$color-light-gray-10`	`#f9f9fb`
`$color-light-gray-20`	`#f0f0f4`
`$color-light-gray-30`	`#e0e0e6`
`$color-light-gray-40`	`#cfcfd8`
`$color-light-gray-50`	`#bfbfc9`
`$color-light-gray-60`	`#afafba`
`$color-light-gray-70`	`#9f9fad`
`$color-light-gray-80`	`#8f8f9e`
`$color-light-gray-90`	`#80808f`
`$color-dark-gray-05`	`#5b5b66`
`$color-dark-gray-10`	`#52525e`
`$color-dark-gray-20`	`#4a4a55`
`$color-dark-gray-30`	`#42414d`
`$color-dark-gray-40`	`#3a3944`
`$color-dark-gray-50`	`#32313c`
`$color-dark-gray-60`	`#2b2a33`
`$color-dark-gray-70`	`#23222b`
`$color-dark-gray-80`	`#1c1b22`
`$color-dark-gray-90`	`#15141a`
`$color-marketing-gray-10`	`#f9f9fa`
`$color-marketing-gray-20`	`#ededf0`
`$color-marketing-gray-30`	`#cdcdd4`
`$color-marketing-gray-40`	`#b1b1bc`
`$color-marketing-gray-50`	`#9595a2`
`$color-marketing-gray-60`	`#7a7a8b`
`$color-marketing-gray-70`	`#5e5e72`
`$color-marketing-gray-80`	`#42425a`
`$color-marketing-gray-90`	`#1f2033`
`$color-marketing-gray-99`	`#20123a`
`$color-ink-05`	`#393473`
`$color-ink-10`	`#342f6d`
`$color-ink-20`	`#312a64`
`$color-ink-30`	`#2e255d`
`$color-ink-40`	`#2b2156`
`$color-ink-50`	`#291d4f`
`$color-ink-60`	`#271948`
`$color-ink-70`	`#241541`
`$color-ink-80`	`#20123a`
`$color-ink-90`	`#1d1133`
`$color-black`	`#000000`
`$color-white`	`#ffffff`
`$color-link`	`#0060df`
`$color-link-hover`	`#0250bb`
`$color-link-visited`	`#b833e1`
`$color-link-visited-hover`	`#952bb9`
`$color-moz-neon-blue`	`#00ffff`
`$color-moz-lemon-yellow`	`#fff44f`
`$color-moz-warm-red`	`#ff4f5e`
`$color-moz-neon-green`	`#54ffbd`
`$color-moz-dark-purple`	`#6e008b`
`$color-moz-dark-green`	`#005e5e`
`$color-moz-dark-blue`	`#00458b`
`$color-moz-dark-gray`	`#959595`
`$color-moz-light-gray`	`#e7e5e2`
`$content-xs`	`304px`
`$content-sm`	`432px`
`$content-md`	`688px`
`$content-lg`	`928px`
`$content-xl`	`1152px`
`$content-max`	`1440px`
`$screen-xs`	`320px`
`$screen-sm`	`480px`
`$screen-md`	`768px`
`$screen-lg`	`1024px`
`$screen-xl`	`1312px`
`$font-stack-base`	`Inter, X-LocaleSpecific, sans-serif`
`$font-stack-firefox`	`Metropolis, Inter, X-LocaleSpecific, sans-serif`
`$font-stack-mozilla`	`'Zilla Slab', Inter, X-LocaleSpecific, sans-serif`
`$font-stack-mono`	`Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace`
`$gradient-warm`	`linear-gradient(45deg, #F5156C, #FF3750, #FF4F5E, #FF7139, #FF980E)`
`$gradient-cool`	`linear-gradient(90deg, #3A8EE6, #9059FF, #C139E6)`
`$gradient-highlight`	`linear-gradient(90deg, #FFFFFF, #FFF44F)`
`$mq-xs`	`(min-width: 320px)`
`$mq-sm`	`(min-width: 480px)`
`$mq-md`	`(min-width: 768px)`
`$mq-lg`	`(min-width: 1024px)`
`$mq-xl`	`(min-width: 1312px)`
`$mq-short`	`(max-height: 599px)`
`$mq-tall`	`(min-height: 600px)`
`$mq-high-res`	`only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi)`
`$spacing-xs`	`4px`
`$spacing-sm`	`8px`
`$spacing-md`	`16px`
`$spacing-lg`	`24px`
`$spacing-xl`	`32px`
`$spacing-2xl`	`48px`
`$layout-2xs`	`16px`
`$layout-xs`	`24px`
`$layout-sm`	`32px`
`$layout-md`	`48px`
`$layout-lg`	`64px`
`$layout-xl`	`96px`
`$layout-2xl`	`192px`