Coach® Design Tokens

Identifier	Value	Example
css`--color-primary` scss`$color-primary`	#000001
css`--color-secondary` scss`$color-secondary`	#fffffe
css`--color-background-cta-primary` scss`$color-background-cta-primary`	#000001
css`--color-background-cta-hover` scss`$color-background-cta-hover`	#f7f7f7
css`--color-background-cta-focus` scss`$color-background-cta-focus`	#575757
css`--color-background-cta-disabled` scss`$color-background-cta-disabled`	#d8d8d8
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`	#d8d8d8
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`	#057550
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`	#ee0011
css`--color-border-filter-pill-disabled` scss`$color-border-filter-pill-disabled`	#d8d8d8
css`--color-text-cta-primary` scss`$color-text-cta-primary`	#ffffff
css`--color-text-filter-pill-default` scss`$color-text-filter-pill-default`	#333333
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-1` scss`$color-neutral-1`	#6d6d6d
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`	#f7f7f7
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`	#333333
css`--color-neutral-dark-1` scss`$color-neutral-dark-1`	#161616
css`--color-neutral-inactive` scss`$color-neutral-inactive`	#d8d8d8
css`--color-neutral-light-1` scss`$color-neutral-light-1`	#f0f0f0
css`--color-error-primary` scss`$color-error-primary`	#ee0011
css`--color-inactive` scss`$color-inactive`	#d8d8d8
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`	#333333
css`--color-success-primary` scss`$color-success-primary`	#057550
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`	#efefef
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-sale` scss`$color-sale`	#cc0000
css`--color-flyout-nav-dark-bg` scss`$color-flyout-nav-dark-bg`	#161616
css`--color-tab-bar-bottom-dark-bg` scss`$color-tab-bar-bottom-dark-bg`	#333333
css`--color-price` scss`$color-price`	#000000
css`--color-price-comp-value` scss`$color-price-comp-value`	#6d6d6d
css`--color-price-percentage` scss`$color-price-percentage`	#057550
css`--color-price-strikethrough` scss`$color-price-strikethrough`	#6d6d6d
css`--color-lower-placement-badge` scss`$color-lower-placement-badge`	#057550
css`--color-page-bg` scss`$color-page-bg`	#f0f0f0

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/

Border Width

Identifier	Value	Example
css`--border-width-xs` scss`$border-width-xs`	.5px /.5px/
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/

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`	Hiragino Kaku Gothic ProN Medium, Hiragino Sans Medium, BIZ UDPGothic Medium, Meiryo Medium, sans-serif	Aa
css`--font-face1-bold` scss`$font-face1-bold`	Hiragino Kaku Gothic ProN Bold, Hiragino Sans Bold, BIZ UDPGothic Bold, Meiryo Bold, sans-serif	Aa
css`--font-face1-extended-bold` scss`$font-face1-extended-bold`	HelveticaNeue73ExtendedBold, Helvetica, Arial, sans-serif	Aa
css`--font-face1-extended-normal` scss`$font-face1-extended-normal`	HelveticaNeue53ExtendedNormal, Helvetica, Arial, sans-serif	Aa
css`--font-face2-normal` scss`$font-face2-normal`	Hiragino Mincho ProN Medium, Hiragino Mincho Pro Medium, Yu Mincho Medium, BIZ UDPMincho Medium, serif	Aa
css`--font-face2-bold` scss`$font-face2-bold`	Hiragino Mincho ProN Bold, Hiragino Mincho Pro Bold, Yu Mincho Bold, serif	Aa
css`--font-face3-bold` scss`$font-face3-bold`	Neue Helvetica Bold, Arial, sans-serif	Aa
css`--font-face3-extended-normal` scss`$font-face3-extended-normal`	Helvetica Neue LT Pro Extended, Tazugane Gothic Book	Aa
css`--font-face3-extended-bold` scss`$font-face3-extended-bold`	Helvetica Neue LT Pro Bold Extended, Tazugane Gothic Bold	Aa

