Tier 1 Tokens

Utility Tokens

Utility Tokens are tokens used to define the name of a color, sizes, radii and spaces.
Utility Tokens do not change but are used as values in higher Tiered tokens (App-Level Tokens, Component Tokens)

---

Border Widths

Token Name

Token Value

$borderWidths$1

$borderWidths$2

$borderWidths$3

$borderWidths$4

Colors

Token Name

Token Value

$colors$black

$colors$white

$colors$primary50

$colors$primary100

$colors$primary200

$colors$primary300

$colors$primary400

$colors$primary500

$colors$primary600

$colors$primary700

$colors$primary800

$colors$primary900

$colors$gray50

$colors$gray100

$colors$gray200

$colors$gray300

$colors$gray400

$colors$gray500

$colors$gray600

$colors$gray700

$colors$gray800

$colors$gray900

$colors$gray925

$colors$teal

$colors$greenVivid

$colors$orange50

$colors$orange100

$colors$orange200

$colors$orange300

$colors$orange400

$colors$orange500

$colors$orange600

$colors$orange700

$colors$orange800

$colors$orange900

$colors$purple50

$colors$purple100

$colors$purple200

$colors$purple300

$colors$purple400

$colors$purple500

$colors$purple600

$colors$purple700

$colors$purple800

$colors$purple900

$colors$info50

$colors$info100

$colors$info200

$colors$info300

$colors$info400

$colors$info500

$colors$info600

$colors$info700

$colors$info800

$colors$info900

$colors$error50

$colors$error100

$colors$error200

$colors$error300

$colors$error400

$colors$error500

$colors$error600

$colors$error700

$colors$error800

$colors$error900

$colors$warning50

$colors$warning100

$colors$warning200

$colors$warning300

$colors$warning400

$colors$warning500

$colors$warning600

$colors$warning700

$colors$warning800

$colors$warning900

$colors$success50

$colors$success100

$colors$success200

$colors$success300

$colors$success400

$colors$success500

$colors$success600

$colors$success700

$colors$success800

$colors$success900

$colors$disabled50

$colors$disabled100

$colors$disabled200

$colors$disabled300

$colors$disabled400

$colors$disabled500

$colors$disabled600

$colors$disabled700

$colors$disabled800

$colors$disabled900

$colors$debug

$colors$whiteLight

$colors$tealGreenGradient

$colors$tealGreenShadow

$colors$lightShadow

$colors$darkShadow

$colors$semiTransparent

$colors$darkGradient

$colors$darkGradientInverted

Feedback

Token Name

Token Value

$feedback$info50

$feedback$info100

$feedback$info200

$feedback$info300

$feedback$info400

$feedback$info500

$feedback$info600

$feedback$info700

$feedback$info800

$feedback$info900

$feedback$infoForegroundColor

$feedback$error50

$feedback$error100

$feedback$error200

$feedback$error300

$feedback$error400

$feedback$error500

$feedback$error600

$feedback$error700

$feedback$error800

$feedback$error900

$feedback$errorForegroundColor

$feedback$warning50

$feedback$warning100

$feedback$warning200

$feedback$warning300

$feedback$warning400

$feedback$warning500

$feedback$warning600

$feedback$warning700

$feedback$warning800

$feedback$warning900

$feedback$warningForegroundColor

$feedback$success50

$feedback$success100

$feedback$success200

$feedback$success300

$feedback$success400

$feedback$success500

$feedback$success600

$feedback$success700

$feedback$success800

$feedback$success900

$feedback$successForegroundColor

$feedback$disabled50

$feedback$disabled100

$feedback$disabled200

$feedback$disabled300

$feedback$disabled400

$feedback$disabled500

$feedback$disabled600

$feedback$disabled700

$feedback$disabled800

$feedback$disabled900

$feedback$disabledForegroundColor

$feedback$generic

$feedback$genericForegroundColor

Fonts

Token Name

Token Value

$fonts$system

Font Sizes

Token Name

Token Value

$fontSizes$xs

$fontSizes$sm

$fontSizes$md

$fontSizes$lg

$fontSizes$xl

$fontSizes$xxl

$fontSizes$3xl

$fontSizes$4xl

$fontSizes$5xl

$fontSizes$6xl

$fontSizes$7xl

$fontSizes$8xl

