Search

Tokens

All tokens

Color

Token Example Value
$ids-color-palette-amber-10
#FEF2E5
$ids-color-palette-amber-20
#FDDFBD
$ids-color-palette-amber-30
#FCC888
$ids-color-palette-amber-40
#FBAF50
$ids-color-palette-amber-50
#FA9601
$ids-color-palette-amber-60
#F98300
$ids-color-palette-amber-70
#DF6F00
$ids-color-palette-amber-80
#CD6200
$ids-color-palette-amber-90
#BB5500
$ids-color-palette-amber-100
#A14100
$ids-color-palette-amethyst-10
#F1EBFC
$ids-color-palette-amethyst-20
#DDCBF7
$ids-color-palette-amethyst-30
#C2A1F1
$ids-color-palette-amethyst-40
#A876EB
$ids-color-palette-amethyst-50
#8D4BE5
$ids-color-palette-amethyst-60
#7928E1
$ids-color-palette-amethyst-70
#6C23C9
$ids-color-palette-amethyst-80
#591DA8
$ids-color-palette-amethyst-90
#4E1A91
$ids-color-palette-amethyst-100
#3B1470
$ids-color-palette-azure-10
#E6F1FD
$ids-color-palette-azure-20
#BEDCFA
$ids-color-palette-azure-30
#8ABFF7
$ids-color-palette-azure-40
#55A3F3
$ids-color-palette-azure-50
#1C86EF
$ids-color-palette-azure-60
#0072ED
$ids-color-palette-azure-70
#0066D4
$ids-color-palette-azure-80
#0054B1
$ids-color-palette-azure-90
#004A99
$ids-color-palette-azure-100
#003876
$ids-color-palette-emerald-10
#EBF9F1
$ids-color-palette-emerald-20
#CBEFDC
$ids-color-palette-emerald-30
#A1E4BF
$ids-color-palette-emerald-40
#78D8A3
$ids-color-palette-emerald-50
#4DCC86
$ids-color-palette-emerald-60
#2AC371
$ids-color-palette-emerald-70
#25AF65
$ids-color-palette-emerald-80
#1F9254
$ids-color-palette-emerald-90
#1C7F49
$ids-color-palette-emerald-100
#156138
$ids-color-palette-graphite-10
#EEEEEE
$ids-color-palette-graphite-20
#D3D3D3
$ids-color-palette-graphite-30
#B1B1B1
$ids-color-palette-graphite-40
#8F8F8F
$ids-color-palette-graphite-50
#6C6C6C
$ids-color-palette-graphite-60
#535353
$ids-color-palette-graphite-70
#4A4A4A
$ids-color-palette-graphite-80
#3E3E3E
$ids-color-palette-graphite-90
#363636
$ids-color-palette-graphite-100
#292929
$ids-color-palette-ruby-10
#FBE7E8
$ids-color-palette-ruby-20
#F5C3C4
$ids-color-palette-ruby-30
#EE9496
$ids-color-palette-ruby-40
#E66467
$ids-color-palette-ruby-50
#DF3539
$ids-color-palette-ruby-60
#DA1217
$ids-color-palette-ruby-70
#C31014
$ids-color-palette-ruby-80
#A30D11
$ids-color-palette-ruby-90
#8D0B0E
$ids-color-palette-ruby-100
#6C080B
$ids-color-palette-slate-10
#F5F5F5
$ids-color-palette-slate-20
#E0E0E1
$ids-color-palette-slate-30
#C5C5C9
$ids-color-palette-slate-40
#BBBBBF
$ids-color-palette-slate-50
#8E8E95
$ids-color-palette-slate-60
#6F6F76
$ids-color-palette-slate-70
#525257
$ids-color-palette-slate-80
#3B3B3F
$ids-color-palette-slate-90
#28282A
$ids-color-palette-slate-100
#161618
$ids-color-palette-classic-slate-10
#DEE1E8
$ids-color-palette-classic-slate-20
#C8CBD4
$ids-color-palette-classic-slate-30
#ABAEB7
$ids-color-palette-classic-slate-40
#888B94
$ids-color-palette-classic-slate-50
#656871
$ids-color-palette-classic-slate-60
#50535A
$ids-color-palette-classic-slate-70
#414247
$ids-color-palette-classic-slate-80
#313236
$ids-color-palette-classic-slate-90
#212224
$ids-color-palette-classic-slate-100
#1c1819
$ids-color-palette-turquoise-10
#ECF8F8
$ids-color-palette-turquoise-20
#CFEEEE
$ids-color-palette-turquoise-30
#A8E1E1
$ids-color-palette-turquoise-40
#82D4D4
$ids-color-palette-turquoise-50
#5CC6C7
$ids-color-palette-turquoise-60
#40BDBE
$ids-color-palette-turquoise-70
#39A9AA
$ids-color-palette-turquoise-80
#2F8D8E
$ids-color-palette-turquoise-90
#297B7B
$ids-color-palette-turquoise-100
#1F5E5E
$ids-color-palette-white
#ffffff
$ids-color-palette-black
#000000
$ids-color-status-base
#0066D4
$ids-color-status-caution
#FFD100
$ids-color-status-danger
#DA1217
$ids-color-status-error
#DA1217
$ids-color-status-success
#2AC371
$ids-color-status-warning
#F98300
$ids-color-status-info
#0064D4
$ids-color-status-status-01
#DA1217
$ids-color-status-status-02
#F98300
$ids-color-status-status-03
#FFD100
$ids-color-status-status-04
#2AC371
$ids-color-status-status-05
#0064D4
$ids-color-brand-primary-lighter
#55A3F3
$ids-color-brand-primary-base
#0072ED
$ids-color-brand-primary-alt
#0066D4
$ids-color-brand-primary-contrast
#ffffff
$ids-color-brand-secondary-lighter
#BBBBBF
$ids-color-brand-secondary-base
#6F6F76
$ids-color-brand-secondary-alt
#525257
$ids-color-brand-secondary-contrast
#28282A
$ids-color-boxshadow-base
#F5F5F5
$ids-color-border-lighter
#6F6F76
$ids-color-border-base
#3B3B3F
$ids-color-border-darker
#28282A
$ids-color-font-base
#161618
$ids-color-font-info
#3B3B3F
$ids-color-font-muted
#6F6F76
$ids-color-icon-base
#3B3B3F
$ids-color-body-base
#ffffff
$ids-color-body-lightest
#ffffff
$body-color-primary-background
#ffffff
$body-color-primary-font
#161618
$body-color-secondary-background
#ffffff
$button-color-primary-active-background
#0066D4
$button-color-primary-disabled-background
#8ABFF7
$button-color-primary-disabled-border
#8ABFF7
$button-color-primary-disabled-font
#ffffff
$button-color-primary-disabled-icon
#ffffff
$button-color-primary-focus-background
#0072ED
$button-color-primary-focus-border
#0072ED
$button-color-primary-hover-background
#0066D4
$button-color-primary-initial-background
#0072ED
$button-color-primary-initial-font
#ffffff
$button-color-primary-initial-icon
#ffffff
$button-color-secondary-active-background
#BBBBBF
$button-color-secondary-disabled-background
#E0E0E1
$button-color-secondary-disabled-border
#E0E0E1
$button-color-secondary-disabled-font
#3B3B3F
$button-color-secondary-disabled-icon
#3B3B3F
$button-color-secondary-focus-background
#0072ED
$button-color-secondary-focus-border
#0072ED
$button-color-secondary-hover-background
#BBBBBF
$button-color-secondary-initial-background
#C5C5C9
$button-color-secondary-initial-font
#3B3B3F
$button-color-secondary-initial-icon
#3B3B3F
$button-color-tertiary-active-font
#000000
$button-color-tertiary-active-icon
#000000
$button-color-tertiary-disabled-font
#C5C5C9
$button-color-tertiary-disabled-icon
#C5C5C9
$button-color-tertiary-focus-font
#0072ED
$button-color-tertiary-hover-font
#000000
$button-color-tertiary-initial-background
transparent
$button-color-tertiary-initial-font
#525257
$button-color-tertiary-initial-icon
#525257
$checkbox-color-checked-disabled-arrow
#f4f4f4
$checkbox-color-checked-disabled-background
#C5C5C9
$checkbox-color-checked-disabled-border
#C5C5C9
$checkbox-color-checked-disabled-font
#BBBBBF
$checkbox-color-checked-initial-arrow
#ffffff
$checkbox-color-checked-initial-background
#0072ED
$checkbox-color-checked-initial-border
#3B3B3F
$checkbox-color-unchecked-disabled-arrow
#f4f4f4
$checkbox-color-unchecked-disabled-background
#E0E0E1
$checkbox-color-unchecked-disabled-border
#C5C5C9
$checkbox-color-unchecked-disabled-font
#BBBBBF
$checkbox-color-unchecked-hover-border
#28282A
$checkbox-color-unchecked-initial-background
#ffffff
$checkbox-color-unchecked-initial-border
#3B3B3F
$checkbox-color-unchecked-initial-font
#161618
$dropdown-color-initial-boxshadow-base
#F5F5F5
$dropdown-color-initial-font
#161618
$dropdown-color-initial-icon
#161618
$dropdown-color-selected-background
#0072ED
$dropdown-color-selected-font
#ffffff
$header-color-primary-background
#0066D4
$icon-color-fill
#3B3B3F
$input-color-disabled-background
#ffffff
$input-color-disabled-border
#C5C5C9
$input-color-disabled-font
#C5C5C9
$input-color-focus-background
transparent
$input-color-focus-border
#0072ED
$input-color-focus-font
#161618
$input-color-hover-background
transparent
$input-color-hover-border
#28282A
$input-color-initial-background
#ffffff
$input-color-initial-border
#BBBBBF
$input-color-initial-font
#000000
$input-color-initial-label
#3B3B3F
$input-color-initial-placeholder
#BBBBBF
$input-color-readonly-background
#E0E0E1
$input-color-readonly-border
#BBBBBF
$input-color-readonly-font
#000000
$label-color-initial-font
#3B3B3F
$link-color-disabled-font
#6F6F76
$link-color-hover-font
#0066D4
$link-color-initial-font
#0072ED
$link-color-visited-font
#7928E1
$list-color-divider-border
#BBBBBF
$list-color-item-hover-background
#E6F1FD
$list-color-item-initial-font
#3B3B3F
$list-color-item-selected-background
#BBBBBF
$list-color-heading-initial-font
#6F6F76
$notification-color-alert-initial-background
#FEF2E5
$notification-color-alert-initial-font
#3B3B3F
$notification-color-alert-hover-font
#161618
$notification-color-error-initial-background
#FBE7E8
$notification-color-error-initial-font
#3B3B3F
$notification-color-error-hover-font
#161618
$notification-color-info-initial-background
#E6F1FD
$notification-color-info-initial-font
#3B3B3F
$notification-color-info-hover-font
#161618
$notification-color-success-initial-background
#EBF9F1
$notification-color-success-initial-font
#3B3B3F
$notification-color-success-hover-font
#161618
$radio-color-checked-disabled-background
#ffffff
$radio-color-checked-disabled-border
#6F6F76
$radio-color-checked-initial-background
#ffffff
$radio-color-checked-initial-fill
#0072ED
$radio-color-unchecked-disabled-background
#ffffff
$radio-color-unchecked-disabled-border
#6F6F76
$radio-color-unchecked-disabled-label
#6F6F76
$radio-color-unchecked-hover-border
#28282A
$radio-color-unchecked-initial-background
#ffffff
$radio-color-unchecked-initial-border
#3B3B3F
$radio-color-unchecked-initial-label
#161618

