Ready
Tokens
Ready
Tokens
Ready
Tokens
Animation
Name
Value
Name
Value
Name
Value
--anim-ease-in-out
ease-in-out
--anim-ease-in-out
ease-in-out
--anim-ease-in-out
ease-in-out
--anim-ease-out
ease-out
--anim-ease-out
ease-out
--anim-ease-out
ease-out
--anim-ease-in
ease-in
--anim-ease-in
ease-in
--anim-ease-in
ease-in
--anim-duration-lg
500ms
--anim-duration-lg
500ms
--anim-duration-lg
500ms
--anim-duration-md
300ms
--anim-duration-md
300ms
--anim-duration-md
300ms
--anim-duration-sm
100ms
--anim-duration-sm
100ms
--anim-duration-sm
100ms
Borders
Name
Value
Name
Value
Name
Value
b-radius-none
border-radius: 0px
b-radius-none
border-radius: 0px
b-radius-none
border-radius: 0px
b-radius-noneRight
border-top-right-radius: 0px; border- bottom-right-radius: 0px;
b-radius-noneRight
border-top-right-radius: 0px; border- bottom-right-radius: 0px;
b-radius-noneRight
border-top-right-radius: 0px; border- bottom-right-radius: 0px;
b-radius-noneLeft
border-top-left-radius: 0px; border-bottom-left-radius: 0px;
b-radius-noneLeft
border-top-left-radius: 0px; border-bottom-left-radius: 0px;
b-radius-noneLeft
border-top-left-radius: 0px; border-bottom-left-radius: 0px;
b-radius-sm
border-radius: 4px
b-radius-sm
border-radius: 4px
b-radius-sm
border-radius: 4px
b-radius-md
border-radius: 8px
b-radius-md
border-radius: 8px
b-radius-md
border-radius: 8px
b-radius-lg
border-radius: 12px
b-radius-lg
border-radius: 12px
b-radius-lg
border-radius: 12px
b-radius-xl
border-radius: 20px
b-radius-xl
border-radius: 20px
b-radius-xl
border-radius: 20px
b-radius-circle
border-radius: 50%
b-radius-circle
border-radius: 50%
b-radius-circle
border-radius: 50%
border-charcoal-grey
--charcoal-grey
border-charcoal-grey
--charcoal-grey
border-charcoal-grey
--charcoal-grey
border-slate-grey
--slate-grey
border-slate-grey
--slate-grey
border-slate-grey
--slate-grey
border-smoke-grey
--smoke-grey
border-smoke-grey
--smoke-grey
border-smoke-grey
--smoke-grey
border-graphite-grey
--graphite-grey
border-graphite-grey
--graphite-grey
border-graphite-grey
--graphite-grey
border-concrete-grey
--concrete-grey
border-concrete-grey
--concrete-grey
border-concrete-grey
--concrete-grey
border-cloud-grey
--cloud-grey
border-cloud-grey
--cloud-grey
border-cloud-grey
--cloud-grey
border-fog-grey
--fog-grey
border-fog-grey
--fog-grey
border-fog-grey
--fog-grey
border-powder-blue
--powder-blue
border-powder-blue
--powder-blue
border-powder-blue
--powder-blue
border-{color}
border-width: 1px
border-{color}
border-width: 1px
border-{color}
border-width: 1px
border-t-{color}
border-top-width: 1px
border-t-{color}
border-top-width: 1px
border-t-{color}
border-top-width: 1px
border-b-{color}
border-bottom-width: 1px
border-b-{color}
border-bottom-width: 1px
border-b-{color}
border-bottom-width: 1px
border-l-{color}
border-left-width: 1px
border-l-{color}
border-left-width: 1px
border-l-{color}
border-left-width: 1px
border-r-{color}
border-right-width: 1px
border-r-{color}
border-right-width: 1px
border-r-{color}
border-right-width: 1px
border-y-{color}
border-top-width: 1px; border-bottom-width: 1px
border-y-{color}
border-top-width: 1px; border-bottom-width: 1px
border-y-{color}
border-top-width: 1px; border-bottom-width: 1px
border-x-{color}
border-left-width: 1px; border-right-width: 1px
border-x-{color}
border-left-width: 1px; border-right-width: 1px
border-x-{color}
border-left-width: 1px; border-right-width: 1px
Color
Name
Value
Name
Value
Name
Value
--navy-blue
#1158AC
--navy-blue
#1158AC
--navy-blue
#1158AC
--cobalt-blue
#1F67BC
--cobalt-blue
#1F67BC
--cobalt-blue
#1F67BC
--sapphire-blue
#2273D2
--sapphire-blue
#2273D2
--sapphire-blue
#2273D2
--powder-blue
#E6F5FA
--powder-blue
#E6F5FA
--powder-blue
#E6F5FA
--pale-blue
#EFF9FD
--pale-blue
#EFF9FD
--pale-blue
#EFF9FD
--marigold-yellow
#FEB92F
--marigold-yellow
#FEB92F
--marigold-yellow
#FEB92F
--honey-yellow
#FFD787
--honey-yellow
#FFD787
--honey-yellow
#FFD787
--mellow-yellow
#FFEAC1
--mellow-yellow
#FFEAC1
--mellow-yellow
#FFEAC1
--pale-yellow
#FFF9E6
--pale-yellow
#FFF9E6
--pale-yellow
#FFF9E6
--forest-green
#13632D
--forest-green
#13632D
--forest-green
#13632D
--hunter-green
#298347
--hunter-green
#298347
--hunter-green
#298347
--jade-green
#28A960
--jade-green
#28A960
--jade-green
#28A960
--sea-green
#2E924F
--sea-green
#2E924F
--sea-green
#2E924F
--shamrock-green
#2FC570
--shamrock-green
#2FC570
--shamrock-green
#2FC570
--spring-green
#6DD69B
--spring-green
#6DD69B
--spring-green
#6DD69B
--mint-green
#A7E6C3
--mint-green
#A7E6C3
--mint-green
#A7E6C3
--pale-green
#ECF6EF
--pale-green
#ECF6EF
--pale-green
#ECF6EF
--amber-orange
#C25400
--amber-orange
#C25400
--amber-orange
#C25400
--tangerine-orange
#E9721A
--tangerine-orange
#E9721A
--tangerine-orange
#E9721A
--carrot-orange
#FB8A00
--carrot-orange
#FB8A00
--carrot-orange
#FB8A00
--pale-orange
#FEF4E6
--pale-orange
#FEF4E6
--pale-orange
#FEF4E6
--ruby-red
#B10303
--ruby-red
#B10303
--ruby-red
#B10303
--chili-red
#DC0303
--chili-red
#DC0303
--chili-red
#DC0303
--punch-red
#F60101
--punch-red
#F60101
--punch-red
#F60101
--coral-red
#FF4949
--coral-red
#FF4949
--coral-red
#FF4949
--salmon-pink
#FF8686
--salmon-pink
#FF8686
--salmon-pink
#FF8686
--peachy-pink
#FFB6B6
--peachy-pink
#FFB6B6
--peachy-pink
#FFB6B6
--pale-pink
#FFF3F3
--pale-pink
#FFF3F3
--pale-pink
#FFF3F3
--charcoal-grey
#0A0D10
--charcoal-grey
#0A0D10
--charcoal-grey
#0A0D10
--slate-grey
#3A3D40
--slate-grey
#3A3D40
--slate-grey
#3A3D40
--anchor-grey
#54575A
--anchor-grey
#54575A
--anchor-grey
#54575A
--smoke-grey
#6A6B6D
--smoke-grey
#6A6B6D
--smoke-grey
#6A6B6D
--graphite-grey
#838383
--graphite-grey
#838383
--graphite-grey
#838383
--steel-grey
#969696
--steel-grey
#969696
--steel-grey
#969696
--concrete-grey
#ACACAC
--concrete-grey
#ACACAC
--concrete-grey
#ACACAC
--cloud-grey
#D3D3D3
--cloud-grey
#D3D3D3
--cloud-grey
#D3D3D3
--fog-grey
#E9E9E9
--fog-grey
#E9E9E9
--fog-grey
#E9E9E9
--silver-grey
#C0C0C0
--silver-grey
#C0C0C0
--silver-grey
#C0C0C0
--pearl-grey
#F0F0F0
--pearl-grey
#F0F0F0
--pearl-grey
#F0F0F0
--alabaster-grey
#F7F7F7
--alabaster-grey
#F7F7F7
--alabaster-grey
#F7F7F7
--pure-white
#FFFFFF
--pure-white
#FFFFFF
--pure-white
#FFFFFF
Shadows
Name
Value
Name
Value
Name
Value
--shadow-4
box-shadow: 0px 4px 8px 4px rgba(10, 13, 16, 0.12);
--shadow-4
box-shadow: 0px 4px 8px 4px rgba(10, 13, 16, 0.12);
--shadow-4
box-shadow: 0px 4px 8px 4px rgba(10, 13, 16, 0.12);
--shadow-3
box-shadow: 0px 3px 6px 3px rgba(10, 13, 16, 0.11);
--shadow-3
box-shadow: 0px 3px 6px 3px rgba(10, 13, 16, 0.11);
--shadow-3
box-shadow: 0px 3px 6px 3px rgba(10, 13, 16, 0.11);
--shadow-2
box-shadow: 0px 2px 4px 2px rgba(10, 13, 16, 0.1);
--shadow-2
box-shadow: 0px 2px 4px 2px rgba(10, 13, 16, 0.1);
--shadow-2
box-shadow: 0px 2px 4px 2px rgba(10, 13, 16, 0.1);
--shadow-1
box-shadow: 0px 1px 2px 1px rgba(10, 13, 16, 0.09);
--shadow-1
box-shadow: 0px 1px 2px 1px rgba(10, 13, 16, 0.09);
--shadow-1
box-shadow: 0px 1px 2px 1px rgba(10, 13, 16, 0.09);
--shadow-0
box-shadow: none;
--shadow-0
box-shadow: none;
--shadow-0
box-shadow: none;
Spacing
Name
Value
Name
Value
Name
Value
--core-10
40px
--core-10
40px
--core-10
40px
--core-9
36px
--core-9
36px
--core-9
36px
--core-8
32px
--core-8
32px
--core-8
32px
--core-7
28px
--core-7
28px
--core-7
28px
--core-6
24px
--core-6
24px
--core-6
24px
--core-5
20px
--core-5
20px
--core-5
20px
--core-4
16px
--core-4
16px
--core-4
16px
--core-3
12px
--core-3
12px
--core-3
12px
--core-2
8px
--core-2
8px
--core-2
8px
--core-1
4px
--core-1
4px
--core-1
4px
Typography
Name
Value
Name
Value
Name
Value
type-color-pure-white
#FFFFFF
type-color-pure-white
#FFFFFF
type-color-pure-white
#FFFFFF
type-color-cloud-grey
#D3D3D3
type-color-cloud-grey
#D3D3D3
type-color-cloud-grey
#D3D3D3
type-color-concrete-grey
#ACACAC
type-color-concrete-grey
#ACACAC
type-color-concrete-grey
#ACACAC
type-color-smoke-grey
#6A6B6D
type-color-smoke-grey
#6A6B6D
type-color-smoke-grey
#6A6B6D
type-color-slate-grey
#3A3D40
type-color-slate-grey
#3A3D40
type-color-slate-grey
#3A3D40
type-color-charcoal-grey
#0A0D10
type-color-charcoal-grey
#0A0D10
type-color-charcoal-grey
#0A0D10
type-size-12
12px
type-size-12
12px
type-size-12
12px
type-size-14
14px
type-size-14
14px
type-size-14
14px
type-size-16
16px
type-size-16
16px
type-size-16
16px
type-size-20
20px
type-size-20
20px
type-size-20
20px
type-size-26
26px
type-size-26
26px
type-size-26
26px
type-size-32
32px
type-size-32
32px
type-size-32
32px
type-size-60
60px
type-size-60
60px
type-size-60
60px
line-height-16
16px
line-height-16
16px
line-height-16
16px
line-height-20
20px
line-height-20
20px
line-height-20
20px
line-height-24
24px
line-height-24
24px
line-height-24
24px
line-height-32
32px
line-height-32
32px
line-height-32
32px
line-height-36
36px
line-height-36
36px
line-height-36
36px
line-height-72
72px
line-height-72
72px
line-height-72
72px
font-weight-300
300 (light)
font-weight-300
300 (light)
font-weight-300
300 (light)
font-weight-400
400 (regular)
font-weight-400
400 (regular)
font-weight-400
400 (regular)
font-weight-600
600 (semibold)
font-weight-600
600 (semibold)
font-weight-600
600 (semibold)
font-weight-700
700 (bold)
font-weight-700
700 (bold)
font-weight-700
700 (bold)