Kate Spade® Design Tokens

Theme: Germany

version 5.34.0

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-neutral-light-1
  • scss$color-neutral-light-1 
#f0f0f0
  • 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 
MaisonNeueBook, Arial, sans-serif
Aa
  • css--font-face1-medium
  • scss$font-face1-medium 
MaisonNeueMedium, Arial, sans-serif
Aa
  • css--font-face1-light
  • scss$font-face1-light 
MaisonNeueLight, Arial, sans-serif
Aa
  • css--font-face2-normal
  • scss$font-face2-normal 
KateSerifRegular, Baskerville, Georgia, serif
Aa
  • css--font-face2-italic
  • scss$font-face2-italic 
KateSerifItalic, Baskerville, Georgia, serif
Aa
  • css--font-face3-normal
  • scss$font-face3-normal 
KateSerifRegular, serif
Aa
  • css--font-face3-light
  • scss$font-face3-light 
KateSerifRegular, 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: KateSerifRegular, Baskerville, Georgia, serif;
font-size: 4.5rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display1-xl 
font-family: KateSerifRegular, Baskerville, Georgia, serif;
font-size: 3.25rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display1-l 
font-family: KateSerifRegular, Baskerville, Georgia, serif;
font-size: 2.75rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display1-m 
font-family: KateSerifRegular, Baskerville, Georgia, serif;
font-size: 2.25rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display1-ms 
font-family: KateSerifRegular, Baskerville, Georgia, serif;
font-size: 1.75rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display1-s 
font-family: KateSerifRegular, Baskerville, Georgia, serif;
font-size: 1.5rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display1-xs 
font-family: KateSerifRegular, Baskerville, Georgia, serif;
font-size: 1.25rem;
letter-spacing: 0.0125rem;
line-height: 1
We are a global house of brands.
  • classtext-display2-2xl 
font-family: KateSerifRegular, Baskerville, Georgia, serif;
font-size: 4.5rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display2-xl 
font-family: KateSerifRegular, Baskerville, Georgia, serif;
font-size: 3.25rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display2-l 
font-family: KateSerifRegular, Baskerville, Georgia, serif;
font-size: 2.75rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display2-m 
font-family: KateSerifRegular, Baskerville, Georgia, serif;
font-size: 2.25rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display2-s 
font-family: KateSerifRegular, Baskerville, Georgia, serif;
font-size: 1.5rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display2-xs 
font-family: KateSerifRegular, Baskerville, Georgia, serif;
font-size: 1.25rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display3-2xl 
font-family: MaisonNeueLight, Arial, sans-serif;
font-size: 6.25rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display3-xl 
font-family: MaisonNeueLight, Arial, sans-serif;
font-size: 5rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display3-l 
font-family: MaisonNeueLight, Arial, sans-serif;
font-size: 3.75rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display3-m 
font-family: MaisonNeueLight, Arial, sans-serif;
font-size: 2.5rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display3-ms 
font-family: MaisonNeueLight, Arial, sans-serif;
font-size: 1.875rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display3-s 
font-family: MaisonNeueLight, Arial, sans-serif;
font-size: 1.5rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display3-xs 
font-family: MaisonNeueLight, Arial, sans-serif;
font-size: 1.25rem;
letter-spacing: 0;
line-height: 1.2
We are a global house of brands.
  • classtext-display4-2xl 
font-family: KateSerifItalic, Baskerville, Georgia, serif;
font-size: 4.5rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display4-xl 
font-family: KateSerifItalic, Baskerville, Georgia, serif;
font-size: 3.25rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display4-l 
font-family: KateSerifItalic, Baskerville, Georgia, serif;
font-size: 2.75rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display4-m 
font-family: KateSerifItalic, Baskerville, Georgia, serif;
font-size: 2.25rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display4-ms 
font-family: KateSerifItalic, Baskerville, Georgia, serif;
font-size: 1.75rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display4-s 
font-family: KateSerifItalic, Baskerville, Georgia, serif;
font-size: 1.5rem;
letter-spacing: 0;
line-height: 1
We are a global house of brands.
  • classtext-display4-xs 
font-family: KateSerifItalic, Baskerville, Georgia, serif;
font-size: 1.25rem;
letter-spacing: 0.0125rem;
line-height: 1
We are a global house of brands.
  • classtext-body1-xl 
