What are Tokens?

Design tokens help us maintain consistent and scalable UI pattern library development. They are essentially name-value pairs that describe visual design attributes of our UI patterns. We've exposed them (as opposed to leaving them buried in our source files) so that designers and developers may easily reference defined design attributes.

Cyclops main colors

Most Cyclops colors are derived from this palette.

token	value/example
`@brand-primary`	`#0047BB rgb(0,71,187)`
`@brand-secondary`	`#48D597 rgb(72,213,151)`
`@brand-success`	`#48D597 rgb(72,213,151)`
`@brand-info`	`#4288F3 rgb(66,136,243)`
`@brand-warning`	`#FDB630 rgb(253,182,48)`
`@brand-danger`	`#E43B34 rgb(228,59,52)`

Font

Use these font weights to change how thin or heavy the weight is for our font.

token	value/example
`@font-family`	The quick brown fox `"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Sans-Serif;`
`@font-weight-light`	The quick brown fox `300`
`@font-weight-regular`	The quick brown fox `400`
`@font-weight-bold`	The quick brown fox `600`

token	value/example
`@font-size-small`	The quick brown fox `12px`
`@font-size-regular`	The quick brown fox `14px`
`@font-size-large`	The quick brown fox `18px`
`@font-size-h1`	The quick brown fox `36px`
`@font-size-h2`	The quick brown fox `30px`
`@font-size-h3`	The quick brown fox `24px`
`@font-size-h4`	The quick brown fox `18px`
`@font-size-h5`	The quick brown fox `13px`
`@font-size-h6`	The quick brown fox `12px`

Text Color

Use these text color tokens for setting text colors.

token	value/example
`@text-color`	The quick brown fox `#242526 rgb(36,37,38)`
`@text-color-light`	The quick brown fox `#72767A rgb(114,118,122)`
`@text-color-lighter`	The quick brown fox `#8E9399 rgb(142,147,153)`
`@text-color-error`	The quick brown fox `#E43B34 rgb(228,59,52)`
`@account-switcher-text`	The quick brown fox `#8E9399 rgb(142,147,153)`
`@account-switcher-input-text`	The quick brown fox `#8E9399 rgb(142,147,153)`
`@account-switcher-header-text`	The quick brown fox `#72767A rgb(114,118,122)`
`@main-nav-link-text`	The quick brown fox `#242526 rgb(36,37,38)`
`@main-nav-link-text-hover`	The quick brown fox `#242526 rgb(36,37,38)`
`@main-nav-link-text-active`	The quick brown fox `#242526 rgb(36,37,38)`
`@state-success-text`	The quick brown fox `#27B875 rgb(39,184,117)`
`@state-info-text`	The quick brown fox `#005BED rgb(0,91,237)`
`@state-warning-text`	The quick brown fox `#FDB630 rgb(253,182,48)`
`@state-danger-text`	The quick brown fox `#E43B34 rgb(228,59,52)`
`@alert-text`	The quick brown fox `#242526 rgb(36,37,38)`

Line Height

Use these tokens for setting line height values.

token	value/example
`@line-height-base`	Relative to font size: `1.428571429 times font size.`
`@line-height-computed`	`20px`

Background Color

Use these background color tokens for setting background colors.

