Kate Spade® Design Tokens

Theme: Germany

version 5.26.0-feature-release.5

Assets

Themes

main branch

Coach - North America

Coach - Europe

Coach - Germany

Coach - Japan

Coach Outlet - North America

Coach Outlet - Japan

Coachtopia - North America

Coachtopia - Japan

Kate Spade - North America

Kate Spade - Europe

Kate Spade - Germany

Kate Spade - Japan

Stuart Weitzman - North America

next branch

Coach - North America

Coach - Europe

Coach - Germany

Coach - Japan

Coach Outlet - North America

Coach Outlet - Japan

Coachtopia - North America

Coachtopia - Japan

Kate Spade - North America

Kate Spade - Europe

Kate Spade - Germany

Kate Spade - Japan

Stuart Weitzman - North America

feature-release branch

Coach - North America

Coach - Europe

Coach - Germany

Coach - Japan

Coach Outlet - North America

Coach Outlet - Japan

Coachtopia - North America

Coachtopia - Japan

Kate Spade - North America

Kate Spade - Europe

Kate Spade - Germany

Kate Spade - Japan

Stuart Weitzman - North America

Variables

Color

Identifier Value Example
  • css--color-primary
  • scss$color-primary 
#101820
  • css--color-secondary
  • scss$color-secondary 
#ffffff
  • css--color-background-cta-primary
  • scss$color-background-cta-primary 
#427e2b
  • css--color-background-cta-hover
  • scss$color-background-cta-hover 
#575757
  • css--color-background-cta-focus
  • scss$color-background-cta-focus 
#101820
  • css--color-background-cta-disabled
  • scss$color-background-cta-disabled 
#c4c4c4
  • css--color-background-cta-pill-bg
  • scss$color-background-cta-pill-bg 
#f8f8f8
  • css--color-background-filter-pill-default
  • scss$color-background-filter-pill-default 
#ffffff
  • css--color-background-filter-pill-selected
  • scss$color-background-filter-pill-selected 
#ffffff
  • css--color-background-filter-pill-hover
  • scss$color-background-filter-pill-hover 
#ffffff
  • css--color-background-filter-pill-focus
  • scss$color-background-filter-pill-focus 
#ffffff
  • css--color-background-filter-pill-disabled
  • scss$color-background-filter-pill-disabled 
#c4c4c4
  • css--color-background-filter-pill-counter
  • scss$color-background-filter-pill-counter 
#000000
  • css--color-background-filter-pill-applied
  • scss$color-background-filter-pill-applied 
#e1e1e1
  • css--color-border-cta-primary
  • scss$color-border-cta-primary 
#427e2b
  • css--color-border-filter-pill-default
  • scss$color-border-filter-pill-default 
#e1e1e1
  • css--color-border-filter-pill-selected
  • scss$color-border-filter-pill-selected 
#000000
  • css--color-border-filter-pill-hover
  • scss$color-border-filter-pill-hover 
#000000
  • css--color-border-filter-pill-focus
  • scss$color-border-filter-pill-focus 
#d50032
  • css--color-border-filter-pill-disabled
  • scss$color-border-filter-pill-disabled 
#c4c4c4
  • css--color-text-cta-primary
  • scss$color-text-cta-primary 
#ffffff
  • css--color-text-filter-pill-default
  • scss$color-text-filter-pill-default 
#4a4a4a
  • css--color-text-filter-pill-selected
  • scss$color-text-filter-pill-selected 
#000000
  • css--color-text-filter-pill-hover
  • scss$color-text-filter-pill-hover 
#000000
  • css--color-text-filter-pill-focus
  • scss$color-text-filter-pill-focus 
#000000
  • css--color-text-filter-pill-disabled
  • scss$color-text-filter-pill-disabled 
#949494
  • css--color-text-filter-pill-counter
  • scss$color-text-filter-pill-counter 
#ffffff
  • css--color-text-filter-pill-applied
  • scss$color-text-filter-pill-applied 
#000000
  • css--color-neutral-base
  • scss$color-neutral-base 
#949494
  • css--color-neutral-medium
  • scss$color-neutral-medium 
#575757
  • css--color-neutral-light
  • scss$color-neutral-light 
#fcf7e6
  • css--color-neutral-light-2
  • scss$color-neutral-light-2 
#e1e1e1
  • css--color-neutral-light-3
  • scss$color-neutral-light-3 
#c5c5c5
  • css--color-neutral-dark
  • scss$color-neutral-dark 
#4a4a4a
  • css--color-error-primary
  • scss$color-error-primary 
#d50032
  • css--color-inactive
  • scss$color-inactive 
#c4c4c4
  • css--color-scrim-light
  • scss$color-scrim-light 
rgba(255, 255, 255, 0.5)
  • css--color-scrim-dark
  • scss$color-scrim-dark 
rgba(0, 0, 0, 0.75)
  • css--color-standout-primary
  • scss$color-standout-primary 
#101820
  • css--color-success-primary
  • scss$color-success-primary 
#427e2b
  • css--color-white-10
  • scss$color-white-10 
rgba(255, 255, 255, 0.1)
  • css--color-white-20
  • scss$color-white-20 