font-family: MaisonNeueBook, 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: MaisonNeueBook, 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: MaisonNeueBook, Arial, sans-serif;
font-size: 0.875rem;
letter-spacing: 0;
line-height: 1.35
We are a global house of brands.
  • classtext-body1-m-line-through 
font-family: MaisonNeueBook, Arial, sans-serif;
font-size: 0.875rem;
letter-spacing: 0;
line-height: 1.35;
text-decoration: line-through
We are a global house of brands.
  • classtext-body1-s 
font-family: MaisonNeueBook, Arial, sans-serif;
font-size: 0.75rem;
letter-spacing: 0;
line-height: 1.35
We are a global house of brands.
  • classtext-body2-l 
font-family: MaisonNeueMedium, 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: MaisonNeueMedium, 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: MaisonNeueMedium, 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: MaisonNeueMedium, 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: KateSerifRegular, Baskerville, Georgia, serif;
font-size: 1rem;
letter-spacing: 0;
line-height: 1.4
We are a global house of brands.
  • classtext-body3-m 
font-family: KateSerifRegular, Baskerville, Georgia, serif;
font-size: 0.875rem;
letter-spacing: 0;
line-height: 1.4
We are a global house of brands.
  • classtext-body3-s 
font-family: KateSerifRegular, Baskerville, Georgia, serif;
font-size: 0.75rem;
letter-spacing: 0;
line-height: 1.4
We are a global house of brands.
  • classtext-cta1-m 
font-family: MaisonNeueBook, Arial, sans-serif;
font-size: 0.875rem;
letter-spacing: 0.025rem;
line-height: 1.15;
text-transform: uppercase
We are a global house of brands.
  • classtext-cta1-s 
font-family: MaisonNeueBook, Arial, sans-serif;
font-size: 0.75rem;
letter-spacing: 0.025rem;
line-height: 1.15;
text-transform: uppercase
We are a global house of brands.
  • classtext-cta1-xs 
font-family: MaisonNeueBook, Arial, sans-serif;
font-size: 0.625rem;
letter-spacing: 0.025rem;
line-height: 1.15;
text-transform: uppercase
We are a global house of brands.
  • classtext-cta1-pill-xs 
font-family: MaisonNeueBook, Arial, sans-serif;
font-size: 0.625rem;
letter-spacing: 0;
line-height: 1.2
We are a global house of brands.
  • classtext-cta2-m 
font-family: MaisonNeueMedium, Arial, sans-serif;
font-size: 0.875rem;
letter-spacing: 0.025rem;
line-height: 1.15;
text-transform: uppercase
We are a global house of brands.
  • classtext-cta2-s 
font-family: MaisonNeueMedium, Arial, sans-serif;
font-size: 0.75rem;
letter-spacing: 0.025rem;
line-height: 1.15;
text-transform: uppercase
We are a global house of brands.
  • classtext-cta2-xs 
font-family: MaisonNeueMedium, Arial, sans-serif;
font-size: 0.625rem;
letter-spacing: 0.025rem;
line-height: 1.15;
text-transform: uppercase
We are a global house of brands.
  • classtext-cta2-pill-xs 
font-family: MaisonNeueMedium, Arial, sans-serif;
font-size: 0.625rem;
letter-spacing: 0;
line-height: 1.2
We are a global house of brands.
  • classtext-eyebrow1-l 
font-family: MaisonNeueBook, Arial, sans-serif;
font-size: 0.75rem;
letter-spacing: 0.025rem;
line-height: 1.35
We are a global house of brands.
  • classtext-eyebrow1-m 
font-family: MaisonNeueBook, Arial, sans-serif;
font-size: 0.625rem;
letter-spacing: 0.025rem;
line-height: 1.35
We are a global house of brands.
  • classtext-badge1-xs 
font-family: MaisonNeueMedium, Arial, sans-serif;
font-size: 0.625rem;
letter-spacing: 0.025rem;
line-height: 1.35;
text-transform: uppercase
We are a global house of brands.
  • classtext-label1-m 
font-family: MaisonNeueMedium, Arial, sans-serif;
font-size: 0.75rem;
letter-spacing: 0.025rem;
line-height: 1.35
We are a global house of brands.
  • classtext-link1-m 