token	value/example
`@body-bg`	`#F8F9F9 rgb(248,249,249)`
`@primary-body-bg`	`#fff rgb(225,225,225)`
`@state-success-bg`	`#DAF5E9 rgb(218,245,233)`
`@state-info-bg`	`#E6F0FF rgb(230,240,255)`
`@state-warning-bg`	`#FCF8E3 rgb(252,248,227)`
`@state-danger-bg`	`#F2DEDE rgb(242,222,222)`
`@action-toolbar-bg`	`#EDF0F2 rgb(237,240,242)`
`@action-toolbar-hover-bg`	`#DEE1E5 rgb(222,225,229)`
`@action-toolbar-active-bg`	`#D0D4D9 rgb(208,212,217)`
`@action-toolbar-dropdown-bg`	`#242526 rgb(36,37,38)`
`@action-toolbar-dropdown-hover-bg`	`#242526 rgb(36,37,38)`
`@action-toolbar-dropdown-active-bg`	`#242526 rgb(36,37,38)`
`@account-switcher-header-bg`	`#242526 rgb(36,37,38)`
`@account-switcher-bg`	`#242526 rgb(36,37,38)`
`@account-switcher-active-bg`	`#000 rgb(0,0,0)`
`@alert-success-bg`	`#DAF5E9 rgb(218,245,233)`
`@alert-info-bg`	`#E6F0FF rgb(230,240,255)`
`@alert-warning-bg`	`#FCF8E3 rgb(252,248,227)`
`@alert-danger-bg`	`#F2DEDE rgb(242,222,222)`
`@alert-instruction-bg`	`#fff rgb(255,255,255)`
`@main-nav-bg`	`#FFF rgb(255,255,255)`
`@main-nav-hover-bg`	`#F8F9F9 rgb(248,249,249)`
`@main-nav-active-bg`	`#EDF0F2 rgb(237,240,242)`
`@main-nav-flyout-bg`	`#FFF rgb(255,255,255)`
`@main-nav-flyout-hover-bg`	`#F8F9F9 rgb(248,249,249)`
`@main-nav-flyout-active-bg`	`#EDF0F2 rgb(237,240,242)`
`@navbar-inverse-bg`	`#282828 rgb(40,40,40)`
`@progress-bg`	`#DEE1E5 rgb(222,225,229)`
`@progress-bar-success-bg`	`#48D597 rgb(72,213,151)`
`@progress-bar-info-bg`	`#4288F3 rgb(66,136,243)`
`@progress-bar-warning-bg`	`#FDB630 rgb(253,182,48)`
`@progress-bar-danger-bg`	`#E43B34 rgb(228,59,52)`
`@tag-default-bg`	`#8E9399 rgb(142,147,153)`
`@tag-primary-bg`	`#0047BB rgb(0,71,187)`
`@tag-success-bg`	`#48D597 rgb(72,213,151)`
`@tag-info-bg`	`#4288F3 rgb(66,136,243)`
`@tag-warning-bg`	`#FDB630 rgb(253,182,48)`
`@tag-danger-bg`	`#E43B34 rgb(228,59,52)`
`@tree-list-status-default-bg`	`#DEE1E5 rgb(222,225,229)`
`@tree-list-status-warning-bg`	`#FDB630 rgb(253,182,48)`
`@tree-list-status-danger-bg`	`#E43B34 rgb(228,59,52)`
`@navbar-inverse-border`	`#141414 rgb(20,20,20)`

Border Width

Use these border width tokens for setting border widths.

token	value/example
`@border-width-0`	`b-width-0` `0`
`@border-width-1`	`b-width-0` `1px`
`@border-width-2`	`b-width-0` `2px`
`@border-width-3`	`b-width-0` `3px`

Border Color

Use these border color tokens for setting border colors.

token	value/example
`@border-color`	`#DEE1E5 rgb(222,225,229)`
`@border-color-dark`	`#8E9399 rgb(142,147,153)`
`@navbar-inverse-border`	`#141414 rgb(20,20,20)`
`@state-success-border`	`#C6F0D6 rgb(198,240,214)`
`@state-info-border`	`#B3DEFF rgb(179,222,255)`
`@state-warning-border`	`#F5D9A5 rgb(245,217,165)`
`@state-danger-border`	`#EBCCD1 rgb(235,204,209)`

Border Radius

Use these border radius tokens for setting border radii.

token	value/example
`@border-radius-small`	`3px`
`@border-radius-base`	`4px`
`@border-radius-large`	`6px`
`@border-radius-circle`	`50%`

Spacing

Use these spacing tokens for setting margin and padding values.

token	value/example
`@space-xxs`	`5px`
`@space-xs`	`10px`
`@space-sm`	`20px`
`@space-md`	`30px`
`@space-lg`	`40px`
`@space-xl`	`60px`

Media Queries

Cyclops is mobile first, so media queries are set with minimum screen widths. Use the following media query tokens to set media query width ranges.

token	value/example
`@screen-xs-min`	`only screen and (min-width: 480px)`
`@screen-sm-min`	`only screen and (min-width: 768px)`
`@screen-md-min`	`only screen and (min-width: 992px)`
`@screen-lg-min`	`only screen and (min-width: 1200px)`
`@screen-xl-min`	`only screen and (min-width: 1800px)`