Identifier	Value	Example
css`--text-8` scss`$text-8`	0.5rem /8px/	Aa
css`--text-10` scss`$text-10`	0.625rem /10px/	Aa
css`--text-12` scss`$text-12`	0.75rem /12px/	Aa
css`--text-13` scss`$text-13`	0.8125rem /13px/	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-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-44` scss`$text-44`	2.75rem /44px/	Aa
css`--text-55` scss`$text-55`	3.4375rem /55px/	Aa
css`--text-60` scss`$text-60`	3.75rem /60px/	Aa
css`--text-65` scss`$text-65`	4.0625rem /65px/	Aa
css`--text-80` scss`$text-80`	5rem /80px/	Aa
css`--text-96` scss`$text-96`	6rem /96px/	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.0125rem /-0.2px/	Tapestry is a global house of brands.
css`--letter-spacing-s` scss`$letter-spacing-s`	0 /0px/	Tapestry is a global house of brands.
css`--letter-spacing-m` scss`$letter-spacing-m`	0.0125rem /0.2px/	Tapestry is a global house of brands.
css`--letter-spacing-l` scss`$letter-spacing-l`	0.025rem /0.4px/	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-175` scss`$line-height-175`	1.75	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`	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-xxs` scss`$line-height-xxs`	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-xs` scss`$line-height-xs`	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-s` scss`$line-height-s`	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-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.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-2xl` scss`$line-height-2xl`	1.75	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
class`text-display1-xs`	font-family: Hiragino Kaku Gothic ProN Bold, Hiragino Sans Bold, BIZ UDPGothic Bold, Meiryo Bold, sans-serif; font-size: 1rem; letter-spacing: 0; line-height: 1.35	We are a global house of brands.
class`text-display1-s`	font-family: Hiragino Kaku Gothic ProN Bold, Hiragino Sans Bold, BIZ UDPGothic Bold, Meiryo Bold, sans-serif; font-size: 1.25rem; letter-spacing: 0; line-height: 1.35	We are a global house of brands.
class`text-display1-m`	font-family: Hiragino Kaku Gothic ProN Bold, Hiragino Sans Bold, BIZ UDPGothic Bold, Meiryo Bold, sans-serif; font-size: 1.625rem; letter-spacing: 0; line-height: 1.25	We are a global house of brands.
class`text-display1-l`	font-family: Hiragino Kaku Gothic ProN Bold, Hiragino Sans Bold, BIZ UDPGothic Bold, Meiryo Bold, sans-serif; font-size: 1.875rem; letter-spacing: 0; line-height: 1.25	We are a global house of brands.
class`text-display1-xl`	font-family: Hiragino Kaku Gothic ProN Bold, Hiragino Sans Bold, BIZ UDPGothic Bold, Meiryo Bold, sans-serif; font-size: 2.75rem; letter-spacing: 0; line-height: 1.25	We are a global house of brands.
class`text-display1-2xl`	font-family: Hiragino Kaku Gothic ProN Bold, Hiragino Sans Bold, BIZ UDPGothic Bold, Meiryo Bold, sans-serif; font-size: 3.75rem; letter-spacing: -0.0125rem; line-height: 1.25	We are a global house of brands.
class`text-display2-xs`	font-family: Hiragino Mincho ProN Medium, Hiragino Mincho Pro Medium, Yu Mincho Medium, BIZ UDPMincho Medium, serif; font-size: 1.25rem; letter-spacing: 0; line-height: 1.35	We are a global house of brands.
class`text-display2-s`	font-family: Hiragino Mincho ProN Medium, Hiragino Mincho Pro Medium, Yu Mincho Medium, BIZ UDPMincho Medium, serif; font-size: 1.5rem; letter-spacing: 0; line-height: 1.25	We are a global house of brands.
class`text-display2-m`	font-family: Hiragino Mincho ProN Medium, Hiragino Mincho Pro Medium, Yu Mincho Medium, BIZ UDPMincho Medium, serif; font-size: 1.625rem; letter-spacing: 0; line-height: 1.25	We are a global house of brands.
class`text-display2-l`	font-family: Hiragino Mincho ProN Medium, Hiragino Mincho Pro Medium, Yu Mincho Medium, BIZ UDPMincho Medium, serif; font-size: 1.875rem; letter-spacing: 0; line-height: 1.25	We are a global house of brands.
class`text-display2-xl`	font-family: Hiragino Mincho ProN Medium, Hiragino Mincho Pro Medium, Yu Mincho Medium, BIZ UDPMincho Medium, serif; font-size: 2.75rem; letter-spacing: 0; line-height: 1.25	We are a global house of brands.
class`text-display2-2xl`	font-family: Hiragino Mincho ProN Medium, Hiragino Mincho Pro Medium, Yu Mincho Medium, BIZ UDPMincho Medium, serif; font-size: 3.75rem; letter-spacing: -0.0125rem; line-height: 1.25	We are a global house of brands.
class`text-display3-2xl`	font-family: Helvetica Neue LT Pro Extended, Tazugane Gothic Book; font-size: 3.75rem; letter-spacing: 0.0125rem; line-height: 1.15	We are a global house of brands.
class`text-display3-xl`	font-family: Helvetica Neue LT Pro Extended, Tazugane Gothic Book; font-size: 2.75rem; letter-spacing: 0.0125rem; line-height: 1.15	We are a global house of brands.
class`text-display3-l`	font-family: Helvetica Neue LT Pro Extended, Tazugane Gothic Book; font-size: 2rem; letter-spacing: 0.0125rem; line-height: 1.15	We are a global house of brands.
class`text-display3-m`	font-family: Helvetica Neue LT Pro Extended, Tazugane Gothic Book; font-size: 1.75rem; letter-spacing: 0.0125rem; line-height: 1.15	We are a global house of brands.
class`text-display3-s`	font-family: Helvetica Neue LT Pro Extended, Tazugane Gothic Book; font-size: 1.5rem; letter-spacing: 0.025rem; line-height: 1.25	We are a global house of brands.
class`text-display3-xs`	font-family: Helvetica Neue LT Pro Extended, Tazugane Gothic Book; font-size: 1.25rem; letter-spacing: 0.025rem; line-height: 1.25	We are a global house of brands.
class`text-display3-xxs`	font-family: Helvetica Neue LT Pro Extended, Tazugane Gothic Book; font-size: 1rem; letter-spacing: 0.025rem; line-height: 1.25	We are a global house of brands.
class`text-display4-2xl`	font-family: Helvetica Neue LT Pro Bold Extended, Tazugane Gothic Bold; font-size: 3.75rem; letter-spacing: 0.0125rem; line-height: 1.15	We are a global house of brands.
class`text-display4-xl`	font-family: Helvetica Neue LT Pro Bold Extended, Tazugane Gothic Bold; font-size: 2.75rem; letter-spacing: 0.0125rem; line-height: 1.15	We are a global house of brands.
class`text-display4-l`	font-family: Helvetica Neue LT Pro Bold Extended, Tazugane Gothic Bold; font-size: 2rem; letter-spacing: 0.0125rem; line-height: 1.15	We are a global house of brands.
class`text-display4-m`	font-family: Helvetica Neue LT Pro Bold Extended, Tazugane Gothic Bold; font-size: 1.75rem; letter-spacing: 0.0125rem; line-height: 1.15	We are a global house of brands.
class`text-display4-s`	font-family: Helvetica Neue LT Pro Bold Extended, Tazugane Gothic Bold; font-size: 1.5rem; letter-spacing: 0.025rem; line-height: 1.25	We are a global house of brands.
class`text-display4-xs`	font-family: Helvetica Neue LT Pro Bold Extended, Tazugane Gothic Bold; font-size: 1.25rem; letter-spacing: 0.025rem; line-height: 1.25	We are a global house of brands.
class`text-display4-xxs`	font-family: Helvetica Neue LT Pro Bold Extended, Tazugane Gothic Bold; font-size: 1rem; letter-spacing: 0.025rem; line-height: 1.25	We are a global house of brands.
class`text-body1-xs`	font-family: Hiragino Kaku Gothic ProN Medium, Hiragino Sans Medium, BIZ UDPGothic Medium, Meiryo Medium, sans-serif; font-size: 0.625rem; letter-spacing: 0.025rem; line-height: 1.5	We are a global house of brands.
class`text-body1-s`	font-family: Hiragino Kaku Gothic ProN Medium, Hiragino Sans Medium, BIZ UDPGothic Medium, Meiryo Medium, sans-serif; font-size: 0.75rem; letter-spacing: 0.0125rem; line-height: 1.75	We are a global house of brands.
class`text-body1-m`	font-family: Hiragino Kaku Gothic ProN Medium, Hiragino Sans Medium, BIZ UDPGothic Medium, Meiryo Medium, sans-serif; font-size: 0.875rem; letter-spacing: 0.0125rem; line-height: 1.75	We are a global house of brands.
class`text-body1-m-line-through`	font-family: Hiragino Kaku Gothic ProN Medium, Hiragino Sans Medium, BIZ UDPGothic Medium, Meiryo Medium, sans-serif; font-size: 0.875rem; letter-spacing: -0.0125rem; line-height: 1.5; text-decoration: line-through	We are a global house of brands.
class`text-body1-l`	font-family: Hiragino Kaku Gothic ProN Medium, Hiragino Sans Medium, BIZ UDPGothic Medium, Meiryo Medium, sans-serif; font-size: 1rem; letter-spacing: 0.0125rem; line-height: 1.5	We are a global house of brands.
class`text-body1-xl`	font-family: Hiragino Kaku Gothic ProN Medium, Hiragino Sans Medium, BIZ UDPGothic Medium, Meiryo Medium, sans-serif; font-size: 1.25rem; letter-spacing: -0.0125rem; line-height: 1.35	We are a global house of brands.
class`text-body2-s`	font-family: Hiragino Mincho ProN Medium, Hiragino Mincho Pro Medium, Yu Mincho Medium, BIZ UDPMincho Medium, serif; font-size: 0.75rem; letter-spacing: 0.0125rem; line-height: 1.75	We are a global house of brands.
class`text-body2-m`	font-family: Hiragino Mincho ProN Medium, Hiragino Mincho Pro Medium, Yu Mincho Medium, BIZ UDPMincho Medium, serif; font-size: 0.875rem; letter-spacing: 0.0125rem; line-height: 1.5	We are a global house of brands.
class`text-body2-l`	font-family: Hiragino Mincho ProN Medium, Hiragino Mincho Pro Medium, Yu Mincho Medium, BIZ UDPMincho Medium, serif; font-size: 1.25rem; letter-spacing: 0.0125rem; line-height: 1.5	We are a global house of brands.
class`text-eyebrow1-m`	font-family: Hiragino Kaku Gothic ProN Medium, Hiragino Sans Medium, BIZ UDPGothic Medium, Meiryo Medium, sans-serif; font-size: 0.75rem; letter-spacing: 0.0625rem; line-height: 1.35	We are a global house of brands.
class`text-eyebrow1-l`	font-family: Hiragino Kaku Gothic ProN Medium, Hiragino Sans Medium, BIZ UDPGothic Medium, Meiryo Medium, sans-serif; font-size: 0.875rem; letter-spacing: 0.0625rem; line-height: 1.35	We are a global house of brands.
class`text-badge1-xs`	font-family: Hiragino Kaku Gothic ProN Bold, Hiragino Sans Bold, BIZ UDPGothic Bold, Meiryo Bold, sans-serif; font-size: 0.625rem; letter-spacing: 0.0625rem; line-height: 1.15; text-transform: uppercase	We are a global house of brands.
class`text-label1-m`	font-family: Hiragino Kaku Gothic ProN Bold, Hiragino Sans Bold, BIZ UDPGothic Bold, Meiryo Bold, sans-serif; font-size: 0.75rem; letter-spacing: 0.0625rem; line-height: 1.15; text-transform: uppercase	We are a global house of brands.
class`text-cta1-m`	font-family: Hiragino Kaku Gothic ProN Medium, Hiragino Sans Medium, BIZ UDPGothic Medium, Meiryo Medium, sans-serif; font-size: 0.875rem; letter-spacing: 0.0625rem; line-height: 1; text-transform: uppercase	We are a global house of brands.
class`text-cta1-s`	font-family: Hiragino Kaku Gothic ProN Medium, Hiragino Sans Medium, BIZ UDPGothic Medium, Meiryo Medium, sans-serif; font-size: 0.75rem; letter-spacing: 0.0625rem; line-height: 1; text-transform: uppercase	We are a global house of brands.
class`text-cta1-xs`	font-family: Hiragino Kaku Gothic ProN Medium, Hiragino Sans Medium, BIZ UDPGothic Medium, Meiryo Medium, sans-serif; font-size: 0.625rem; letter-spacing: 0.0625rem; line-height: 1; text-transform: uppercase	We are a global house of brands.
class`text-cta1-pill-xs`	font-family: Hiragino Kaku Gothic ProN Medium, Hiragino Sans Medium, BIZ UDPGothic Medium, Meiryo Medium, sans-serif; font-size: 0.625rem; letter-spacing: -0.0125rem; line-height: 1.15; text-transform: none	We are a global house of brands.
class`text-cta2-m`	font-family: Helvetica Neue LT Pro Extended, Tazugane Gothic Book; font-size: 1rem; letter-spacing: 0.0125rem; line-height: 1; text-transform: none	We are a global house of brands.
class`text-cta2-s`	font-family: Helvetica Neue LT Pro Extended, Tazugane Gothic Book; font-size: 0.875rem; letter-spacing: 0.0125rem; line-height: 1; text-transform: none	We are a global house of brands.
class`text-cta2-xs`	font-family: Helvetica Neue LT Pro Extended, Tazugane Gothic Book; font-size: 0.75rem; letter-spacing: 0.0125rem; line-height: 1; text-transform: none	We are a global house of brands.
class`text-cta2-xxs`	font-family: Helvetica Neue LT Pro Extended, Tazugane Gothic Book; font-size: 0.625rem; letter-spacing: 0.0125rem; line-height: 1; text-transform: none	We are a global house of brands.
class`text-cta3-m`	font-family: Helvetica Neue LT Pro Bold Extended, Tazugane Gothic Bold; font-size: 0.875rem; letter-spacing: 0.0125rem; line-height: 1; text-transform: none	We are a global house of brands.
class`text-cta3-s`	font-family: Helvetica Neue LT Pro Bold Extended, Tazugane Gothic Bold; font-size: 0.75rem; letter-spacing: 0.0125rem; line-height: 1; text-transform: none	We are a global house of brands.
class`text-cta3-xs`	font-family: Helvetica Neue LT Pro Bold Extended, Tazugane Gothic Bold; font-size: 0.625rem; letter-spacing: 0.0125rem; line-height: 1; text-transform: none	We are a global house of brands.
class`text-link1-l`	font-family: Hiragino Kaku Gothic ProN Medium, Hiragino Sans Medium, BIZ UDPGothic Medium, Meiryo Medium, sans-serif; font-size: 1rem; letter-spacing: -0.0125rem; line-height: 1.5; text-decoration: underline	We are a global house of brands.
class`text-link1-m`	font-family: Hiragino Kaku Gothic ProN Medium, Hiragino Sans Medium, BIZ UDPGothic Medium, Meiryo Medium, sans-serif; font-size: 0.875rem; letter-spacing: -0.0125rem; line-height: 1.5; text-decoration: underline	We are a global house of brands.
class`text-link1-s`	font-family: Hiragino Kaku Gothic ProN Medium, Hiragino Sans Medium, BIZ UDPGothic Medium, Meiryo Medium, sans-serif; font-size: 0.75rem; letter-spacing: -0.0125rem; line-height: 1.5; text-decoration: underline	We are a global house of brands.
class`text-link1-xs`	font-family: Hiragino Kaku Gothic ProN Medium, Hiragino Sans Medium, BIZ UDPGothic Medium, Meiryo Medium, sans-serif; font-size: 0.625rem; letter-spacing: -0.0125rem; line-height: 1.5; text-decoration: underline	We are a global house of brands.
class`text-link2-l`	font-family: HelveticaNeue53ExtendedNormal, Helvetica, Arial, sans-serif; font-size: 1rem; letter-spacing: -0.0125rem; line-height: 1.5; text-decoration: underline	We are a global house of brands.
class`text-link2-m`	font-family: HelveticaNeue53ExtendedNormal, Helvetica, Arial, sans-serif; font-size: 0.875rem; letter-spacing: -0.0125rem; line-height: 1.5; text-decoration: underline	We are a global house of brands.
class`text-link2-s`	font-family: HelveticaNeue53ExtendedNormal, Helvetica, Arial, sans-serif; font-size: 0.75rem; letter-spacing: -0.0125rem; line-height: 1.5; text-decoration: underline	We are a global house of brands.
class`text-link2-xs`	font-family: HelveticaNeue53ExtendedNormal, Helvetica, Arial, sans-serif; font-size: 0.625rem; letter-spacing: -0.0125rem; line-height: 1.5; text-decoration: underline	We are a global house of brands.
class`text-link3-l`	font-family: HelveticaNeue73ExtendedBold, Helvetica, Arial, sans-serif; font-size: 1rem; letter-spacing: -0.0125rem; line-height: 1.5; text-decoration: underline	We are a global house of brands.
class`text-link3-m`	font-family: HelveticaNeue73ExtendedBold, Helvetica, Arial, sans-serif; font-size: 0.875rem; letter-spacing: -0.0125rem; line-height: 1.5; text-decoration: underline	We are a global house of brands.
class`text-link3-s`	font-family: HelveticaNeue73ExtendedBold, Helvetica, Arial, sans-serif; font-size: 0.75rem; letter-spacing: -0.0125rem; line-height: 1.5; text-decoration: underline	We are a global house of brands.
class`text-link3-xs`	font-family: HelveticaNeue73ExtendedBold, Helvetica, Arial, sans-serif; font-size: 0.625rem; letter-spacing: -0.0125rem; line-height: 1.5; text-decoration: underline	We are a global house of brands.

Icons

Video

Path: icon/video/*

volume.svg
play.svg
play-button.svg
play-cta.svg
pause.svg
option.svg
mute.svg
fullscreen.svg
minimize.svg

Utility

Path: icon/utility/*

zoom.svg
close.svg
compare-inactive.svg
compare-selected.svg
compare-default.svg
chevron-up.svg
chevron-right.svg
chevron-left.svg
chevron-down.svg
caret-up.svg
caret-right.svg
caret-left.svg
caret-down.svg
minus.svg
plus.svg
selected.svg
step.svg
unselected.svg
share.svg
chevron-bold-up.svg
chevron-bold-down.svg
chevron-bold-right.svg
chevron-bold-left.svg
checkmark.svg
circle-checkmark-filled.svg
circle-checkmark-outline.svg
circle-outline.svg
range-slider-dot.svg
loading.svg
locate.svg
link.svg
m-back-white.svg
m-back.svg
m-close-white.svg
m-close.svg
m-minus-white.svg
m-plus-white.svg

Social

Path: icon/social/*

youtube.svg
weibo.svg
wechat.svg
twitter.svg
tiktok.svg
tumblr.svg
snapchat.svg
pinterest.svg
mail.svg
instagram.svg
facebook.svg
line.svg

Review

Path: icon/review/*

thumb-up.svg
thumb-up-filled.svg
thumb-down.svg
thumb-down-filled.svg
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
m-feedback-white.svg
m-feedback.svg

Object

Path: icon/object/*

birthday.svg
customer-service.svg
store.svg
phone.svg
package.svg
email.svg
edit.svg
credit-card.svg
call.svg
calendar.svg
chat.svg
lock.svg
offers.svg
early-access.svg
gift.svg
returns.svg
ruler.svg
shipping.svg
bag-size-compare.svg
bag-size.svg
e-gift-card.svg
text-message.svg
avatar.svg
truefit-50.svg
add-to-bag.svg
graphic-arrow-right.svg
graphic-arrow-left.svg
bopis.svg
view-similar.svg
view.svg
return.svg
repair.svg
pickup.svg
offer.svg
unlock.svg
gift-card.svg
customer-care.svg
create.svg
community.svg
care.svg
authenticity.svg
mannequin.svg
m-contact-white.svg
m-contact.svg
m-package-white.svg
m-package.svg
m-store-white.svg
m-store.svg

Navigation

Path: icon/navigation/*

account.svg
search.svg
location.svg
hamburger.svg
favorite.svg
favorite-fill.svg
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.svg
m-menu-search.svg
m-menu-search-white.svg
m-menu.svg
m-menu-white.svg
m-user.svg
m-user-white.svg

Form

Path: icon/form/*

success.svg
info.svg
error.svg
info-outlined.svg

Flag

Path: icon/flag/*

usa.svg
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.svg
paypal-credit.svg
paypal.svg
shoprunner.svg

Credit

Path: icon/credit/*

amex.svg
diners-club.svg
discover.svg
giftnow.svg
jcb.svg
klarna.svg
maestro.svg
mastercard.svg
union-pay.svg
visa.svg

Accordion

Path: icon/accordion/*

additional-details.svg
care-instructions.svg
shipping.svg
editors-notes.svg

Logos

Path: logo/*

favicon.svg
mark-black.svg
mark-white.svg
monogram-black.svg
monogram-white.svg
primary-black.svg
primary-white.svg

Coach^® Design Tokens

Theme: Japan

Assets

Themes

Variables

Color