$fontSizes$9xl

$fontSizes$h1

$fontSizes$h2

$fontSizes$h3

$fontSizes$h4

$fontSizes$h5

$fontSizes$h6

Font Weights

Token Name

Token Value

$fontWeights$1

$fontWeights$2

$fontWeights$3

$fontWeights$4

$fontWeights$5

$fontWeights$6

$fontWeights$7

$fontWeights$8

Letter Spacings

Token Name

Token Value

$letterSpacings$1

$letterSpacings$2

$letterSpacings$3

$letterSpacings$4

$letterSpacings$5

$letterSpacings$6

$letterSpacings$7

Line Heights

Token Name

Token Value

$lineHeights$xs

$lineHeights$sm

$lineHeights$md

$lineHeights$lg

$lineHeights$xl

$lineHeights$xxl

$lineHeights$3xl

$lineHeights$h1

$lineHeights$h2

$lineHeights$h3

$lineHeights$h4

$lineHeights$h5

$lineHeights$h6

Radii

Token Name

Token Value

$radii$1

$radii$2

$radii$3

$radii$4

$radii$5

Shadows

Token Name

Token Value

$shadows$lightShadow

$shadows$mediumShadow

$shadows$darkShadow

Sizes

Token Name

Token Value

$sizes$1

$sizes$2

$sizes$3

$sizes$4

$sizes$5

$sizes$6

$sizes$7

$sizes$8

$sizes$9

$sizes$px

$sizes$screenHeight

$sizes$screenWidth

$sizes$selectUnfoldWidth

$sizes$mobileMenuHeight

$sizes$menuHeight

Space

Token Name

Token Value

$space$0

$space$1

$space$2

$space$3

$space$4

$space$5

$space$6

$space$7

$space$8

$space$10

$space$12

$space$16

$space$20

$space$24

$space$32

$space$40

$space$48

$space$56

$space$64

$space$px

$space$xs

$space$sm

$space$md

$space$lg

$space$xl

$space$2xl

$space$3xl

$space$4xl

$space$5xl

$space$6xl

$space$full

$space$screenHeight

$space$screenWidth

$space$mobileMenuHeight

$space$menuHeight

$space$inputSpace

Tags

Token Name

Token Value

$tags$common

$tags$candy2021Jersey

$tags$disabled

$tags$uncommon

$tags$rare

$tags$superRare

$tags$epic

$tags$soldOut

$tags$listedForSale

$tags$playOfTheDayBg

$tags$playOfTheDayStroke

$tags$titan

$tags$various

$tags$variousBlendMode

Grid Gutter

Token Name

Token Value

$gridGutter$xs

$gridGutter$sm

$gridGutter$md

$gridGutter$lg

$gridGutter$xl

Grid Container

Token Name

Token Value

$gridContainer$xs

$gridContainer$sm

$gridContainer$md

$gridContainer$lg

$gridContainer$xl

Grid Padding

Token Name

Token Value

$gridPadding$xs

$gridPadding$sm

$gridPadding$md

$gridPadding$lg

$gridPadding$xl

Grid Gap

Token Name

Token Value

$gridGap$gap

$gridGap$gapAmt

JSON Format

