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`

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)`