rgba(255, 255, 255, 0.2)
  • css--color-white-30
  • scss$color-white-30 
rgba(255, 255, 255, 0.3)
  • css--color-white-40
  • scss$color-white-40 
rgba(255, 255, 255, 0.4)
  • css--color-white-50
  • scss$color-white-50 
rgba(255, 255, 255, 0.5)
  • css--color-white-60
  • scss$color-white-60 
rgba(255, 255, 255, 0.6)
  • css--color-white-70
  • scss$color-white-70 
rgba(255, 255, 255, 0.7)
  • css--color-white-80
  • scss$color-white-80 
rgba(255, 255, 255, 0.8)
  • css--color-white-90
  • scss$color-white-90 
rgba(255, 255, 255, 0.9)
  • css--color-white-base
  • scss$color-white-base 
#ffffff
  • css--color-grey-10
  • scss$color-grey-10 
#e5e5e5
  • css--color-grey-20
  • scss$color-grey-20 
#cccccc
  • css--color-grey-30
  • scss$color-grey-30 
#b2b2b2
  • css--color-grey-40
  • scss$color-grey-40 
#999999
  • css--color-grey-50
  • scss$color-grey-50 
#808080
  • css--color-grey-60
  • scss$color-grey-60 
#666666
  • css--color-grey-70
  • scss$color-grey-70 
#4c4c4c
  • css--color-grey-80
  • scss$color-grey-80 
#333333
  • css--color-grey-90
  • scss$color-grey-90 
#191919
  • css--color-grey-base
  • scss$color-grey-base 
#808080
  • css--color-black-10
  • scss$color-black-10 
rgba(0, 0, 0, 0.1)
  • css--color-black-20
  • scss$color-black-20 
rgba(0, 0, 0, 0.2)
  • css--color-black-30
  • scss$color-black-30 
rgba(0, 0, 0, 0.3)
  • css--color-black-40
  • scss$color-black-40 
rgba(0, 0, 0, 0.4)
  • css--color-black-50
  • scss$color-black-50 
rgba(0, 0, 0, 0.5)
  • css--color-black-60
  • scss$color-black-60 
rgba(0, 0, 0, 0.6)
  • css--color-black-70
  • scss$color-black-70 
rgba(0, 0, 0, 0.7)
  • css--color-black-80
  • scss$color-black-80 
rgba(0, 0, 0, 0.8)
  • css--color-black-90
  • scss$color-black-90 
rgba(0, 0, 0, 0.9)
  • css--color-black-base
  • scss$color-black-base 
#000000
  • css--color-green-500
  • scss$color-green-500 
#057550
  • css--color-carousel-indicator-bg
  • scss$color-carousel-indicator-bg 
#ffffff
  • css--color-icon-filter-pill-default
  • scss$color-icon-filter-pill-default 
#000000
  • css--color-icon-filter-pill-disabled
  • scss$color-icon-filter-pill-disabled 
#949494
  • css--color-icon-filter-pill-applied
  • scss$color-icon-filter-pill-applied 
#000000
  • css--color-cream
  • scss$color-cream 
#fcf7e6
  • css--color-pink
  • scss$color-pink 
#e11976
  • css--color-cream-light
  • scss$color-cream-light 
#fefcf6
  • css--color-ks-green
  • scss$color-ks-green 
#427e2b
  • css--color-product-image-bg
  • scss$color-product-image-bg 
#f7f7f7
  • css--color-campaign-promo-banner-pdp-bg
  • scss$color-campaign-promo-banner-pdp-bg 
#fbf1f3
  • css--color-cta-atc-pdp-default
  • scss$color-cta-atc-pdp-default 
#ffffff
  • css--color-cta-atc-pdp-background
  • scss$color-cta-atc-pdp-background 
#427e2b
  • css--color-cta-atc-pdp-hover-default
  • scss$color-cta-atc-pdp-hover-default 
#ffffff
  • css--color-cta-atc-pdp-hover-background
  • scss$color-cta-atc-pdp-hover-background 
#575757
  • css--color-cta-atc-pdp-focus-default
  • scss$color-cta-atc-pdp-focus-default 
#ffffff
  • css--color-cta-atc-pdp-focus-background
  • scss$color-cta-atc-pdp-focus-background 
#575757
  • css--color-cta-atc-pdp-disable-default
  • scss$color-cta-atc-pdp-disable-default 
#ffffff
  • css--color-cta-atc-pdp-disable-background
  • scss$color-cta-atc-pdp-disable-background 
#c4c4c4
  • css--color-cta-atc-pdp-animation-background
  • scss$color-cta-atc-pdp-animation-background 
#104c00
  • css--color-dark-green
  • scss$color-dark-green 
#104c00

Border Radius

Identifier Value Example
  • css--border-radius-none
  • scss$border-radius-none 
0 /*0*/
  • css--border-radius-xs
  • scss$border-radius-xs 
2px /*2px*/
  • css--border-radius-s
  • scss$border-radius-s 
4px /*4px*/
  • css--border-radius-m
  • scss$border-radius-m 
8px /*8px*/
  • css--border-radius-l
  • scss$border-radius-l 
12px /*12px*/
  • css--border-radius-xl
  • scss$border-radius-xl 