Font

Token Value
$ids-font-family-base ‘source sans pro’, helvetica, arial, sans-serif
$ids-font-family-monospace ‘source code pro’, monospace
$button-font-align center
$button-font-decoration none
$button-font-family ‘source sans pro’, helvetica, arial, sans-serif
$button-font-size 1.6rem
$button-font-transform capitalize
$button-font-weight 600
$link-font-initial-decoration underline

Size

Token Value
$ids-size-font-base 1.6rem
$ids-size-font-xxs 1.2rem
$ids-size-font-xs 1.4rem
$ids-size-font-sm 1.6rem
$ids-size-font-md 2.2rem
$ids-size-font-lg 2.8rem
$ids-size-font-xl 4.2rem
$ids-size-font-px-10 1rem
$ids-size-font-px-12 1.2rem
$ids-size-font-px-14 1.4rem
$ids-size-font-px-16 1.6rem
$ids-size-font-px-20 2.0rem
$ids-size-font-px-24 2.4rem
$ids-size-font-px-28 2.8rem
$ids-size-font-px-32 3.2rem
$ids-size-font-px-40 4.0rem
$ids-size-font-px-48 4.8rem
$ids-size-font-px-60 6.0rem
$ids-size-font-px-72 7.2rem
$ids-size-icon-height 17px
$ids-size-icon-width 22px
$button-size-border-radius 6px
$button-size-border-width 1px
$button-size-height 38px
$button-size-font-line-height normal
$button-size-padding-x 30px
$button-size-padding-y 0
$button-size-regular-height 38px
$button-size-compact-height 28px
$checkbox-size-border-radius 2px
$checkbox-size-box-height 17px
$checkbox-size-box-width 17px
$checkbox-size-check-height 11px
$checkbox-size-check-width 5px
$dropdown-size-border-radius 6px
$dropdown-size-border-width 1px
$dropdown-size-font 1.6rem
$dropdown-size-height-max 300px
$dropdown-size-height-min 30px
$dropdown-size-regular-padding 8px 30px 8px 10px
$dropdown-size-compact-padding 4px 16px 4px 5px
$dropdown-size-padding 8px 30px 8px 10px
$form-size-field-regular-margin-bottom 20px
$form-size-field-compact-margin-bottom 12px
$icon-size-height 17px
$icon-size-width 22px
$input-size-border-radius 6px
$input-size-border-width 1px
$input-size-height 3.4rem
$input-size-font-line-height 16px
$input-size-regular-height 3.8rem
$input-size-regular-padding 0 10px
$input-size-regular-font-size 1.6rem
$input-size-compact-height 2.8rem
$input-size-compact-padding 0 5px
$input-size-compact-font-size 1.4rem
$input-size-padding-x 12px
$input-size-padding-y 8px
$input-size-width-lg 400px
$input-size-width-md 300px
$input-size-width-sm 150px
$input-size-width-xs 75px
$label-size-regular-margin 0 0 8px 0
$label-size-regular-font-size 1.6rem
$label-size-compact-margin 0 0 6px 0
$label-size-compact-font-size 1.4rem
$radio-size-border-radius 50%
$radio-size-inner-height 4px
$radio-size-inner-width 4px
$radio-size-outer-height 14px
$radio-size-outer-width 14px
$textarea-size-regular-height 120px
$textarea-size-compact-height 80px