{"borderWidths":{"1":"1px","2":"2px","3":"3px","4":"4px"},"colors":{"black":"#000000","white":"#FFFFFF","primary50":"#FFECEB","primary100":"#FEC4C1","primary200":"#FF9E99","primary300":"#FE7C75","primary400":"#FF4C43","primary500":"#FF2A1F","primary600":"#FF0F01","primary700":"#CC0A00","primary800":"#B40A00","primary900":"#670600","gray50":"#DCDEE0","gray100":"#C2C2C2","gray200":"#A9AEB1","gray300":"#999999","gray400":"#858585","gray500":"#71767A","gray600":"#575757","gray700":"#474747","gray800":"#333333","gray900":"#1C1C1C","gray925":"#0f0f0f","teal":"#00FFD1","greenVivid":"#5CFFB6","orange50":"#FFEDD6","orange100":"#FFDAAD","orange200":"#FFCB96","orange300":"#FFB264","orange400":"#FF9E2B","orange500":"#F78800","orange600":"#CC7000","orange700":"#B2701E","orange800":"#7A4300","orange900":"#4D300D","purple50":"#E2D7FE","purple100":"#C8B5F8","purple200":"#A988FB","purple300":"#8254FA","purple400":"#6F39F9","purple500":"#5B1EFA","purple600":"#6742C7","purple700":"#3B1D87","purple800":"#2D1666","purple900":"#2C1565","info50":"#E7F6F8","info100":"#C2F5FF","info200":"#99DEEA","info300":"#70E7FF","info400":"#47E0FF","info500":"#1FDAFF","info600":"#00BDE3","info700":"#009EC1","info800":"#00778F","info900":"#2E6276","error50":"#F4E3DB","error100":"#FFD3C2","error200":"#FFB699","error300":"#F39268","error400":"#FF7B47","error500":"#FF4800","error600":"#E04000","error700":"#B83400","error800":"#B51D09","error900":"#6F3331","warning50":"#FED8AA","warning100":"#FEEEAE","warning200":"#FEE685","warning300":"#FEB55D","warning400":"#FE9F2B","warning500":"#FFB60A","warning600":"#E5A000","warning700":"#B18543","warning800":"#936F38","warning900":"#76592D","success50":"#ECF3EC","success100":"#D6FFED","success200":"#99FFD1","success300":"#5CFFB6","success400":"#1FFF9A","success500":"#70E17B","success600":"#00A359","success700":"#008F4F","success800":"#00733E","success900":"#004022","disabled50":"#E6E6E6","disabled100":"#C9C9C9","disabled200":"#ADADAD","disabled300":"#999999","disabled400":"#858585","disabled500":"#707070","disabled600":"#5C5C5C","disabled700":"#474747","disabled800":"#333333","disabled900":"#1F1F1F","debug":"rgba(255, 76, 67, 0.25)","whiteLight":"rgba(255, 255, 255, 0.8)","tealGreenGradient":"linear-gradient(90deg, $teal -0.25%, $greenVivid 100%)","tealGreenShadow":"0px 0px 10px rgba(92, 255, 182, 0.5)","lightShadow":"0px 0px 10px rgba(255, 255, 255, 0.5)","darkShadow":"0px 0px 10px rgba(0, 0, 0, 0.5)","semiTransparent":"rgba(0,0,0,0.77)","darkGradient":"linear-gradient(180deg, rgba(0, 0, 0, 0) 42.4%, $gray900 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2))","darkGradientInverted":"linear-gradient(180deg, rgb(28,28,28,1) 20%, rgba(0,0,0,0.30) 100%)"},"feedback":{"info50":"#E7F6F8","info100":"#C2F5FF","info200":"#99DEEA","info300":"#70E7FF","info400":"#47E0FF","info500":"#1FDAFF","info600":"#00BDE3","info700":"#009EC1","info800":"#00778F","info900":"#2E6276","infoForegroundColor":"$colors$black","error50":"#F4E3DB","error100":"#FFD3C2","error200":"#FFB699","error300":"#F39268","error400":"#FF7B47","error500":"#FF4800","error600":"#E04000","error700":"#B83400","error800":"#B51D09","error900":"#6F3331","errorForegroundColor":"$colors$black","warning50":"#FED8AA","warning100":"#FEEEAE","warning200":"#FEE685","warning300":"#FEB55D","warning400":"#FE9F2B","warning500":"#FFB60A","warning600":"#E5A000","warning700":"#B18543","warning800":"#936F38","warning900":"#76592D","warningForegroundColor":"$colors$black","success50":"#ECF3EC","success100":"#D6FFED","success200":"#99FFD1","success300":"#5CFFB6","success400":"#1FFF9A","success500":"#70E17B","success600":"#00A359","success700":"#008F4F","success800":"#00733E","success900":"#004022","successForegroundColor":"$colors$black","disabled50":"#E6E6E6","disabled100":"#C9C9C9","disabled200":"#ADADAD","disabled300":"#999999","disabled400":"#858585","disabled500":"#707070","disabled600":"#5C5C5C","disabled700":"#474747","disabled800":"#333333","disabled900":"#1F1F1F","disabledForegroundColor":"$colors$black","generic":"$colors$black","genericForegroundColor":"$colors$white"},"fonts":{"system":"Suisse Intl, ui-sans-serif, system-ui"},"fontSizes":{"xs":"0.563rem","sm":"0.75rem","md":"1rem","lg":"1.375rem","xl":"2rem","xxl":"2.5rem","3xl":"3rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem","7xl":"4.5rem","8xl":"6rem","9xl":"8rem","h1":"$xxl","h2":"$xl","h3":"$lg","h4":"$md","h5":"0.938rem","h6":"0.813rem"},"fontWeights":{"1":100,"2":200,"3":300,"4":400,"5":500,"6":600,"7":700,"8":800},"letterSpacings":{"1":"1px","2":"2px","3":"3px","4":"4px","5":"5px","6":"6px","7":"7px"},"lineHeights":{"xs":"120%","sm":"1rem","md":"120%","lg":"120%","xl":"110%","xxl":"110%","3xl":"110%","h1":"110%","h2":"110$","h3":"110%","h4":"120%","h5":"110%","h6":"110%"},"radii":{"1":"2px","2":"4px","3":"6px","4":"8px","5":"12px"},"shadows":{"lightShadow":"rgba(0,0,0,0.4)","mediumShadow":"rgba(0,0,0,0.6)","darkShadow":"rgba(0,0,0,0.8)"},"sizes":{"1":"8px","2":"12px","3":"16px","4":"20px","5":"22px","6":"28px","7":"36px","8":"48px","9":"60px","px":"1px","screenHeight":"100vh","screenWidth":"100vw","selectUnfoldWidth":"32px","mobileMenuHeight":"48px","menuHeight":"65px"},"space":{"0":"0","1":"0.25rem","2":"0.5rem","3":"0.75rem","4":"1rem","5":"1.25rem","6":"1.5rem","7":"1.75rem","8":"2rem","10":"2.5rem","12":"3rem","16":"4rem","20":"5rem","24":"6rem","32":"8rem","40":"10rem","48":"12rem","56":"14rem","64":"16rem","px":"1px","xs":"20rem","sm":"24rem","md":"28rem","lg":"32rem","xl":"36rem","2xl":"42rem","3xl":"48rem","4xl":"56rem","5xl":"64rem","6xl":"72rem","full":"100%","screenHeight":"100vh","screenWidth":"100vw","mobileMenuHeight":"48px","menuHeight":"65px","inputSpace":"0.625rem"},"tags":{"common":"#8A7355","candy2021Jersey":"#f739a0","disabled":"$colors$gray600","uncommon":"#264D20","rare":"#0247AA","superRare":"#CC1533","epic":"#730389","soldOut":"$colors$disabled200","listedForSale":"$colors$success600","playOfTheDayBg":"#DEA85A","playOfTheDayStroke":"#C29659","titan":"#670600","various":"conic-gradient(\n from 176.93deg at 50% 50%,\n #000000 -24.66deg,\n #ffffff 0.25deg,\n #000000 50.63deg,\n #000000 51.97deg,\n #ffffff 88.12deg,\n #000000 142.5deg,\n #ffffff 196.87deg,\n #000000 256.87deg,\n #ffffff 300deg,\n #000000 335.2deg,\n #000000 335.34deg,\n #ffffff 360.25deg\n ),\n conic-gradient(\n from 176.21deg at 50% 50%,\n #000000 -24.66deg,\n #ffffff 0.25deg,\n #000000 50.63deg,\n #000000 51.97deg,\n #ffffff 88.12deg,\n #000000 142.5deg,\n #ffffff 196.87deg,\n #000000 256.87deg,\n #ffffff 300deg,\n #000000 335.2deg,\n #000000 335.34deg,\n #ffffff 360.25deg\n ),\n radial-gradient(\n 95.11% 95.11% at 36.64% 4.89%,\n #2ad0ca 0%,\n #e1f664 22.92%,\n #feb0fe 46.88%,\n #abb3fc 68.23%,\n #5df7a4 87.5%,\n #58c4f6 100%\n )","variousBlendMode":"screen, difference, normal"},"gridGutter":{"xs":"1rem","sm":"1rem","md":"2rem","lg":"2rem","xl":"2rem"},"gridContainer":{"xs":"100%","sm":"100%","md":"100%","lg":"100%","xl":"1600px"},"gridPadding":{"xs":"1rem","sm":"1rem","md":"2rem","lg":"2rem","xl":"2rem"},"gridGap":{"gap":"30px","gapAmt":30}}