Coachtopia® 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`	#f1f1f1
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` scss`$color-green`	#1e8563
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-blue` scss`$color-blue`	#497c9c
css`--color-brown` scss`$color-brown`	#a96242
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

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`	6px 0px 10px -3px rgba (0, 0, 0, 0.1)
css`--shadow-lbr` scss`$shadow-lbr`	0px 4px 4px rgba(0, 0, 0, 0.04), 0px 8px 24px rgba(0, 0, 0, 0.04)

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`	HelveticaNowMedium, Helvetica, Arial, sans-serif	Aa
css`--font-face1-medium` scss`$font-face1-medium`	Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans	Aa
css`--font-face1-bold` scss`$font-face1-bold`	HelveticaNowExtraBold, Helvetica, Arial, sans-serif	Aa
css`--font-face1-extended-normal` scss`$font-face1-extended-normal`	HelveticaNeue53ExtendedNormal, Helvetica, Arial, sans-serif	Aa
css`--font-face1-extended-bold` scss`$font-face1-extended-bold`	HelveticaNeue73ExtendedBold, Helvetica, Arial, sans-serif	Aa
css`--font-face1-extrabold` scss`$font-face1-extrabold`	Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans	Aa
css`--font-face2-normal` scss`$font-face2-normal`	HelveticaNowMedium, Helvetica, Arial, sans-serif	Aa
css`--font-face2-extended-bold` scss`$font-face2-extended-bold`	Helvetica Neue LT Pro Bold Extended, Tazugane Gothic Bold	Aa
css`--font-face2-extended-normal` scss`$font-face2-extended-normal`	Helvetica Neue LT Pro Extended, Tazugane Gothic Book	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-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-44` scss`$text-44`	2.75rem /44px/	Aa
css`--text-60` scss`$text-60`	3.75rem /60px/	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.025rem /0.4px/	Tapestry is a global house of brands.
css`--letter-spacing-m` scss`$letter-spacing-m`	0.05rem /0.8px/	Tapestry is a global house of brands.
css`--letter-spacing-l` scss`$letter-spacing-l`	0.0625rem /1px/	Tapestry is a global house of brands.
css`--letter-spacing-xl` scss`$letter-spacing-xl`	0.078125rem /1.25px/	Tapestry is a global house of brands.
css`--letter-spacing-2xl` scss`$letter-spacing-2xl`	0.109375rem /1.75px/	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`	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.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
class`text-display1-xs`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 1rem; letter-spacing: 0.0125rem; line-height: 1.2	We are a global house of brands.
class`text-display1-s`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 1.25rem; letter-spacing: 0.0125rem; line-height: 1.2	We are a global house of brands.
class`text-display1-m`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 1.625rem; letter-spacing: 0.0125rem; line-height: 1.15	We are a global house of brands.
class`text-display1-l`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 1.875rem; letter-spacing: 0.0125rem; line-height: 1.15	We are a global house of brands.
class`text-display1-xl`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 2.75rem; letter-spacing: 0.0125rem; line-height: 1.15	We are a global house of brands.
class`text-display1-2xl`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 3.75rem; letter-spacing: 0.0125rem; line-height: 1.15	We are a global house of brands.
class`text-display2-xs`	font-family: Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans; font-size: 1rem; letter-spacing: 0.0125rem; line-height: 1.35	We are a global house of brands.
class`text-display2-s`	font-family: Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans; font-size: 1.25rem; letter-spacing: 0.0125rem; line-height: 1.35	We are a global house of brands.
class`text-display2-m`	font-family: Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans; font-size: 1.625rem; letter-spacing: 0.0125rem; line-height: 1.15	We are a global house of brands.
class`text-display2-l`	font-family: Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans; font-size: 1.875rem; letter-spacing: 0.0125rem; line-height: 1.15	We are a global house of brands.
class`text-display2-xl`	font-family: Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans; font-size: 2.75rem; letter-spacing: 0.0125rem; line-height: 1.15	We are a global house of brands.
class`text-display2-2xl`	font-family: Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans; font-size: 3.75rem; letter-spacing: 0.0125rem; line-height: 1.15	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.2	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.2	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.2	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.2	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.2	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.2	We are a global house of brands.
class`text-body1-xs`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 0.5rem; letter-spacing: 0.025rem; line-height: 1.5	We are a global house of brands.
class`text-body1-s`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 0.75rem; letter-spacing: 0.0125rem; line-height: 1.4	We are a global house of brands.
class`text-body1-m`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 0.875rem; letter-spacing: 0.0125rem; line-height: 1.4	We are a global house of brands.
class`text-body1-l`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 1rem; letter-spacing: 0.0125rem; line-height: 1.35	We are a global house of brands.
class`text-body2-xs`	font-family: Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans; font-size: 0.5rem; letter-spacing: 0.025rem; line-height: 1.5	We are a global house of brands.
class`text-body2-s`	font-family: Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans; font-size: 0.75rem; letter-spacing: 0.0125rem; line-height: 1.4	We are a global house of brands.
class`text-body2-m`	font-family: Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans; font-size: 0.875rem; letter-spacing: 0.0125rem; line-height: 1.4	We are a global house of brands.
class`text-body2-l`	font-family: Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans; font-size: 1rem; line-height: 1.35; letter-spacing: 0.0125rem	We are a global house of brands.
class`text-eyebrow1-m`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 0.625rem; letter-spacing: 0.0625rem; line-height: 1.35; text-transform: uppercase	We are a global house of brands.
class`text-eyebrow1-l`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 0.75rem; letter-spacing: 0.078125rem; line-height: 1.15; text-transform: uppercase	We are a global house of brands.
class`text-badge1-xs`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 0.625rem; letter-spacing: 0.025rem; line-height: 1.35; text-transform: uppercase	We are a global house of brands.
class`text-label1-m`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 0.75rem; letter-spacing: 0.0625rem; line-height: 1.35; text-transform: uppercase	We are a global house of brands.
class`text-cta1-m`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 0.875rem; letter-spacing: 0.078125rem; line-height: 1.15; text-transform: uppercase	We are a global house of brands.
class`text-cta1-s`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 0.75rem; letter-spacing: 0.078125rem; line-height: 1.15; text-transform: uppercase	We are a global house of brands.
class`text-cta1-xs`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 0.625rem; letter-spacing: 0.0625rem; line-height: 1.25; text-transform: uppercase	We are a global house of brands.
class`text-cta2-m`	font-family: Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans; font-size: 0.875rem; letter-spacing: 0.078125rem; line-height: 1.15; text-transform: uppercase	We are a global house of brands.
class`text-cta2-s`	font-family: Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans; font-size: 0.75rem; letter-spacing: 0.078125rem; line-height: 1.15; text-transform: uppercase	We are a global house of brands.
class`text-cta2-xs`	font-family: Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans; font-size: 0.625rem; letter-spacing: 0.0625rem; line-height: 1.25; text-transform: uppercase	We are a global house of brands.
class`text-cta3-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-cta3-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-cta3-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-link1-l`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 1rem; letter-spacing: 0.0125rem; line-height: 1.4; text-decoration: underline	We are a global house of brands.
class`text-link1-m`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 0.875rem; letter-spacing: 0.0125rem; line-height: 1.4; text-decoration: underline	We are a global house of brands.
class`text-link1-s`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 0.75rem; letter-spacing: 0.0125rem; line-height: 1.4; text-decoration: underline	We are a global house of brands.
class`text-link1-xs`	font-family: Meiryo Bold, BIZ UDPGothic Bold, Hiragino Kaku Gothic Pro W6, Hiragino Sans Bold, HelveticaNowExtraBold, sans; font-size: 0.625rem; letter-spacing: 0.0125rem; line-height: 1.4; text-decoration: underline	We are a global house of brands.
class`text-link2-l`	font-family: Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans; font-size: 1rem; letter-spacing: 0.0125rem; line-height: 1.4; text-decoration: underline	We are a global house of brands.
class`text-link2-m`	font-family: Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans; font-size: 0.875rem; letter-spacing: 0.0125rem; line-height: 1.4; text-decoration: underline	We are a global house of brands.
class`text-link2-s`	font-family: Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans; font-size: 0.75rem; letter-spacing: 0.0125rem; line-height: 1.4; text-decoration: underline	We are a global house of brands.
class`text-link2-xs`	font-family: Yu Gothic Regular, BIZ UDPGothic Regular, Hiragino Maru Gothic W4, Hiragino Sans Normal, HelveticaNowMedium, sans; font-size: 0.625rem; letter-spacing: 0.0125rem; line-height: 1.4; 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.4; 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.4; 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.4; 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.4; 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
back-to-top.svg
directional-arrow.svg
exit-full-screen-button.svg
full-screen-button.svg
link.svg
loading.svg
locate.svg
move.svg
mute-button.svg
pause-button.svg
play-button.svg
product-hotspot.svg
settings.svg
unmute-button.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
discord.svg
poshmark.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

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
repair-service.svg
pickup.svg
offer.svg
unlock.svg
gift-card.svg
customer-care.svg
create.svg
community.svg
care.svg
product-care.svg
authenticity.svg
apparel.svg
bags.svg
footprint.svg
reduction.svg
loop.svg
upcrafted.svg
my-products.svg
preferences.svg
purchases.svg
farming.svg
renewable.svg
scale.svg
small-goods.svg
sneaker.svg
trade-in.svg
re-gift.svg
mannequin.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
logout.svg
filter-and-sort.svg
search-burger.svg
search-burger-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

Characters

Path: icon/characters/*

walking-sun.svg
smiley-with-flag.svg
walking-flower.svg
standing-flower.svg
walking-heart.svg
sun.svg
twin-flower.svg
big-eye-flower.svg
smiling-guy.svg
connection-cloud.svg
globe.svg
globe-color.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

Coachtopia^® Design Tokens

Theme: Japan

Assets

Themes

Variables

Color