16px /*16px*/
  • css--border-radius-full
  • scss$border-radius-full 
9999px /*9999px*/
  • css--border-radius-cta-atc-pdp
  • scss$border-radius-cta-atc-pdp 
2px /*{border.border-radius.xs}*/

Border Width

Identifier Value Example
  • css--border-width-xs
  • scss$border-width-xs 
0px /*0px*/
  • css--border-width-s
  • scss$border-width-s 
1px /*1px*/
  • css--border-width-m
  • scss$border-width-m 
2px /*2px*/
  • css--border-width-l
  • scss$border-width-l 
4px /*4px*/
  • css--border-width-xl
  • scss$border-width-xl 
8px /*8px*/
  • css--border-width-cta-atc-pdp
  • scss$border-width-cta-atc-pdp 
0 /*{border.border-radius.none}*/

Box Shadow

Identifier Value Example
  • css--shadow-l
  • scss$shadow-l 
-6px 0px 10px -3px rgba(0, 0, 0, 0.1)
  • css--shadow-t
  • scss$shadow-t 
0px -6px 10px -3px rgba(0, 0, 0, 0.1)
  • css--shadow-r
  • scss$shadow-r 
6px 0px 10px -3px rgba(0, 0, 0, 0.1)
  • css--shadow-b
  • scss$shadow-b 
0px 6px 10px -3px rgba(0, 0, 0, 0.1)
  • css--shadow-ltr
  • scss$shadow-ltr 
0px -5px 10px -1px rgba(0, 0, 0, 0.05),-6px 0px 10px -5px rgba(0, 0, 0, 0.05),  6px 0px 10px -5px rgba(0, 0, 0, 0.05)
  • css--shadow-ltrb
  • scss$shadow-ltrb 
0px 0px 20px 3px rgba(0, 0, 0, 0.35)

Breakpoint

Identifier Value Example
  • css--breakpoint-xs
  • scss$breakpoint-xs 
0em /*0px*/
Matches: breakpoint-xs Does not match: breakpoint-xs
  • css--breakpoint-s
  • scss$breakpoint-s 
34em /*544px*/
Matches: breakpoint-s Does not match: breakpoint-s
  • css--breakpoint-m
  • scss$breakpoint-m 
48.0625em /*769px*/
Matches: breakpoint-m Does not match: breakpoint-m
  • css--breakpoint-l
  • scss$breakpoint-l 
62em /*992px*/
Matches: breakpoint-l Does not match: breakpoint-l
  • css--breakpoint-xl
  • scss$breakpoint-xl 
75em /*1200px*/
Matches: breakpoint-xl Does not match: breakpoint-xl

Font Family

Identifier Value Example
  • css--font-system
  • scss$font-system 
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
Aa
  • css--font-face1-normal
  • scss$font-face1-normal 
FuturaNowTextRegular, Arial, sans-serif
Aa
  • css--font-face1-medium
  • scss$font-face1-medium 
FuturaNowHeadlineMedium, Arial, sans-serif
Aa
  • css--font-face1-light
  • scss$font-face1-light 
FuturaNowTextLight, Arial, sans-serif
Aa
  • css--font-face2-normal
  • scss$font-face2-normal 
ITCNewBaskervilleRoman, Baskerville, Georgia, serif
Aa
  • css--font-face3-normal
  • scss$font-face3-normal 
ITCNewBaskervilleRoman, serif
Aa
  • css--font-face3-light
  • scss$font-face3-light 
ITCNewBaskervilleRoman, serif
Aa

Font Size

Identifier Value Example
  • css--text-9
  • scss$text-9 
0.5625rem /*9px*/
Aa
  • css--text-10
  • scss$text-10 
0.625rem /*10px*/
Aa
  • css--text-12
  • scss$text-12 
0.75rem /*12px*/
Aa
  • css--text-14
  • scss$text-14 
0.875rem /*14px*/
Aa
  • css--text-16
  • scss$text-16 
1rem /*16px*/
Aa
  • css--text-18
  • scss$text-18 
1.125rem /*18px*/
Aa
  • css--text-20
  • scss$text-20 
1.25rem /*20px*/
Aa
  • css--text-22
  • scss$text-22 
1.375rem /*22px*/
Aa
  • css--text-24
  • scss$text-24 
1.5rem /*24px*/
Aa
  • css--text-26
  • scss$text-26 
1.625rem /*26px*/
Aa
  • css--text-28
  • scss$text-28 
1.75rem /*28px*/
Aa
  • css--text-30
  • scss$text-30 
1.875rem /*30px*/
Aa
  • css--text-32
  • scss$text-32 
2rem /*32px*/
Aa
  • css--text-36
  • scss$text-36 
2.25rem /*36px*/
Aa
  • css--text-40
  • scss$text-40 
2.5rem /*40px*/
Aa
  • css--text-44
  • scss$text-44 
2.75rem /*44px*/
Aa
  • css--text-46
  • scss$text-46 
2.875rem /*46px*/
Aa
  • css--text-48
  • scss$text-48 
3rem /*48px*/
Aa
  • css--text-52
  • scss$text-52 