Number

Token Value
$ids-number-font-weight-light 300
$ids-number-font-weight-base 400
$ids-number-font-weight-bold 600
$ids-number-font-line-height-xs 1.44
$ids-number-font-line-height-sm 1.5
$ids-number-font-line-height-md 1.45
$ids-number-font-line-height-lg 1.43
$ids-number-font-line-height-xl 1.33
$ids-number-opacity-disabled 0.5
$ids-number-spacing-base 8px
$ids-number-border-radius-sm 2px
$ids-number-border-radius-md 6px

Breakpoint

Token Value
$breakpoint-lg 1280px
$breakpoint-md 840px
$breakpoint-sm 600px
$breakpoint-xl 1440px
$breakpoint-xs 360px

Shadow

Token Value
$button-shadow-focus-boxshadow 0 0 0 2px #F5F5F5, 0 0 0 3px #0072ED
$checkbox-shadow-focus-boxshadow 0 0 0 1px #F5F5F5, 0 0 0 2px #0072ED
$dropdown-shadow-initial-boxshadow 0 5px 5px #F5F5F5
$input-shadow-initial-boxshadow none
$radio-shadow-focus-boxshadow 0 0 0 1px #F5F5F5, 0 0 0 2px #0072ED, 0 0 4px 5px rgba(54, 138, 192, 0.03)