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

Font Size

Use these sizing tokens for font sizes.

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)
anchor link to top of page