3.25rem /*52px*/
Aa
  • css--text-60
  • scss$text-60 
3.75rem /*60px*/
Aa
  • css--text-72
  • scss$text-72 
4.5rem /*72px*/
Aa
  • css--text-80
  • scss$text-80 
5rem /*80px*/
Aa
  • css--text-100
  • scss$text-100 
6.25rem /*100px*/
Aa

Letter Spacing

Identifier Value Example
  • css--letter-spacing-xxs
  • scss$letter-spacing-xxs 
0 /*0*/

Tapestry is a global house of brands.
  • css--letter-spacing-xs
  • scss$letter-spacing-xs 
0 /*0px*/

Tapestry is a global house of brands.
  • css--letter-spacing-s
  • scss$letter-spacing-s 
0.0125rem /*0.2px*/

Tapestry is a global house of brands.
  • css--letter-spacing-m
  • scss$letter-spacing-m 
0.025rem /*0.4px*/

Tapestry is a global house of brands.
  • css--letter-spacing-l
  • scss$letter-spacing-l 
0.05rem /*0.8px*/

Tapestry is a global house of brands.
  • css--letter-spacing-xl
  • scss$letter-spacing-xl 
0.0625rem /*1px*/

Tapestry is a global house of brands.
  • css--letter-spacing-2xl
  • scss$letter-spacing-2xl 
0.078125rem /*1.25px*/

Tapestry is a global house of brands.

Line Height

Identifier Value Example
  • css--line-height-95
  • scss$line-height-95 
0.95

Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. We believe true luxury is a freedom of expression that ignites confidence and authenticity. At Tapestry, anyone from anywhere can have the best idea, and with hard work and dedication, anything is possible.

  • css--line-height-100
  • scss$line-height-100 
1

Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. We believe true luxury is a freedom of expression that ignites confidence and authenticity. At Tapestry, anyone from anywhere can have the best idea, and with hard work and dedication, anything is possible.

  • css--line-height-107
  • scss$line-height-107 
1.07

Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. We believe true luxury is a freedom of expression that ignites confidence and authenticity. At Tapestry, anyone from anywhere can have the best idea, and with hard work and dedication, anything is possible.

  • css--line-height-115
  • scss$line-height-115 
1.15

Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. We believe true luxury is a freedom of expression that ignites confidence and authenticity. At Tapestry, anyone from anywhere can have the best idea, and with hard work and dedication, anything is possible.

  • css--line-height-120
  • scss$line-height-120 
1.2

Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. We believe true luxury is a freedom of expression that ignites confidence and authenticity. At Tapestry, anyone from anywhere can have the best idea, and with hard work and dedication, anything is possible.

  • css--line-height-125
  • scss$line-height-125 
1.25

Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. We believe true luxury is a freedom of expression that ignites confidence and authenticity. At Tapestry, anyone from anywhere can have the best idea, and with hard work and dedication, anything is possible.

  • css--line-height-135
  • scss$line-height-135 
1.35

Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. We believe true luxury is a freedom of expression that ignites confidence and authenticity. At Tapestry, anyone from anywhere can have the best idea, and with hard work and dedication, anything is possible.

  • css--line-height-140
  • scss$line-height-140 
1.4

Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. We believe true luxury is a freedom of expression that ignites confidence and authenticity. At Tapestry, anyone from anywhere can have the best idea, and with hard work and dedication, anything is possible.

  • css--line-height-150
  • scss$line-height-150 
1.5

Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. We believe true luxury is a freedom of expression that ignites confidence and authenticity. At Tapestry, anyone from anywhere can have the best idea, and with hard work and dedication, anything is possible.

  • css--line-height-xxxs
  • scss$line-height-xxxs 
1

Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. We believe true luxury is a freedom of expression that ignites confidence and authenticity. At Tapestry, anyone from anywhere can have the best idea, and with hard work and dedication, anything is possible.

  • css--line-height-xxs
  • scss$line-height-xxs 
1.07

Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. We believe true luxury is a freedom of expression that ignites confidence and authenticity. At Tapestry, anyone from anywhere can have the best idea, and with hard work and dedication, anything is possible.

  • css--line-height-xs
  • scss$line-height-xs 
1.15

Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. We believe true luxury is a freedom of expression that ignites confidence and authenticity. At Tapestry, anyone from anywhere can have the best idea, and with hard work and dedication, anything is possible.

  • css--line-height-s
  • scss$line-height-s 
1.2

Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. We believe true luxury is a freedom of expression that ignites confidence and authenticity. At Tapestry, anyone from anywhere can have the best idea, and with hard work and dedication, anything is possible.

  • css--line-height-m
  • scss$line-height-m 
1.25

Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. We believe true luxury is a freedom of expression that ignites confidence and authenticity. At Tapestry, anyone from anywhere can have the best idea, and with hard work and dedication, anything is possible.

  • css--line-height-l
  • scss$line-height-l 
1.35

Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. We believe true luxury is a freedom of expression that ignites confidence and authenticity. At Tapestry, anyone from anywhere can have the best idea, and with hard work and dedication, anything is possible.

  • css--line-height-xl
  • scss$line-height-xl 
