Tokens

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

Name Value
$mq-xs screen and (min-width: 320px)
$mq-sm screen and (min-width: 480px)
$mq-md screen and (min-width: 768px)
$mq-lg screen and (min-width: 1056px)
$mq-xl screen and (min-width: 1312px)
$mq-short (max-height: 600px)
$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)
$content-xs 304px
$content-sm 464px
$content-md 736px
$content-lg 992px
$content-xl 1248px
$content-max 1420px
$screen-xs 320px
$screen-sm 480px
$screen-md 768px
$screen-lg 1056px
$screen-xl 1312px
$color-black #000000
$color-white #ffffff
$color-off-black #20123a
$color-pink-5 #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-5 #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-5 #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-5 #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-green-5 #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-5 #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-5 #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-5 #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-gray-10 #f9f9fa
$color-gray-20 #ededf0
$color-gray-30 #cdcdd4
$color-gray-40 #b1b1bc
$color-gray-50 #9595a3
$color-gray-60 #7a7a8b
$color-gray-70 #5e5e72
$color-gray-80 #42425a
$color-gray-90 #202340
$color-link #0060df
$color-link-hover #0250bb
$color-link-visited #b833e1
$color-link-visited-hover #952bb9
$font-stack-sans 'Open Sans', X-LocaleSpecific, sans-serif
$font-stack-serif 'Zilla Slab', 'Open Sans', X-LocaleSpecific, 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)
$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 160px