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 304px
$screen-sm 464px
$screen-md 736px
$screen-lg 992px
$screen-xl 1248px
$brand-primary #000000
$brand-secondary #ffffff
$brand-neon-blue #00ffff
$brand-lemon-yellow #fff44f
$brand-warm-red #ff4f5e
$brand-neon-green #54ffbd
$brand-dark-purple #6e008b
$brand-dark-green #005e5e
$brand-dark-blue #00458b
$color-black #000000
$color-white #ffffff
$color-magenta-50 #ff1ad9
$color-magenta-60 #ed00b5
$color-magenta-70 #b5007f
$color-magenta-80 #7d004f
$color-magenta-90 #440027
$color-purple-30 #c069ff
$color-purple-40 #ad3bff
$color-purple-50 #9400ff
$color-purple-60 #8000d7
$color-purple-70 #6200a4
$color-purple-80 #440071
$color-purple-90 #25003e
$color-blue-40 #45a1ff
$color-blue-50 #0a84ff
$color-blue-60 #0060df
$color-blue-70 #003eaa
$color-blue-80 #002275
$color-blue-90 #000f40
$color-teal-50 #00feff
$color-teal-60 #00c8d7
$color-teal-70 #008ea4
$color-teal-80 #005a71
$color-teal-90 #002d3e
$color-green-50 #30e60b
$color-green-60 #12bc00
$color-green-70 #058b00
$color-green-80 #006504
$color-green-90 #003706
$color-yellow-50 #ffe900
$color-yellow-60 #d7b600
$color-yellow-70 #a47f00
$color-yellow-80 #715100
$color-yellow-90 #3e2800
$color-red-50 #ff0039
$color-red-60 #d70022
$color-red-70 #a4000f
$color-red-80 #5a0002
$color-red-90 #3e0200
$color-orange-50 #ff9400
$color-orange-60 #d76e00
$color-orange-70 #a44900
$color-orange-80 #712b00
$color-orange-90 #3e1300
$color-gray-10 #f9f9fa
$color-gray-20 #ededf0
$color-gray-30 #d7d7db
$color-gray-40 #b1b1b3
$color-gray-50 #737373
$color-gray-60 #4a4a4f
$color-gray-70 #38383d
$color-gray-80 #2a2a2e
$color-gray-90 #0c0c0d
$color-link #0060df
$color-link-hover #003eaa
$color-link-visited #8000d7
$color-link-visited-hover #6200a4
$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-greyscale linear-gradient(90deg, #000000, #ffffff)
$gradient-focus linear-gradient(45deg, #4A1475, #671878, #C42482, #FF271D)
$gradient-helloworld radial-gradient(33deg, #4A1475, #671878, #C42482, #FF271D)
$spacing-xs 4px
$spacing-sm 8px
$spacing-md 16px
$spacing-lg 24px
$spacing-xl 32px
$spacing-2xl 48px
$spacing-base 16px
$padding-xs 4px
$padding-sm 8px
$padding-md 16px
$padding-lg 24px
$padding-xl 32px
$padding-2xl 48px
$padding-base 16px
$margin-xs 4px
$margin-sm 8px
$margin-md 16px
$margin-lg 24px
$margin-xl 32px
$margin-2xl 48px
$margin-base 16px
$layout-2xs 16px
$layout-xs 24px
$layout-sm 32px
$layout-md 48px
$layout-lg 64px
$layout-xl 96px
$layout-2xl 160px
$layout-base 48px