1.4

Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. We believe true luxury is a freedom of expression that ignites confidence and authenticity. At Tapestry, anyone from anywhere can have the best idea, and with hard work and dedication, anything is possible.

  • css--line-height-2xl
  • scss$line-height-2xl 
1.5

Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. We believe true luxury is a freedom of expression that ignites confidence and authenticity. At Tapestry, anyone from anywhere can have the best idea, and with hard work and dedication, anything is possible.

Linear Gradient

Identifier Value Example
  • css--linear-gradient-scrim-top
  • scss$linear-gradient-scrim-top 
linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%)
  • css--linear-gradient-scrim-bottom
  • scss$linear-gradient-scrim-bottom 
linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%)

Transition Duration

Identifier Value Example
  • css--transition-duration-gentle
  • scss$transition-duration-gentle 
1s
  • css--transition-duration-quick
  • scss$transition-duration-quick 
0.85s

Transition Easing

Identifier Value Example
  • css--transition-easing-gentle
  • scss$transition-easing-gentle 
0.83, 0, 0.17, 1
  • css--transition-easing-quick
  • scss$transition-easing-quick 
0.85, 0, 0.15, 1

Transition Delay

Identifier Value Example
  • css--transition-delay-gentle
  • scss$transition-delay-gentle 
250ms
  • css--transition-delay-quick
  • scss$transition-delay-quick 
100ms

Transform Rotate

Identifier Value Example
  • css--transform-rotate-90
  • scss$transform-rotate-90 
90deg
  • css--transform-rotate-180
  • scss$transform-rotate-180 
180deg
  • css--transform-rotate-270
  • scss$transform-rotate-270 
270deg
  • css--transform-rotate-360
  • scss$transform-rotate-360 
360deg

Transform Scale

Identifier Value Example
  • css--transform-scale-0
  • scss$transform-scale-0 
0%
  • css--transform-scale-25
  • scss$transform-scale-25 
25%
  • css--transform-scale-50
  • scss$transform-scale-50 
50%
  • css--transform-scale-75
  • scss$transform-scale-75 
75%
  • css--transform-scale-100
  • scss$transform-scale-100 
100%

Spacing

Identifier Value Example
  • css--spacing-0
  • scss$spacing-0 
0 /*0*/
  • css--spacing-1
  • scss$spacing-1 
0.25rem /*4px*/
  • css--spacing-2
  • scss$spacing-2 
0.5rem /*8px*/
  • css--spacing-3
  • scss$spacing-3 
0.75rem /*12px*/
  • css--spacing-4
  • scss$spacing-4 
1rem /*16px*/
  • css--spacing-6
  • scss$spacing-6 
1.5rem /*24px*/
  • css--spacing-8
  • scss$spacing-8 
2rem /*32px*/
  • css--spacing-10
  • scss$spacing-10 
2.5rem /*40px*/
  • css--spacing-12
  • scss$spacing-12 
3rem /*48px*/
  • css--spacing-16
  • scss$spacing-16 
4rem /*64px*/
  • css--spacing-20
  • scss$spacing-20 
5rem /*80px*/
  • css--spacing-24
  • scss$spacing-24 
6rem /*96px*/
  • css--spacing-30
  • scss$spacing-30 
7.5rem /*120px*/

Viewport

Identifier Value Example
  • scss$viewport-xs
  • @custom-media--viewport-xs 
screen and (min-width: 0em)
Matches: viewport-xs Does not match: viewport-xs
  • scss$viewport-s
  • @custom-media--viewport-s 
screen and (min-width: 34em)
Matches: viewport-s Does not match: viewport-s
  • scss$viewport-m
  • @custom-media--viewport-m 
screen and (min-width: 48.0625em)
Matches: viewport-m Does not match: viewport-m
  • scss$viewport-l
  • @custom-media--viewport-l 
screen and (min-width: 62em)
Matches: viewport-l Does not match: viewport-l
  • scss$viewport-xl
  • @custom-media--viewport-xl 
screen and (min-width: 75em)
Matches: viewport-xl Does not match: viewport-xl

Classes

Typography

Identifier Value Example
  • classtext-display1-2xl 
font-family: ITCNewBaskervilleRoman, Baskerville, Georgia, serif;
font-size: 4.5rem;
letter-spacing: 0;
line-height: 1.07
We are a global house of brands.
  • classtext-display1-xl 
font-family: ITCNewBaskervilleRoman, Baskerville, Georgia, serif;
font-size: 3.25rem;
letter-spacing: 0;
line-height: 1.07
We are a global house of brands.
  • classtext-display1-l 
font-family: ITCNewBaskervilleRoman, Baskerville, Georgia, serif;
font-size: 2.75rem;
letter-spacing: 0;
line-height: 1.07
We are a global house of brands.
  • classtext-display1-m 
font-family: ITCNewBaskervilleRoman, Baskerville, Georgia, serif;
font-size: 2.25rem;
letter-spacing: 0;
line-height: 1.07
We are a global house of brands.
  • classtext-display1-s 
font-family: ITCNewBaskervilleRoman, Baskerville, Georgia, serif;
font-size: 1.5rem;
letter-spacing: 0.0125rem;
line-height: 1.2
We are a global house of brands.
  • classtext-display1-xs 
