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.

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", Helvetica, Arial, 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
#666
@text-color-light
The quick brown fox
#848484
rgb(132,132,132)
@text-color-lighter
The quick brown fox
#a3a3a3
rgb(163,163,163)
@text-color-error
The quick brown fox
#e43b34
rgb(228,59,52)
@main-nav-link-text
The quick brown fox
#c1c1c1
rgb(193,193,193)
@main-nav-link-text-hover
The quick brown fox
#e0e0e0
rgb(224,224,224)
@main-nav-link-text-active
The quick brown fox
#fff
rgb(255,255,255)
@navbar-inverse-text
The quick brown fox
#3d3d3d
rgb(61,61,61)
@navbar-inverse-link-color
The quick brown fox
#c1c1c1
rgb(193,193,193)
@navbar-inverse-link-hover-color
The quick brown fox
#fff
rgb(255,255,255)
@state-success-text
The quick brown fox
#3cac30
rgb(60,172,48)
@state-info-text
The quick brown fox
#317495
rgb(49,116,149)
@state-warning-text
The quick brown fox
#f5a934
rgb(245,169,52)
@state-danger-text
The quick brown fox
#e43b34
rgb(228,59,52)
@alert-text
The quick brown fox
#666
rgb(102,102,102)

Line Height

Background Color

Use these background color tokens for setting background colors.

token value/example
@body-bg
#e0e0e0
rgb(224,224,224)
@primary-body-bg
#fff
rgb(225,225,225)
@state-success-bg
#dff0d8
rgb(223,240,216)
@state-info-bg
#d9edf7
rgb(217,237,247)
@state-warning-bg
#fcf8e3
rgb(252,248,227)
@state-danger-bg
#f2dede
rgb(242,222,222)
@action-toolbar-bg
#e0e0e0
rgb(224,224,224)
@action-toolbar-hover-bg
#515151
rgb(81,81,81)
@action-toolbar-active-bg
#3d3d3d
rgb(61,61,61)
@action-toolbar-dropdown-bg
#3d3d3d
rgb(61,61,61)
@action-toolbar-dropdown-hover-bg
#282828
rgb(40,40,40)
@action-toolbar-dropdown-active-bg
#141414
rgb(20,20,20)
@account-switcher-header-bg
#3d3d3d
rgb(61,61,61)
@account-switcher-bg
#282828
rgb(40,40,40)
@account-switcher-active-bg
#141414
rgb(20,20,20)
@alert-success-bg
#dff0d8
rgb(223,240,216)
@alert-info-bg
#d9edf7
rgb(217,237,247)
@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
#282828
rgb(40,40,40)
@main-nav-hover-bg
#202020
rgb(40,40,40)
@main-nav-active-bg
#141414
rgb(20,20,20)
@main-nav-flyout-bg
#282828
rgb(40,40,40)
@main-nav-flyout-hover-bg
#202020
rgb(40,40,40)
@main-nav-flyout-active-bg
#141414
rgb(20,20,20)
@navbar-inverse-bg
#282828
rgb(40,40,40)
@progress-bg
#e0e0e0
rgb(224, 224, 224)
@progress-bar-success-bg
#3cac30
rgb(60, 172, 48)
@progress-bar-info-bg
#43c1e6
rgb(20,20,20)
@progress-bar-warning-bg
#f5a934
rgb(20,20,20)
@progress-bar-danger-bg
#e43b34
rgb(228, 59, 52)
@tag-default-bg
#a3a3a3
rgb(163, 163, 163)
@tag-primary-bg
#3cac30
rgb(60, 172, 48)
@tag-info-bg
#43c1e6
rgb(20,20,20)
@tag-warning-bg
#f5a934
rgb(20,20,20)
@tag-danger-bg
#e43b34
rgb(228, 59, 52)
@tree-list-status-default-bg
#e0e0e0
rgb(224,224,224)
@tree-list-status-warning-bg
#f5a934
rgb(20,20,20)
@tree-list-status-danger-bg
#e43b34
rgb(228, 59, 52)

Border Color

Use these border color tokens for setting border colors.

token value/example
@border-color
#e0e0e0
rgb(224,224,224)
@border-color-dark
#c1c1c1
rgb(193,193,193)
@navbar-inverse-border
#141414
rgb(20,20,20)
@state-success-border
#d6e9c6
rgb(214,233,198)
@state-info-border
#afe4ee
rgb(193,193,193)
@state-warning-border
#f7e1b5
rgb(193,193,193)
@state-danger-border
#ebccd1
rgb(235,204,209)
@navbar-inverse-border
#141414
rgb(20,20,20)

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