font-family: MaisonNeueBook, 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: MaisonNeueBook, 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: MaisonNeueBook, 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: MaisonNeueMedium, 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: MaisonNeueMedium, 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: MaisonNeueMedium, 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-title1-m 
font-family: MaisonNeueBook, Arial, sans-serif;
font-size: 1rem;
letter-spacing: 0;
line-height: 1.25
We are a global house of brands.
  • classtext-title1-s 
font-family: MaisonNeueBook, Arial, sans-serif;
font-size: 0.875rem;
letter-spacing: 0;
line-height: 1.25
We are a global house of brands.
  • classtext-title1-xs 
font-family: MaisonNeueBook, Arial, sans-serif;
font-size: 0.75rem;
letter-spacing: 0;
line-height: 1.25
We are a global house of brands.
  • classtext-title2-m 
font-family: MaisonNeueMedium, Arial, sans-serif;
font-size: 1rem;
letter-spacing: 0;
line-height: 1.25
We are a global house of brands.
  • classtext-title2-s 
font-family: MaisonNeueMedium, Arial, sans-serif;
font-size: 0.875rem;
letter-spacing: 0;
line-height: 1.25
We are a global house of brands.
  • classtext-title2-xs 
font-family: MaisonNeueMedium, Arial, sans-serif;
font-size: 0.75rem;
letter-spacing: 0;
line-height: 1.25
We are a global house of brands.

Icons

Video

Path: icon/video/*

  • Volume

    volume.svg

  • Play

    play.svg

  • Play

    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/*

  • Go to YouTube

    youtube.svg

  • Go to Weibo

    weibo.svg

  • Go to WeChat

    wechat.svg

  • twitter.svg

  • Go to TikTok

    tiktok.svg

  • Go to Tumblr

    tumblr.svg

  • Go to Snapchat

    snapchat.svg

  • Go to Pinterest

    pinterest.svg

  • Email a link for

    mail.svg

  • Go to Instagram

    instagram.svg

  • facebook.svg

  • LINE logo

    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

  • Store Locator

    location.svg

  • Menu

    hamburger.svg

  • Wishlist

    favorite.svg

  • Wishlist

    favorite-fill.svg

  • View 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

  • Filter and Sort

    filter-and-sort.svg

Form

Path: icon/form/*

  • Success

    success.svg

  • Info

    info.svg

  • Error

    error.svg

  • Info

    info-outlined.svg

Flag

Path: icon/flag/*

  • United States

    usa.svg

  • Canada

    canada.svg

  • United Kingdom

    uk.svg

  • Germany

    germany.svg

  • France

    france.svg

  • Italy

    italy.svg

  • Spain

    spain.svg

  • Netherlands

    netherlands.svg

  • Ireland

    ireland.svg

  • Belgium

    belgium.svg

  • Austria

    austria.svg

  • Portugal

    portugal.svg

  • Albania

    albania.svg

  • Andorra

    andorra.svg

  • Bulgaria

    bulgaria.svg

  • Croatia

    croatia.svg

  • Cyprus

    cyprus.svg

  • Czech Republic

    czech.svg

  • Denmark

    denmark.svg

  • Egypt

    egypt.svg

  • Estonia

    estonia.svg

  • Finland

    finland.svg

  • Greece

    greece.svg

  • Hungary

    hungary.svg

  • Iceland

    iceland.svg

  • Latvia

    latvia.svg

  • Luxembourg

    luxembourg.svg

  • Lithuania

    lithuania.svg

  • Malta

    malta.svg

  • Monaco

    monaco.svg

  • Montenegro

    montenegro.svg

  • Norway

    norway.svg

  • Poland

    poland.svg

  • Romania

    romania.svg

  • Slovakia

    slovakia.svg

  • Slovenia

    slovenia.svg

  • Sweden

    sweden.svg

  • Switzerland

    switzerland.svg

  • Turkey

    turkey.svg

Partner

Path: icon/partner/*

  • Affirm logo

    affirm.svg

  • Apple Pay logo

    apple-pay.svg

  • giftnow.svg

  • Klarna logo

    klarna.svg

  • PayPal Credit logo

    paypal-credit.svg

  • PayPal logo

    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 and Returns

    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