font-family: ITCNewBaskervilleRoman, Baskerville, Georgia, serif;
font-size: 1.25rem;
letter-spacing: 0.0125rem;
line-height: 1.2
We are a global house of brands.
  • classtext-display2-2xl 
font-family: ITCNewBaskervilleRoman, Baskerville, Georgia, serif;
font-size: 4.5rem;
letter-spacing: 0;
line-height: 1.07
We are a global house of brands.
  • classtext-display2-xl 
font-family: ITCNewBaskervilleRoman, Baskerville, Georgia, serif;
font-size: 3.25rem;
letter-spacing: 0;
line-height: 1.07
We are a global house of brands.
  • classtext-display2-l 
font-family: ITCNewBaskervilleRoman, Baskerville, Georgia, serif;
font-size: 2.75rem;
letter-spacing: 0;
line-height: 1.07
We are a global house of brands.
  • classtext-display2-m 
font-family: ITCNewBaskervilleRoman, Baskerville, Georgia, serif;
font-size: 2.25rem;
letter-spacing: 0;
line-height: 1.07
We are a global house of brands.
  • classtext-display2-s 
font-family: ITCNewBaskervilleRoman, Baskerville, Georgia, serif;
font-size: 1.5rem;
letter-spacing: 0.0125rem;
line-height: 1.2
We are a global house of brands.
  • classtext-display2-xs 
font-family: ITCNewBaskervilleRoman, Baskerville, Georgia, serif;
font-size: 1.25rem;
letter-spacing: 0.0125rem;
line-height: 1.2
We are a global house of brands.
  • classtext-display3-2xl 
font-family: FuturaNowTextLight, Arial, sans-serif;
font-size: 6.25rem;
letter-spacing: 0;
line-height: 1.07
We are a global house of brands.
  • classtext-display3-xl 
font-family: FuturaNowTextLight, Arial, sans-serif;
font-size: 5rem;
letter-spacing: 0;
line-height: 1.07
We are a global house of brands.
  • classtext-display3-l 
font-family: FuturaNowTextLight, Arial, sans-serif;
font-size: 3.75rem;
letter-spacing: 0;
line-height: 1.07
We are a global house of brands.
  • classtext-display3-m 
font-family: FuturaNowTextLight, Arial, sans-serif;
font-size: 2.5rem;
letter-spacing: 0;
line-height: 1.07
We are a global house of brands.
  • classtext-display3-ms 
font-family: FuturaNowTextLight, Arial, sans-serif;
font-size: 1.875rem;
letter-spacing: 0.0125rem;
line-height: 1.2
We are a global house of brands.
  • classtext-display3-s 
font-family: FuturaNowTextLight, Arial, sans-serif;
font-size: 1.5rem;
letter-spacing: 0.0125rem;
line-height: 1.2
We are a global house of brands.
  • classtext-display3-xs 
font-family: FuturaNowTextLight, Arial, sans-serif;
font-size: 1.25rem;
letter-spacing: 0.0125rem;
line-height: 1.2
We are a global house of brands.
  • classtext-body1-xl 
font-family: FuturaNowTextRegular, Arial, sans-serif;
font-size: 1.25rem;
letter-spacing: 0;
line-height: 1.35
We are a global house of brands.
  • classtext-body1-l 
font-family: FuturaNowTextRegular, Arial, sans-serif;
font-size: 1rem;
letter-spacing: 0;
line-height: 1.35
We are a global house of brands.
  • classtext-body1-m 
font-family: FuturaNowTextRegular, Arial, sans-serif;
font-size: 0.875rem;
letter-spacing: 0;
line-height: 1.4
We are a global house of brands.
  • classtext-body1-m-line-through 
font-family: FuturaNowTextRegular, Arial, sans-serif;
font-size: 0.875rem;
letter-spacing: 0;
line-height: 1.4;
text-decoration: line-through
We are a global house of brands.
  • classtext-body1-s 
font-family: FuturaNowTextRegular, Arial, sans-serif;
font-size: 0.75rem;
letter-spacing: 0;
line-height: 1.4
We are a global house of brands.
  • classtext-body2-l 
font-family: FuturaNowHeadlineMedium, Arial, sans-serif;
font-size: 1rem;
letter-spacing: 0;
line-height: 1.35
We are a global house of brands.
  • classtext-body2-m 
font-family: FuturaNowHeadlineMedium, Arial, sans-serif;
font-size: 0.875rem;
letter-spacing: 0;
line-height: 1.35
We are a global house of brands.
  • classtext-body2-s 
font-family: FuturaNowHeadlineMedium, Arial, sans-serif;
font-size: 0.75rem;
letter-spacing: 0;
line-height: 1.35
We are a global house of brands.
  • classtext-body2-xs 
font-family: FuturaNowHeadlineMedium, Arial, sans-serif;
font-size: 0.625rem;
letter-spacing: 0;
line-height: 1.35
We are a global house of brands.
  • classtext-body3-l 
font-family: ITCNewBaskervilleRoman, Baskerville, Georgia, serif;
font-size: 1rem;
letter-spacing: 0;
line-height: 1.35
We are a global house of brands.
  • classtext-body3-m 
font-family: ITCNewBaskervilleRoman, Baskerville, Georgia, serif;
font-size: 0.875rem;
letter-spacing: 0;
line-height: 1.35
We are a global house of brands.
  • classtext-body3-s 
font-family: ITCNewBaskervilleRoman, Baskerville, Georgia, serif;
font-size: 0.75rem;
letter-spacing: 0;
line-height: 1.35
We are a global house of brands.
  • classtext-cta1-m 
font-family: FuturaNowTextRegular, Arial, sans-serif;
font-size: 0.875rem;
letter-spacing: 0.0625rem;
line-height: 1.15;
text-transform: uppercase
We are a global house of brands.
  • classtext-cta1-s 
font-family: FuturaNowTextRegular, Arial, sans-serif;
font-size: 0.75rem;
letter-spacing: 0.0625rem;
line-height: 1.15;
text-transform: uppercase
We are a global house of brands.
  • classtext-cta1-xs 
font-family: FuturaNowTextRegular, Arial, sans-serif;
font-size: 0.625rem;
letter-spacing: 0.0625rem;
line-height: 1.15;
text-transform: uppercase
We are a global house of brands.
  • classtext-cta1-pill-xs 
font-family: FuturaNowTextRegular, Arial, sans-serif;
font-size: 0.625rem;
letter-spacing: 0;
line-height: 1.2;
text-transform: none
We are a global house of brands.
  • classtext-cta2-m 
font-family: FuturaNowHeadlineMedium, Arial, sans-serif;
font-size: 0.875rem;
letter-spacing: 0.0625rem;
line-height: 1.15;
text-transform: uppercase
We are a global house of brands.
  • classtext-cta2-s 
font-family: FuturaNowHeadlineMedium, Arial, sans-serif;
font-size: 0.75rem;
letter-spacing: 0.0625rem;
line-height: 1.15;
text-transform: uppercase
We are a global house of brands.
  • classtext-cta2-xs 
font-family: FuturaNowHeadlineMedium, Arial, sans-serif;
font-size: 0.625rem;
letter-spacing: 0.0625rem;
line-height: 1.15;
text-transform: uppercase
We are a global house of brands.
  • classtext-cta2-pill-xs 
font-family: FuturaNowHeadlineMedium, Arial, sans-serif;
font-size: 0.625rem;
letter-spacing: 0;
line-height: 1.2;
text-transform: none
We are a global house of brands.
  • classtext-eyebrow1-l 
font-family: FuturaNowTextRegular, Arial, sans-serif;
font-size: 0.75rem;
letter-spacing: 0.05rem;
line-height: 1.35
We are a global house of brands.
  • classtext-eyebrow1-m 
font-family: FuturaNowTextRegular, Arial, sans-serif;
font-size: 0.625rem;
letter-spacing: 0.05rem;
line-height: 1.35
We are a global house of brands.
  • classtext-badge1-xs 
font-family: FuturaNowHeadlineMedium, Arial, sans-serif;
font-size: 0.625rem;
letter-spacing: 0.05rem;
line-height: 1.35;
text-transform: uppercase
We are a global house of brands.
  • classtext-label1-m 
font-family: FuturaNowHeadlineMedium, Arial, sans-serif;
font-size: 0.75rem;
letter-spacing: 0.05rem;
line-height: 1.35
We are a global house of brands.
  • classtext-link1-m 
font-family: FuturaNowTextRegular, Arial, sans-serif;
font-size: 1rem;
letter-spacing: 0;
line-height: 1.4;
text-decoration: underline
We are a global house of brands.
  • classtext-link1-s 
font-family: FuturaNowTextRegular, Arial, sans-serif;
font-size: 0.875rem;
letter-spacing: 0;
line-height: 1.4;
text-decoration: underline
We are a global house of brands.
  • classtext-link1-xs 
font-family: FuturaNowTextRegular, Arial, sans-serif;
font-size: 0.75rem;
letter-spacing: 0;
line-height: 1.4;
text-decoration: underline
We are a global house of brands.
  • classtext-link2-m 
font-family: FuturaNowHeadlineMedium, Arial, sans-serif;
font-size: 1rem;
letter-spacing: 0;
line-height: 1.4;
text-decoration: underline
We are a global house of brands.
  • classtext-link2-s 
font-family: FuturaNowHeadlineMedium, Arial, sans-serif;
font-size: 0.875rem;
letter-spacing: 0;
line-height: 1.4;
text-decoration: underline
We are a global house of brands.
  • classtext-link2-xs 
font-family: FuturaNowHeadlineMedium, Arial, sans-serif;
font-size: 0.75rem;
letter-spacing: 0;
line-height: 1.4;
text-decoration: underline
We are a global house of brands.

Icons

Video

Path: icon/video/*

  • Volume

    volume.svg

  • Play

    play.svg

  • play-button.svg

  • play-cta.svg

  • Pause

    pause.svg

  • Option

    option.svg

  • Mute

    mute.svg

  • Full Screen

    fullscreen.svg

  • Minimize

    minimize.svg

Utility

Path: icon/utility/*

  • Zoom

    zoom.svg

  • Close

    close.svg

  • compare-inactive.svg

  • compare-selected.svg

  • compare-default.svg

  • Chevron Up Icon

    chevron-up.svg

  • Chevron Right Icon

    chevron-right.svg

  • Chevron Left Icon

    chevron-left.svg

  • Chevron Down Icon

    chevron-down.svg

  • caret-up.svg

  • caret-right.svg

  • Back

    caret-left.svg

  • caret-down.svg

  • Subtract Icon

    minus.svg

  • Plus Icon

    plus.svg

  • Selected

    selected.svg

  • step.svg

  • unselected.svg

  • share.svg

  • Chevron Up Icon

    chevron-bold-up.svg

  • Chevron Down Icon

    chevron-bold-down.svg

  • Chevron Right Icon

    chevron-bold-right.svg

  • Chevron Left Icon

    chevron-bold-left.svg

  • checkmark.svg

  • circle-checkmark-filled.svg

  • circle-checkmark-outline.svg

  • circle-outline.svg

  • range-slider-dot.svg

  • clear-filter.svg

  • filter-radio-dial.svg

  • filter-radio-selected.svg

  • filter-selected.svg

  • filter-swatch.svg

  • Loading.svg

  • Locate.svg

  • Link.svg

Social

Path: icon/social/*

  • YouTube logo

    youtube.svg

  • weibo.svg

  • WeChat logo

    wechat.svg

  • twitter.svg

  • TikTok logo

    tiktok.svg

  • tumblr.svg

  • snapchat.svg

  • Pinterest Logo

    pinterest.svg

  • Email a link for

    mail.svg

  • Instagram logo

    instagram.svg

  • facebook.svg

  • line.svg

Review

Path: icon/review/*

  • thumb-up.svg

  • thumb-up-filled.svg

  • thumb-down.svg

  • thumb-down-filled.svg

  • Rating

    star.svg

  • star-small.svg

  • star-empty.svg

  • star-empty-small.svg

  • star-75.svg

  • star-75-small.svg

  • star-50.svg

  • star-50-small.svg

  • star-25.svg

  • star-25-small.svg

Object

Path: icon/object/*

  • birthday.svg

  • Contact Us

    customer-service.svg

  • Pickup Instead

    store.svg

  • Text Us

    phone.svg

  • Order History

    package.svg

  • Leave Us A Message

    email.svg

  • edit.svg

  • My Payment Methods

    credit-card.svg

  • call.svg

  • calendar.svg

  • chat.svg

  • Change Password

    lock.svg

  • offers.svg

  • Early Access

    early-access.svg

  • gift.svg

  • Communication Preferences

    returns.svg

  • Product Size

    ruler.svg

  • Free Shipping And Free Returns

    shipping.svg

  • bag-size-compare.svg

  • bag-size.svg

  • e-gift-card.svg

  • text-message.svg

  • avatar.svg

  • truefit-50.svg

  • Add to Bag

    add-to-bag.svg

  • graphic-arrow-right.svg

  • graphic-arrow-left.svg

  • bopis.svg

  • view-similar.svg

  • view.svg

  • spade-left.svg

  • spade-right.svg

  • spade.svg

  • spade-w-box.svg

  • truefit.svg

Navigation

Path: icon/navigation/*

  • account.svg

  • Search

    search.svg

  • Marker Icon

    location.svg

  • Menu

    hamburger.svg

  • Wishlist

    favorite.svg

  • Wishlist

    favorite-fill.svg

  • Shopping Bag

    bag.svg

  • bag-filled.svg

  • bag-plus.svg

  • bag-normal.svg

  • bag-2digit.svg

  • bag-2digit-white.svg

  • bag-3digit.svg

  • bag-3digit-white.svg

  • bag-white.svg

Form

Path: icon/form/*

  • Success

    success.svg

  • Info

    info.svg

  • error.svg

  • Info

    info-outlined.svg

Flag

Path: icon/flag/*

  • United States

    usa.svg

  • Canada

    canada.svg

  • uk.svg

  • germany.svg

  • france.svg

  • italy.svg

  • spain.svg

  • netherlands.svg

  • ireland.svg

  • belgium.svg

  • austria.svg

  • portugal.svg

Partner

Path: icon/partner/*

  • affirm.svg

  • apple-pay.svg

  • giftnow.svg

  • Klarna logo

    klarna.svg

  • paypal-credit.svg

  • paypal.svg

  • shoprunner.svg

  • amazon-pay.svg

Credit

Path: icon/credit/*

  • amex.svg

  • diners-club.svg

  • discover.svg

  • giftnow.svg

  • jcb.svg

  • Klarna logo

    klarna.svg

  • maestro.svg

  • mastercard.svg

  • union-pay.svg

  • visa.svg

Accordion

Path: icon/accordion/*

  • Product Details

    additional-details.svg

  • Care Instructions

    care-instructions.svg

  • shipping.svg

  • Editor's Notes

    editors-notes.svg

Logos

Path: logo/*

  • favicon.svg

  • monogram-black.svg

  • monogram-white.svg

  • primary-black.svg

  • primary-white.svg

  • surprise-black.svg

  • surprise-white.svg

  • ks-outlet-logo-black.svg

  • ks-outlet-logo-white.svg