ws-voice-infinity-global-module 1.8.1 → 1.8.3

package/lib/wsVoiceFontMap.scss

@@ -1,2689 +1,2689 @@
-@import 'fontFaces.scss';
-@import 'variables.scss';
-@import 'wsVoiceColorMap';
-@import 'mixins.scss';
-
-/* Оставил для фолбэка */
-%ws-san-francisco-text-bold {
-  font-family: 'sanFranciscoTextBold', sans-serif !important;
-}
-
-%ws-font-weight-bold {
-  font-family: 'sanFranciscoTextBold', sans-serif !important;
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplayBold', sans-serif !important;
-  }
-}
-
-/* *** PAGE-TITLE-1 *** */
-%ws-page-title-1 {
-  color: $bs750;
-  font-family: 'sanFranciscoTextBold', sans-serif;
-  font-size: 48px;
-  line-height: 48px;
-
-  @include maxWidth(768) {
-    font-size: 38px;
-    line-height: 38px;
-  }
-
-  @include maxWidth(480) {
-    font-size: 30px;
-    line-height: 30px;
-  }
-
-  @include maxWidth(375) {
-    font-size: 28px;
-    line-height: 28px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($kamTemplate) {
-    font-family: 'gothamProBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoCondensedBold', sans-serif;
-  }
-
-  @include styleFor($usrTemplate) {
-    font-family: 'latoExtraBold', sans-serif;
-  }
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplayMedium', sans-serif;
-  }
-
-  @include styleFor($apiriTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-    font-weight: bold;
-  }
-}
-
-.ws-page-title-1-primary {
-  @extend %ws-page-title-1;
-
-  @include styleFor($kamTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($r41Template) {
-    color: $dss900;
-  }
-}
-
-.ws-page-title-1-secondary {
-  @extend %ws-page-title-1;
-
-  color: $pb500;
-
-  @include styleFor($kamTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss090;
-  }
-}
-
-.ws-page-title-1-white {
-  @extend %ws-page-title-1;
-
-  color: $bs000;
-}
-
-/* *** PAGE-TITLE-2 *** */
-%ws-page-title-2 {
-  color: $bs750;
-  font-family: 'sanFranciscoTextBold', sans-serif;
-  font-size: 52px;
-
-  @include maxWidth(768) {
-    font-size: 43px;
-  }
-
-  @include maxWidth(480) {
-    font-size: 38px;
-  }
-
-  @include maxWidth(375) {
-    font-size: 36px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($kamTemplate) {
-    font-family: 'gothamProBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoCondensedBold', sans-serif;
-    font-size: 56px;
-
-    @include maxWidth(768) {
-      font-size: 40px;
-    }
-
-    @include maxWidth(480) {
-      font-size: 36px;
-    }
-
-    @include maxWidth(375) {
-      font-size: 32px;
-    }
-  }
-
-  @include styleFor($usrTemplate) {
-    font-family: 'latoExtraBold', sans-serif;
-    font-size: 56px;
-
-    @include maxWidth(768) {
-      font-size: 40px;
-    }
-
-    @include maxWidth(480) {
-      font-size: 36px;
-    }
-
-    @include maxWidth(375) {
-      font-size: 32px;
-    }
-  }
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplayMedium', sans-serif;
-    font-size: 56px;
-
-    @include maxWidth(768) {
-      font-size: 40px;
-    }
-
-    @include maxWidth(480) {
-      font-size: 36px;
-    }
-
-    @include maxWidth(375) {
-      font-size: 32px;
-    }
-  }
-
-  @include styleFor($apiriTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-    font-weight: bold;
-  }
-}
-
-.ws-page-title-2-primary {
-  @extend %ws-page-title-2;
-
-  @include styleFor($kamTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($r41Template) {
-    color: $dss900;
-  }
-}
-
-.ws-page-title-2-secondary {
-  @extend %ws-page-title-2;
-
-  color: $pb500;
-
-  @include styleFor($kamTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss090;
-  }
-}
-
-.ws-page-title-2-white {
-  @extend %ws-page-title-2;
-
-  color: $bs000;
-}
-
-/* *** PAGE-HEADER *** */
-%ws-page-header {
-  color: $bs750;
-  font-family: 'sanFranciscoTextRegular', sans-serif;
-  font-size: 40px;
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($kamTemplate) {
-    font-family: 'gothamProBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoCondensedBold', sans-serif;
-  }
-
-  @include styleFor($usrTemplate) {
-    font-family: 'latoExtraBold', sans-serif;
-  }
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplayMedium', sans-serif;
-  }
-
-  @include styleFor($apiriTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-    font-size: 64px;
-  }
-
-  @include maxWidth(768) {
-    font-size: 31px;
-  }
-
-  @include maxWidth(480) {
-    font-size: 26px;
-  }
-
-  @include maxWidth(375) {
-    font-size: 24px;
-  }
-}
-
-.ws-page-header-primary {
-  @extend %ws-page-header;
-
-  @include styleFor($kamTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($r41Template) {
-    color: $dss900;
-  }
-}
-
-.ws-page-header-primary--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-page-header-secondary {
-  @extend %ws-page-header;
-
-  color: $pb500;
-
-  @include styleFor($kamTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss090;
-  }
-}
-
-.ws-page-header-secondary--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-page-header-white {
-  @extend %ws-page-header;
-
-  color: $bs000;
-}
-
-.ws-page-header-white--bold {
-  @extend %ws-font-weight-bold;
-}
-
-/* *** SUBHEADER-1 *** */
-%ws-subheader-1 {
-  color: $bs750;
-  font-family: 'robotoSlabBold', sans-serif;
-  font-size: 16px;
-
-  @include maxWidth(768) {
-    font-size: 15px;
-  }
-
-  @include maxWidth(480) {
-    font-size: 14px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($kamTemplate) {
-    font-family: 'gothamProBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoCondensedBold', sans-serif;
-    font-size: 18px;
-
-    @include maxWidth(768) {
-      font-size: 17px;
-    }
-
-    @include maxWidth(480) {
-      font-size: 16px;
-    }
-  }
-
-  @include styleFor($usrTemplate) {
-    font-family: 'latoBold', sans-serif;
-    font-size: 18px;
-
-    @include maxWidth(768) {
-      font-size: 17px;
-    }
-
-    @include maxWidth(480) {
-      font-size: 16px;
-    }
-  }
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplayMedium', sans-serif;
-    font-size: 18px;
-
-    @include maxWidth(768) {
-      font-size: 17px;
-    }
-
-    @include maxWidth(480) {
-      font-size: 16px;
-    }
-  }
-
-  @include styleFor($apiriTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-    font-weight: bold;
-    font-size: 20px;
-  }
-}
-
-.ws-subheader-1-primary {
-  @extend %ws-subheader-1;
-
-  @include styleFor($kamTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($r41Template) {
-    color: $dss900;
-  }
-}
-
-.ws-subheader-1-secondary {
-  @extend %ws-subheader-1;
-
-  color: $pb500;
-
-  @include styleFor($kamTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss090;
-  }
-}
-
-.ws-subheader-1-white {
-  @extend %ws-subheader-1;
-
-  color: $bs000;
-}
-
-/* *** SUBHEADER-2 *** */
-%ws-subheader-2 {
-  color: $bs750;
-  font-family: 'robotoSlabBold', sans-serif;
-  font-size: 22px;
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($kamTemplate) {
-    font-family: 'gothamProBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoCondensedBold', sans-serif;
-  }
-
-  @include styleFor($usrTemplate) {
-    font-family: 'latoBold', sans-serif;
-  }
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplaySemibold', sans-serif;
-  }
-
-  @include styleFor($apiriTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-    font-weight: bold;
-    font-size: 24px;
-  }
-  
-  @include maxWidth(768) {
-    font-size: 20px;
-  }
-
-  @include maxWidth(480) {
-    font-size: 18px;
-  }
-}
-
-.ws-subheader-2-primary {
-  @extend %ws-subheader-2;
-
-  @include styleFor($kamTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($r41Template) {
-    color: $dss900;
-  }
-}
-
-.ws-subheader-2-secondary {
-  @extend %ws-subheader-2;
-
-  color: $pb500;
-
-  @include styleFor($kamTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss090;
-  }
-
-  @include styleFor($apiriTemplate) {
-    color: $sg800;
-  }
-}
-
-.ws-subheader-2-white {
-  @extend %ws-subheader-2;
-
-  color: $bs000;
-}
-
-/* *** SUBHEADER-3 *** */
-%ws-subheader-3 {
-  color: $bs750;
-  font-family: 'robotoSlabBold', sans-serif;
-  font-size: 28px;
-
-  @include maxWidth(768) {
-    font-size: 24px;
-  }
-
-  @include maxWidth(480) {
-    font-size: 21px;
-  }
-
-  @include maxWidth(375) {
-    font-size: 20px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($kamTemplate) {
-    font-family: 'gothamProBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoCondensedBold', sans-serif;
-  }
-
-  @include styleFor($usrTemplate) {
-    font-family: 'latoBold', sans-serif;
-  }
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplayBold', sans-serif;
-  }
-
-  @include styleFor($apiriTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-    font-weight: bold;
-  }
-}
-
-.ws-subheader-3-primary {
-  @extend %ws-subheader-3;
-
-  @include styleFor($kamTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($r41Template) {
-    color: $dss900;
-  }
-}
-
-.ws-subheader-3-secondary {
-  @extend %ws-subheader-3;
-
-  color: $pb500;
-
-  @include styleFor($kamTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss090;
-  }
-}
-
-.ws-subheader-3-white {
-  @extend %ws-subheader-3;
-
-  color: $bs000;
-}
-
-/* *** SUBHEADER-4 *** */
-%ws-subheader-4 {
-  color: $bs750;
-  font-family: 'robotoSlabBold', sans-serif;
-  font-size: 36px;
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($kamTemplate) {
-    font-family: 'gothamProBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoCondensedBold', sans-serif;
-  }
-
-  @include styleFor($usrTemplate) {
-    font-family: 'latoBold', sans-serif;
-  }
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplaySemibold', sans-serif;
-  }
-
-  @include styleFor($apiriTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-    font-size: 32px;
-    font-weight: bold;
-  }
-  
-  @include maxWidth(768) {
-    font-size: 30px;
-  }
-
-  @include maxWidth(480) {
-    font-size: 26px;
-  }
-
-  @include maxWidth(375) {
-    font-size: 24px;
-  }
-}
-
-.ws-subheader-4-primary {
-  @extend %ws-subheader-4;
-
-  @include styleFor($kamTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($r41Template) {
-    color: $dss900;
-  }
-}
-
-.ws-subheader-4-secondary {
-  @extend %ws-subheader-4;
-
-  color: $pb500;
-
-  @include styleFor($kamTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss090;
-  }
-}
-
-.ws-subheader-4-white {
-  @extend %ws-subheader-4;
-
-  color: $bs000;
-}
-
-/* *** BODY-1 *** */
-%ws-body-1 {
-  color: $bs750;
-  font-family: 'sanFranciscoTextRegular', sans-serif;
-  font-size: 15px;
-
-  @include maxWidth(768) {
-    font-size: 14px;
-  }
-
-  @include maxWidth(480) {
-    font-size: 13px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratRegular', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-  }
-
-  @include styleFor($usrTemplate) {
-    font-family: 'latoRegular', sans-serif;
-  }
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplayRegular', sans-serif;
-  }
-
-  @include styleFor($apiriTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-  }
-}
-
-.ws-body-1-primary {
-  @extend %ws-body-1;
-
-  @include styleFor($kamTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($r41Template) {
-    color: $dss900;
-  }
-}
-
-.ws-body-1-primary--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-1-secondary {
-  @extend %ws-body-1;
-
-  color: $pb500;
-
-  @include styleFor($kamTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss090;
-  }
-}
-
-.ws-body-1-secondary--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-1-white {
-  @extend %ws-body-1;
-
-  color: $bs000;
-}
-
-.ws-body-1-white--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - body-1-warning
-.ws-body-1-warning {
-  @extend %ws-body-1;
-
-  color: $oy600;
-
-  @include styleFor($adTemplate) {
-    color: $ra500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $ev500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $oy500;
-  }
-}
-
-.ws-body-1-warning--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - body-1-success
-.ws-body-1-success {
-  @extend %ws-body-1;
-
-  color: $ae500;
-
-  @include styleFor($adTemplate) {
-    color: $ra500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $gc500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $gc400;
-  }
-}
-
-.ws-body-1-success--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-1-error {
-  @extend %ws-body-1;
-
-  color: $ru500;
-
-  @include styleFor($adTemplate) {
-    color: $ra500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $ev500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $ra300;
-  }
-}
-
-.ws-body-1-error--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - body-1-link
-.ws-body-1-link {
-  @extend %ws-body-1;
-
-  color: $de500;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-regular-blue;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ra500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $sr600;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab500;
-  }
-}
-
-.ws-body-1-link--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - body-1-progress
-.ws-body-1-progress {
-  @extend %ws-body-1;
-
-  color: $cb200;
-
-  @include styleFor($adTemplate) {
-    color: $ra500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $sr500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab500;
-  }
-}
-
-.ws-body-1-progress--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-1-gray {
-  @extend %ws-body-1;
-
-  color: $gray-color;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-gray;
-  }
-}
-
-.ws-body-1-gray--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - body-1-satisfaction-0
-.ws-body-1-satisfaction-zero {
-  @extend %ws-body-1;
-
-  color: $ru500;
-
-  @include styleFor($kamTemplate) {
-    color: $ev500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $ev500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $ra300;
-  }
-}
-
-.ws-body-1-satisfaction-zero--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-1-satisfaction-low {
-  @extend %ws-body-1;
-
-  color: $oc500;
-
-  @include styleFor($r41Template) {
-    color: $ru090;
-  }
-}
-
-.ws-body-1-satisfaction-low--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old body-1-satisfaction-40
-.ws-body-1-satisfaction-regular {
-  @extend %ws-body-1;
-
-  color: $oy500;
-}
-
-.ws-body-1-satisfaction-regular--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old body-1-satisfaction-60
-.ws-body-1-satisfaction-medium {
-  @extend %ws-body-1;
-
-  color: $ae100;
-}
-
-.ws-body-1-satisfaction-medium--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - body-1-satisfaction-80
-.ws-body-1-satisfaction-high {
-  @extend %ws-body-1;
-
-  color: $ae500;
-
-  @include styleFor($kamTemplate) {
-    color: $gc500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $gc500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $gc400;
-  }
-}
-
-.ws-body-1-satisfaction-high--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - body-1-action-secondary
-.ws-body-1-light {
-  @extend %ws-body-1;
-
-  color: $cb200;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-action-secondary;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs250;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ra400;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $sr500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab500;
-  }
-}
-
-.ws-body-1-light--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-1-regular {
-  @extend %ws-body-1;
-
-  color: $de500;
-
-  @include styleFor($r41Template) {
-    color: $cab700;
-  }
-}
-
-.ws-body-1-regular--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-1-medium {
-  @extend %ws-body-1;
-
-  color: $cb500;
-
-  @include styleFor($r41Template) {
-    color: $cab800;
-  }
-}
-
-.ws-body-1-medium--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-1-dark {
-  @extend %ws-body-1;
-
-  color: $cb900;
-
-  @include styleFor($r41Template) {
-    color: $dss800;
-  }
-}
-
-.ws-body-1-dark--bold {
-  @extend %ws-font-weight-bold;
-}
-
-/* *** BODY-2 *** */
-%ws-body-2 {
-  color: $bs750;
-  font-family: 'sanFranciscoTextRegular', sans-serif;
-  font-size: 16px;
-
-  @include maxWidth(768) {
-    font-size: 15px;
-  }
-
-  @include maxWidth(480) {
-    font-size: 14px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratRegular', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-  }
-
-  @include styleFor($usrTemplate) {
-    font-family: 'latoRegular', sans-serif;
-  }
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplayRegular', sans-serif;
-  }
-
-  @include styleFor($apiriTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-  }
-}
-
-.ws-body-2-primary {
-  @extend %ws-body-2;
-
-  @include styleFor($kamTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($r41Template) {
-    color: $dss900;
-  }
-}
-
-.ws-body-2-primary--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-2-secondary {
-  @extend %ws-body-2;
-
-  color: $pb500;
-
-  @include styleFor($kamTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss090;
-  }
-}
-
-.ws-body-2-secondary--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-2-white {
-  @extend %ws-body-2;
-
-  color: $bs000;
-}
-
-.ws-body-2-white--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old body-2-link
-.ws-body-2-link {
-  @extend %ws-body-2;
-
-  color: $de500;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-regular-blue;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ra500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $sr600;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab500;
-  }
-}
-
-.ws-body-2-link--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-2-progress {
-  @extend %ws-body-2;
-
-  color: $cb200;
-
-  @include styleFor($adTemplate) {
-    color: $ra500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $sr500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab500;
-  }
-}
-
-.ws-body-2-progress--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-2-gray {
-  @extend %ws-body-2;
-
-  color: $gray;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-gray;
-  }
-}
-
-.ws-body-2-gray--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - body-2-success
-.ws-body-2-success {
-  @extend %ws-body-2;
-
-  color: $ae500;
-
-  @include styleFor($adTemplate) {
-    color: $ra500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $gc500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $gc400;
-  }
-}
-
-.ws-body-2-success--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - body-2-warning
-.ws-body-2-warning {
-  @extend %ws-body-2;
-
-  color: $oy600;
-
-  @include styleFor($adTemplate) {
-    color: $ra500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $ev500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $oy500;
-  }
-}
-
-.ws-body-2-warning--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - body-1-satisfaction-0
-.ws-body-2-satisfaction-zero {
-  @extend %ws-body-2;
-
-  color: $ru500;
-
-  @include styleFor($kamTemplate) {
-    color: $ev500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $ev500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $ra300;
-  }
-}
-
-.ws-body-2-satisfaction-zero--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-2-satisfaction-low {
-  @extend %ws-body-2;
-
-  color: $oc500;
-
-  @include styleFor($r41Template) {
-    color: $ru090;
-  }
-}
-
-.ws-body-2-satisfaction-low--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - body-2-satisfaction-40
-.ws-body-2-satisfaction-regular {
-  @extend %ws-body-2;
-
-  color: $oy500;
-
-  @include styleFor($kamTemplate) {
-    color: $gm500;
-  }
-}
-
-.ws-body-2-satisfaction-regular--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old body-2-satisfaction-60
-.ws-body-2-satisfaction-medium {
-  @extend %ws-body-2;
-
-  color: $ae100;
-}
-
-.ws-body-2-satisfaction-medium--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - body-2-satisfaction-80
-.ws-body-2-satisfaction-high {
-  @extend %ws-body-2;
-
-  color: $ae500;
-
-  @include styleFor($kamTemplate) {
-    color: $gc500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $gc500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $gc400;
-  }
-}
-
-.ws-body-2-satisfaction-high--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-2-light {
-  @extend %ws-body-2;
-
-  color: $cb200;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-action-secondary;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs250;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ra400;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $sr500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab500;
-  }
-}
-
-.ws-body-2-light--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-2-regular {
-  @extend %ws-body-2;
-
-  color: $de500;
-
-  @include styleFor($r41Template) {
-    color: $cab700;
-  }
-}
-
-.ws-body-2-regular--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-2-medium {
-  @extend %ws-body-2;
-
-  color: $cb500;
-
-  @include styleFor($r41Template) {
-    color: $cab800;
-  }
-}
-
-.ws-body-2-medium--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-2-dark {
-  @extend %ws-body-2;
-
-  color: $cb900;
-
-  @include styleFor($r41Template) {
-    color: $dss800;
-  }
-}
-
-.ws-body-2-dark--bold {
-  @extend %ws-font-weight-bold;
-}
-
-/* *** BODY-3 *** */
-%ws-body-3 {
-  color: $bs750;
-  font-family: 'sanFranciscoTextRegular', sans-serif;
-  font-size: 18px;
-
-  @include maxWidth(768) {
-    font-size: 16px;
-  }
-
-  @include maxWidth(480) {
-    font-size: 15px;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-  }
-
-  @include styleFor($usrTemplate) {
-    font-family: 'latoRegular', sans-serif;
-  }
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplayRegular', sans-serif;
-  }
-
-  @include styleFor($skhTemplate) {
-    font-family: 'sfUiDisplayRegular', sans-serif;
-  }
-
-  @include styleFor($apiriTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-  }
-}
-
-.ws-body-3-primary {
-  @extend %ws-body-3;
-
-  @include styleFor($kamTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($r41Template) {
-    color: $dss900;
-  }
-}
-
-.ws-body-3-primary--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-3-secondary {
-  @extend %ws-body-3;
-
-  color: $pb500;
-
-  @include styleFor($kamTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss090;
-  }
-}
-
-.ws-body-3-secondary--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-3-white {
-  @extend %ws-body-3;
-
-  color: $bs000;
-}
-
-.ws-body-3-white--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - body-3-link
-.ws-body-3-link {
-  @extend %ws-body-3;
-
-  color: $de500;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-regular-blue;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ra500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $sr600;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab500;
-  }
-}
-
-.ws-body-3-link--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - body-3-action-secondary
-.ws-body-3-light {
-  @extend %ws-body-3;
-
-  color: $cb200;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-action-secondary;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs250;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ra400;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $sr500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab500;
-  }
-}
-
-.ws-body-3-light--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-3-regular {
-  @extend %ws-body-3;
-
-  color: $de500;
-
-  @include styleFor($r41Template) {
-    color: $cab700;
-  }
-}
-
-.ws-body-3-regular--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-3-medium {
-  @extend %ws-body-3;
-
-  color: $cb500;
-
-  @include styleFor($r41Template) {
-    color: $cab800;
-  }
-}
-
-.ws-body-3-medium--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-3-dark {
-  @extend %ws-body-3;
-
-  color: $cb900;
-
-  @include styleFor($r41Template) {
-    color: $dss800;
-  }
-}
-
-.ws-body-3-dark--bold {
-  @extend %ws-font-weight-bold;
-}
-
-/* *** BODY-4 *** */
-%ws-body-4 {
-  color: $bs750;
-  font-family: 'sanFranciscoTextRegular', sans-serif;
-  font-size: 24px;
-
-  @include maxWidth(768) {
-    font-size: 22px;
-  }
-
-  @include maxWidth(480) {
-    font-size: 20px;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-    font-size: 22px;
-
-    @include maxWidth(768) {
-      font-size: 20px;
-    }
-
-    @include maxWidth(480) {
-      font-size: 18px;
-    }
-  }
-
-  @include styleFor($usrTemplate) {
-    font-family: 'latoRegular', sans-serif;
-  }
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplayRegular', sans-serif;
-    font-size: 22px;
-
-    @include maxWidth(768) {
-      font-size: 20px;
-    }
-
-    @include maxWidth(480) {
-      font-size: 18px;
-    }
-  }
-
-  @include styleFor($apiriTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-    font-size: 20px;
-
-    @include maxWidth(768) {
-      font-size: 18px;
-    }
-  }
-}
-
-.ws-body-4-primary {
-  @extend %ws-body-4;
-
-  @include styleFor($kamTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($r41Template) {
-    color: $dss900;
-  }
-}
-
-.ws-body-4-primary--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-4-secondary {
-  @extend %ws-body-4;
-
-  color: $pb500;
-
-  @include styleFor($kamTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss090;
-  }
-}
-
-.ws-body-4-secondary--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-4-white {
-  @extend %ws-body-4;
-
-  color: $bs000;
-}
-
-.ws-body-4-white--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-4-green {
-  @extend %ws-body-4;
-
-  color: $green;
-}
-
-.ws-body-4-green--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - body-4-link
-.ws-body-4-link {
-  @extend %ws-body-4;
-
-  color: $de500;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-regular-blue;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ra500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $sr600;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab500;
-  }
-}
-
-.ws-body-4-link--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-4-peach {
-  @extend %ws-body-4;
-
-  color: $peach;
-}
-
-.ws-body-4-peach--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-4-blue-gray {
-  @extend %ws-body-4;
-
-  color: $blue-gray;
-
-  @include styleFor($kamTemplate) {
-    @extend %ws-font-weight-bold;
-
-    color: $kam-medium-blue;
-    font-size: 16px;
-  }
-}
-
-.ws-body-4-blue-gray--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - body-4-action-secondary
-.ws-body-4-light {
-  @extend %ws-body-4;
-
-  color: $cb200;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-action-secondary;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs250;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ra400;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $sr500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab500;
-  }
-}
-
-.ws-body-4-light--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-4-regular {
-  @extend %ws-body-4;
-
-  color: $de500;
-
-  @include styleFor($r41Template) {
-    color: $cab700;
-  }
-}
-
-.ws-body-4-regular--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-4-medium {
-  @extend %ws-body-4;
-
-  color: $cb500;
-
-  @include styleFor($r41Template) {
-    color: $cab800;
-  }
-}
-
-.ws-body-4-medium--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-body-4-dark {
-  @extend %ws-body-4;
-
-  color: $cb900;
-
-  @include styleFor($r41Template) {
-    color: $dss800;
-  }
-}
-
-.ws-body-4-dark--bold {
-  @extend %ws-font-weight-bold;
-}
-
-/* *** LABEL-1 *** */
-%ws-label-1 {
-  background-color: inherit;
-  color: $bs750;
-  font-family: 'sourceSansProBold', sans-serif;
-  font-size: 14px;
-
-  @include maxWidth(768) {
-    font-size: 13px;
-  }
-
-  @include maxWidth(480) {
-    font-size: 12px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoBold', sans-serif;
-  }
-
-  @include styleFor($usrTemplate) {
-    font-family: 'latoBold', sans-serif;
-  }
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplayHeavy', sans-serif;
-  }
-
-  @include styleFor($apiriTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-    font-size: 16px;
-    font-weight: 500;
-  }
-}
-
-// Old - label-primary
-.ws-label-1-primary {
-  @extend %ws-label-1;
-
-  @include styleFor($kamTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($r41Template) {
-    color: $dss900;
-  }
-}
-
-// Old - label-secondary
-.ws-label-1-secondary {
-  @extend %ws-label-1;
-
-  color: $pb500;
-
-  @include styleFor($kamTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss090;
-  }
-}
-
-// Old - label-white
-.ws-label-1-white {
-  @extend %ws-label-1;
-
-  color: $bs000;
-}
-
-/* *** LABEL-2 *** */
-%ws-label-2 {
-  font-family: 'sourceSansProBold', sans-serif;
-  font-size: 14px;
-
-  @include maxWidth(768) {
-    font-size: 13px;
-  }
-
-  @include maxWidth(480) {
-    font-size: 12px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoBold', sans-serif;
-  }
-
-  @include styleFor($usrTemplate) {
-    font-family: 'latoBold', sans-serif;
-  }
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplayHeavy', sans-serif;
-  }
-
-  @include styleFor($apiriTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-  }
-}
-
-.ws-label-2-primary {
-  @extend %ws-label-2;
-
-  @include styleFor($kamTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($r41Template) {
-    color: $dss900;
-  }
-}
-
-/* *** LABEL-3 *** */
-%ws-label-3 {
-  color: $bs750;
-  font-family: 'sourceSansProBold', sans-serif;
-  font-size: 16px;
-
-  @include maxWidth(768) {
-    font-size: 15px;
-  }
-
-  @include maxWidth(480) {
-    font-size: 14px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoBold', sans-serif;
-  }
-
-  @include styleFor($usrTemplate) {
-    font-family: 'latoBold', sans-serif;
-  }
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplayHeavy', sans-serif;
-  }
-
-  @include styleFor($apiriTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-  }
-}
-
-.ws-label-3-primary {
-  @extend %ws-label-3;
-
-  @include styleFor($kamTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($r41Template) {
-    color: $dss900;
-  }
-}
-
-/* *** CAPTION-1 *** */
-%ws-caption-1 {
-  color: $bs750;
-  font-family: 'sanFranciscoTextRegular', sans-serif;
-  font-size: 13px;
-
-  @include maxWidth(768) {
-    font-size: 12px;
-  }
-
-  @include maxWidth(480) {
-    font-size: 11px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratRegular', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoRegular', sans-serif;
-  }
-
-  @include styleFor($usrTemplate) {
-    font-family: 'latoRegular', sans-serif;
-  }
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplayRegular', sans-serif;
-  }
-}
-
-// Old - caption-primary
-.ws-caption-1-primary {
-  @extend %ws-caption-1;
-
-  @include styleFor($kamTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($r41Template) {
-    color: $dss900;
-  }
-}
-
-.ws-caption-1-primary--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - caption-secondary
-.ws-caption-1-secondary {
-  @extend %ws-caption-1;
-
-  color: $pb500;
-
-  @include styleFor($kamTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss090;
-  }
-}
-
-.ws-caption-1-secondary--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - caption-white
-.ws-caption-1-white {
-  @extend %ws-caption-1;
-
-  color: $bs000;
-}
-
-.ws-caption-1-white--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-caption-1-light {
-  @extend %ws-caption-1;
-
-  color: $cb200;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-action-secondary;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs250;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ra400;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $sr500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab500;
-  }
-}
-
-.ws-caption-1-light--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-caption-1-regular {
-  @extend %ws-caption-1;
-
-  color: $de500;
-
-  @include styleFor($r41Template) {
-    color: $cab700;
-  }
-}
-
-.ws-caption-1-regular--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-caption-1-medium {
-  @extend %ws-caption-1;
-
-  color: $cb500;
-
-  @include styleFor($adTemplate) {
-    color: $ra800;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss200;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab800;
-  }
-}
-
-.ws-caption-1-medium--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-caption-1-dark {
-  @extend %ws-caption-1;
-
-  color: $cb900;
-
-  @include styleFor($r41Template) {
-    color: $dss800;
-  }
-}
-
-.ws-caption-1-dark--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-caption-1-peach {
-  @extend %ws-caption-1;
-
-  color: $peach;
-}
-
-.ws-caption-1-peach--bold {
-  @extend %ws-font-weight-bold;
-}
-
-.ws-caption-1-gray-title {
-  @extend %ws-caption-1;
-
-  color: $gray-title;
-}
-
-.ws-caption-1-gray-title--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - caption-warning
-.ws-caption-1-warning {
-  @extend %ws-caption-1;
-
-  color: $oy600;
-
-  @include styleFor($adTemplate) {
-    color: $ra500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $ev500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $oy500;
-  }
-}
-
-.ws-caption-1-warning--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - caption-error
-.ws-caption-1-error {
-  @extend %ws-caption-1;
-
-  color: $ru500;
-
-  @include styleFor($adTemplate) {
-    color: $ra500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $ra300;
-  }
-}
-
-.ws-caption-1-error--bold {
-  @extend %ws-font-weight-bold;
-}
-
-// Old - caption-link
-.ws-caption-1-link {
-  @extend %ws-caption-1;
-
-  color: $de500;
-
-  @include styleFor($adTemplate) {
-    color: $ra500;
-  }
-
-  @include styleFor($kamTemplate) {
-    color: $kam-regular-blue;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $sr600;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab500;
-  }
-}
-
-.ws-caption-1-link--bold {
-  @extend %ws-font-weight-bold;
-}
-
-%ws-action-1 {
-  color: $bs750;
-  font-family: 'sourceSansProBold', sans-serif;
-  font-size: 16px;
-
-  @include maxWidth(768) {
-    font-size: 15px;
-  }
-
-  @include maxWidth(480) {
-    font-size: 14px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoBold', sans-serif;
-  }
-
-  @include styleFor($usrTemplate) {
-    font-family: 'latoBold', sans-serif;
-  }
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplayBold', sans-serif;
-  }
-}
-
-.ws-action-1-primary {
-  @extend %ws-action-1;
-
-  @include styleFor($kamTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($r41Template) {
-    color: $dss900;
-  }
-}
-
-.ws-action-1-secondary {
-  @extend %ws-action-1;
-
-  color: $pb500;
-
-  @include styleFor($kamTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss090;
-  }
-}
-
-.ws-action-1-white {
-  @extend %ws-action-1;
-
-  color: $bs000;
-}
-
-.ws-action-1-action-secondary {
-  @extend %ws-action-1;
-
-  color: $action-secondary;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-action-secondary;
-  }
-}
-
-// Old - action-1-link
-.ws-action-1-link {
-  @extend %ws-action-1;
-
-  color: $de500;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-regular-blue;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ra500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $sr600;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab500;
-  }
-}
-
-.ws-action-1-light {
-  @extend %ws-action-1;
-
-  color: $cb200;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-action-secondary;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs250;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ra400;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $sr500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab500;
-  }
-}
-
-.ws-action-1-regular {
-  @extend %ws-action-1;
-
-  color: $de500;
-
-  @include styleFor($r41Template) {
-    color: $cab700;
-  }
-}
-
-// Old - action-1-medium-blue
-.ws-action-1-medium {
-  @extend %ws-action-1;
-
-  color: $cb500;
-
-  @include styleFor($adTemplate) {
-    color: $ra800;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss200;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab800;
-  }
-}
-
-.ws-action-1-dark {
-  @extend %ws-action-1;
-
-  color: $cb900;
-
-  @include styleFor($r41Template) {
-    color: $dss800;
-  }
-}
-
-.ws-action-1-peach {
-  @extend %ws-action-1;
-
-  color: $peach;
-}
-
-%ws-action-2 {
-  color: $bs750;
-  font-family: 'sourceSansProBold', sans-serif;
-  font-size: 18px;
-
-  @include maxWidth(768) {
-    font-size: 16px;
-  }
-
-  @include maxWidth(480) {
-    font-size: 15px;
-  }
-
-  @include styleFor($zabTemplate) {
-    font-family: 'montserratBold', sans-serif;
-  }
-
-  @include styleFor($adTemplate) {
-    font-family: 'robotoBold', sans-serif;
-  }
-
-  @include styleFor($usrTemplate) {
-    font-family: 'latoBold', sans-serif;
-  }
-
-  @include styleFor($r41Template) {
-    font-family: 'sfUiDisplayMedium', sans-serif;
-  }
-}
-
-.ws-action-2-primary {
-  @extend %ws-action-2;
-
-  @include styleFor($kamTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs900;
-  }
-
-  @include styleFor($r41Template) {
-    color: $dss900;
-  }
-}
-
-.ws-action-2-secondary {
-  @extend %ws-action-2;
-
-  color: $pb500;
-
-  @include styleFor($kamTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $bs080;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss090;
-  }
-}
-
-.ws-action-2-white {
-  @extend %ws-action-2;
-
-  color: $bs000;
-}
-
-.ws-action-2-link {
-  @extend %ws-action-2;
-
-  color: $de500;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-regular-blue;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ra500;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $sr600;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab500;
-  }
-}
-
-.ws-action-2-light {
-  @extend %ws-action-2;
-
-  color: $cb200;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-action-secondary;
-  }
-
-  @include styleFor($zabTemplate) {
-    color: $bs250;
-  }
-
-  @include styleFor($adTemplate) {
-    color: $ra400;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $sr500;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab500;
-  }
-}
-
-.ws-action-2-regular {
-  @extend %ws-action-2;
-
-  color: $de500;
-
-  @include styleFor($r41Template) {
-    color: $cab700;
-  }
-}
-
-.ws-action-2-medium {
-  @extend %ws-action-2;
-
-  color: $cb500;
-
-  @include styleFor($adTemplate) {
-    color: $ra800;
-  }
-
-  @include styleFor($usrTemplate) {
-    color: $dss200;
-  }
-
-  @include styleFor($r41Template) {
-    color: $cab800;
-  }
-}
-
-.ws-action-2-dark {
-  @extend %ws-action-2;
-
-  color: $cb900;
-
-  @include styleFor($r41Template) {
-    color: $dss800;
-  }
-}
-
-.ws-action-2-action-secondary {
-  @extend %ws-action-2;
-
-  color: $action-secondary;
-
-  @include styleFor($kamTemplate) {
-    color: $kam-action-secondary;
-  }
-}
+@import 'fontFaces.scss';
+@import 'variables.scss';
+@import 'wsVoiceColorMap';
+@import 'mixins.scss';
+
+/* Оставил для фолбэка */
+%ws-san-francisco-text-bold {
+  font-family: 'sanFranciscoTextBold', sans-serif !important;
+}
+
+%ws-font-weight-bold {
+  font-family: 'sanFranciscoTextBold', sans-serif !important;
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayBold', sans-serif !important;
+  }
+}
+
+/* *** PAGE-TITLE-1 *** */
+%ws-page-title-1 {
+  color: $bs750;
+  font-family: 'sanFranciscoTextBold', sans-serif;
+  font-size: 48px;
+  line-height: 48px;
+
+  @include maxWidth(768) {
+    font-size: 38px;
+    line-height: 38px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 30px;
+    line-height: 30px;
+  }
+
+  @include maxWidth(375) {
+    font-size: 28px;
+    line-height: 28px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoExtraBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayMedium', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-weight: bold;
+  }
+}
+
+.ws-page-title-1-primary {
+  @extend %ws-page-title-1;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-page-title-1-secondary {
+  @extend %ws-page-title-1;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-page-title-1-white {
+  @extend %ws-page-title-1;
+
+  color: $bs000;
+}
+
+/* *** PAGE-TITLE-2 *** */
+%ws-page-title-2 {
+  color: $bs750;
+  font-family: 'sanFranciscoTextBold', sans-serif;
+  font-size: 52px;
+
+  @include maxWidth(768) {
+    font-size: 43px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 38px;
+  }
+
+  @include maxWidth(375) {
+    font-size: 36px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+    font-size: 56px;
+
+    @include maxWidth(768) {
+      font-size: 40px;
+    }
+
+    @include maxWidth(480) {
+      font-size: 36px;
+    }
+
+    @include maxWidth(375) {
+      font-size: 32px;
+    }
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoExtraBold', sans-serif;
+    font-size: 56px;
+
+    @include maxWidth(768) {
+      font-size: 40px;
+    }
+
+    @include maxWidth(480) {
+      font-size: 36px;
+    }
+
+    @include maxWidth(375) {
+      font-size: 32px;
+    }
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayMedium', sans-serif;
+    font-size: 56px;
+
+    @include maxWidth(768) {
+      font-size: 40px;
+    }
+
+    @include maxWidth(480) {
+      font-size: 36px;
+    }
+
+    @include maxWidth(375) {
+      font-size: 32px;
+    }
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-weight: bold;
+  }
+}
+
+.ws-page-title-2-primary {
+  @extend %ws-page-title-2;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-page-title-2-secondary {
+  @extend %ws-page-title-2;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-page-title-2-white {
+  @extend %ws-page-title-2;
+
+  color: $bs000;
+}
+
+/* *** PAGE-HEADER *** */
+%ws-page-header {
+  color: $bs750;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 40px;
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoExtraBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayMedium', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-size: 64px;
+  }
+
+  @include maxWidth(768) {
+    font-size: 31px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 26px;
+  }
+
+  @include maxWidth(375) {
+    font-size: 24px;
+  }
+}
+
+.ws-page-header-primary {
+  @extend %ws-page-header;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-page-header-primary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-page-header-secondary {
+  @extend %ws-page-header;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-page-header-secondary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-page-header-white {
+  @extend %ws-page-header;
+
+  color: $bs000;
+}
+
+.ws-page-header-white--bold {
+  @extend %ws-font-weight-bold;
+}
+
+/* *** SUBHEADER-1 *** */
+%ws-subheader-1 {
+  color: $bs750;
+  font-family: 'robotoSlabBold', sans-serif;
+  font-size: 16px;
+
+  @include maxWidth(768) {
+    font-size: 15px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 14px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+    font-size: 18px;
+
+    @include maxWidth(768) {
+      font-size: 17px;
+    }
+
+    @include maxWidth(480) {
+      font-size: 16px;
+    }
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+    font-size: 18px;
+
+    @include maxWidth(768) {
+      font-size: 17px;
+    }
+
+    @include maxWidth(480) {
+      font-size: 16px;
+    }
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayMedium', sans-serif;
+    font-size: 18px;
+
+    @include maxWidth(768) {
+      font-size: 17px;
+    }
+
+    @include maxWidth(480) {
+      font-size: 16px;
+    }
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-weight: bold;
+    font-size: 20px;
+  }
+}
+
+.ws-subheader-1-primary {
+  @extend %ws-subheader-1;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-subheader-1-secondary {
+  @extend %ws-subheader-1;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-subheader-1-white {
+  @extend %ws-subheader-1;
+
+  color: $bs000;
+}
+
+/* *** SUBHEADER-2 *** */
+%ws-subheader-2 {
+  color: $bs750;
+  font-family: 'robotoSlabBold', sans-serif;
+  font-size: 22px;
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplaySemibold', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-weight: bold;
+    font-size: 24px;
+  }
+  
+  @include maxWidth(768) {
+    font-size: 20px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 18px;
+  }
+}
+
+.ws-subheader-2-primary {
+  @extend %ws-subheader-2;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-subheader-2-secondary {
+  @extend %ws-subheader-2;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+
+  @include styleFor($apiriTemplate) {
+    color: $sg800;
+  }
+}
+
+.ws-subheader-2-white {
+  @extend %ws-subheader-2;
+
+  color: $bs000;
+}
+
+/* *** SUBHEADER-3 *** */
+%ws-subheader-3 {
+  color: $bs750;
+  font-family: 'robotoSlabBold', sans-serif;
+  font-size: 28px;
+
+  @include maxWidth(768) {
+    font-size: 24px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 21px;
+  }
+
+  @include maxWidth(375) {
+    font-size: 20px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayBold', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-weight: bold;
+  }
+}
+
+.ws-subheader-3-primary {
+  @extend %ws-subheader-3;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-subheader-3-secondary {
+  @extend %ws-subheader-3;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-subheader-3-white {
+  @extend %ws-subheader-3;
+
+  color: $bs000;
+}
+
+/* *** SUBHEADER-4 *** */
+%ws-subheader-4 {
+  color: $bs750;
+  font-family: 'robotoSlabBold', sans-serif;
+  font-size: 36px;
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplaySemibold', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-size: 32px;
+    font-weight: bold;
+  }
+  
+  @include maxWidth(768) {
+    font-size: 30px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 26px;
+  }
+
+  @include maxWidth(375) {
+    font-size: 24px;
+  }
+}
+
+.ws-subheader-4-primary {
+  @extend %ws-subheader-4;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-subheader-4-secondary {
+  @extend %ws-subheader-4;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-subheader-4-white {
+  @extend %ws-subheader-4;
+
+  color: $bs000;
+}
+
+/* *** BODY-1 *** */
+%ws-body-1 {
+  color: $bs750;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 15px;
+
+  @include maxWidth(768) {
+    font-size: 14px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 13px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratRegular', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoRegular', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayRegular', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+}
+
+.ws-body-1-primary {
+  @extend %ws-body-1;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-body-1-primary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-1-secondary {
+  @extend %ws-body-1;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-body-1-secondary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-1-white {
+  @extend %ws-body-1;
+
+  color: $bs000;
+}
+
+.ws-body-1-white--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-1-warning
+.ws-body-1-warning {
+  @extend %ws-body-1;
+
+  color: $oy600;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $ev500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $oy500;
+  }
+}
+
+.ws-body-1-warning--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-1-success
+.ws-body-1-success {
+  @extend %ws-body-1;
+
+  color: $ae500;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $gc500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $gc400;
+  }
+}
+
+.ws-body-1-success--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-1-error {
+  @extend %ws-body-1;
+
+  color: $ru500;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $ev500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $ra300;
+  }
+}
+
+.ws-body-1-error--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-1-link
+.ws-body-1-link {
+  @extend %ws-body-1;
+
+  color: $de500;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr600;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-1-link--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-1-progress
+.ws-body-1-progress {
+  @extend %ws-body-1;
+
+  color: $cb200;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-1-progress--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-1-gray {
+  @extend %ws-body-1;
+
+  color: $gray-color;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-gray;
+  }
+}
+
+.ws-body-1-gray--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-1-satisfaction-0
+.ws-body-1-satisfaction-zero {
+  @extend %ws-body-1;
+
+  color: $ru500;
+
+  @include styleFor($kamTemplate) {
+    color: $ev500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $ev500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $ra300;
+  }
+}
+
+.ws-body-1-satisfaction-zero--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-1-satisfaction-low {
+  @extend %ws-body-1;
+
+  color: $oc500;
+
+  @include styleFor($r41Template) {
+    color: $ru090;
+  }
+}
+
+.ws-body-1-satisfaction-low--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old body-1-satisfaction-40
+.ws-body-1-satisfaction-regular {
+  @extend %ws-body-1;
+
+  color: $oy500;
+}
+
+.ws-body-1-satisfaction-regular--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old body-1-satisfaction-60
+.ws-body-1-satisfaction-medium {
+  @extend %ws-body-1;
+
+  color: $ae100;
+}
+
+.ws-body-1-satisfaction-medium--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-1-satisfaction-80
+.ws-body-1-satisfaction-high {
+  @extend %ws-body-1;
+
+  color: $ae500;
+
+  @include styleFor($kamTemplate) {
+    color: $gc500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $gc500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $gc400;
+  }
+}
+
+.ws-body-1-satisfaction-high--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-1-action-secondary
+.ws-body-1-light {
+  @extend %ws-body-1;
+
+  color: $cb200;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs250;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra400;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-1-light--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-1-regular {
+  @extend %ws-body-1;
+
+  color: $de500;
+
+  @include styleFor($r41Template) {
+    color: $cab700;
+  }
+}
+
+.ws-body-1-regular--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-1-medium {
+  @extend %ws-body-1;
+
+  color: $cb500;
+
+  @include styleFor($r41Template) {
+    color: $cab800;
+  }
+}
+
+.ws-body-1-medium--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-1-dark {
+  @extend %ws-body-1;
+
+  color: $cb900;
+
+  @include styleFor($r41Template) {
+    color: $dss800;
+  }
+}
+
+.ws-body-1-dark--bold {
+  @extend %ws-font-weight-bold;
+}
+
+/* *** BODY-2 *** */
+%ws-body-2 {
+  color: $bs750;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 16px;
+
+  @include maxWidth(768) {
+    font-size: 15px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 14px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratRegular', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoRegular', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayRegular', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+}
+
+.ws-body-2-primary {
+  @extend %ws-body-2;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-body-2-primary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-secondary {
+  @extend %ws-body-2;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-body-2-secondary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-white {
+  @extend %ws-body-2;
+
+  color: $bs000;
+}
+
+.ws-body-2-white--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old body-2-link
+.ws-body-2-link {
+  @extend %ws-body-2;
+
+  color: $de500;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr600;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-2-link--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-progress {
+  @extend %ws-body-2;
+
+  color: $cb200;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-2-progress--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-gray {
+  @extend %ws-body-2;
+
+  color: $gray;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-gray;
+  }
+}
+
+.ws-body-2-gray--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-2-success
+.ws-body-2-success {
+  @extend %ws-body-2;
+
+  color: $ae500;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $gc500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $gc400;
+  }
+}
+
+.ws-body-2-success--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-2-warning
+.ws-body-2-warning {
+  @extend %ws-body-2;
+
+  color: $oy600;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $ev500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $oy500;
+  }
+}
+
+.ws-body-2-warning--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-1-satisfaction-0
+.ws-body-2-satisfaction-zero {
+  @extend %ws-body-2;
+
+  color: $ru500;
+
+  @include styleFor($kamTemplate) {
+    color: $ev500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $ev500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $ra300;
+  }
+}
+
+.ws-body-2-satisfaction-zero--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-satisfaction-low {
+  @extend %ws-body-2;
+
+  color: $oc500;
+
+  @include styleFor($r41Template) {
+    color: $ru090;
+  }
+}
+
+.ws-body-2-satisfaction-low--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-2-satisfaction-40
+.ws-body-2-satisfaction-regular {
+  @extend %ws-body-2;
+
+  color: $oy500;
+
+  @include styleFor($kamTemplate) {
+    color: $gm500;
+  }
+}
+
+.ws-body-2-satisfaction-regular--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old body-2-satisfaction-60
+.ws-body-2-satisfaction-medium {
+  @extend %ws-body-2;
+
+  color: $ae100;
+}
+
+.ws-body-2-satisfaction-medium--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-2-satisfaction-80
+.ws-body-2-satisfaction-high {
+  @extend %ws-body-2;
+
+  color: $ae500;
+
+  @include styleFor($kamTemplate) {
+    color: $gc500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $gc500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $gc400;
+  }
+}
+
+.ws-body-2-satisfaction-high--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-light {
+  @extend %ws-body-2;
+
+  color: $cb200;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs250;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra400;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-2-light--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-regular {
+  @extend %ws-body-2;
+
+  color: $de500;
+
+  @include styleFor($r41Template) {
+    color: $cab700;
+  }
+}
+
+.ws-body-2-regular--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-medium {
+  @extend %ws-body-2;
+
+  color: $cb500;
+
+  @include styleFor($r41Template) {
+    color: $cab800;
+  }
+}
+
+.ws-body-2-medium--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-dark {
+  @extend %ws-body-2;
+
+  color: $cb900;
+
+  @include styleFor($r41Template) {
+    color: $dss800;
+  }
+}
+
+.ws-body-2-dark--bold {
+  @extend %ws-font-weight-bold;
+}
+
+/* *** BODY-3 *** */
+%ws-body-3 {
+  color: $bs750;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 18px;
+
+  @include maxWidth(768) {
+    font-size: 16px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 15px;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoRegular', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayRegular', sans-serif;
+  }
+
+  @include styleFor($skhTemplate) {
+    font-family: 'sfUiDisplayRegular', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+}
+
+.ws-body-3-primary {
+  @extend %ws-body-3;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-body-3-primary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-3-secondary {
+  @extend %ws-body-3;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-body-3-secondary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-3-white {
+  @extend %ws-body-3;
+
+  color: $bs000;
+}
+
+.ws-body-3-white--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-3-link
+.ws-body-3-link {
+  @extend %ws-body-3;
+
+  color: $de500;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr600;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-3-link--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-3-action-secondary
+.ws-body-3-light {
+  @extend %ws-body-3;
+
+  color: $cb200;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs250;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra400;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-3-light--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-3-regular {
+  @extend %ws-body-3;
+
+  color: $de500;
+
+  @include styleFor($r41Template) {
+    color: $cab700;
+  }
+}
+
+.ws-body-3-regular--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-3-medium {
+  @extend %ws-body-3;
+
+  color: $cb500;
+
+  @include styleFor($r41Template) {
+    color: $cab800;
+  }
+}
+
+.ws-body-3-medium--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-3-dark {
+  @extend %ws-body-3;
+
+  color: $cb900;
+
+  @include styleFor($r41Template) {
+    color: $dss800;
+  }
+}
+
+.ws-body-3-dark--bold {
+  @extend %ws-font-weight-bold;
+}
+
+/* *** BODY-4 *** */
+%ws-body-4 {
+  color: $bs750;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 24px;
+
+  @include maxWidth(768) {
+    font-size: 22px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 20px;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-size: 22px;
+
+    @include maxWidth(768) {
+      font-size: 20px;
+    }
+
+    @include maxWidth(480) {
+      font-size: 18px;
+    }
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoRegular', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayRegular', sans-serif;
+    font-size: 22px;
+
+    @include maxWidth(768) {
+      font-size: 20px;
+    }
+
+    @include maxWidth(480) {
+      font-size: 18px;
+    }
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-size: 20px;
+
+    @include maxWidth(768) {
+      font-size: 18px;
+    }
+  }
+}
+
+.ws-body-4-primary {
+  @extend %ws-body-4;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-body-4-primary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-4-secondary {
+  @extend %ws-body-4;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-body-4-secondary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-4-white {
+  @extend %ws-body-4;
+
+  color: $bs000;
+}
+
+.ws-body-4-white--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-4-green {
+  @extend %ws-body-4;
+
+  color: $green;
+}
+
+.ws-body-4-green--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-4-link
+.ws-body-4-link {
+  @extend %ws-body-4;
+
+  color: $de500;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr600;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-4-link--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-4-peach {
+  @extend %ws-body-4;
+
+  color: $peach;
+}
+
+.ws-body-4-peach--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-4-blue-gray {
+  @extend %ws-body-4;
+
+  color: $blue-gray;
+
+  @include styleFor($kamTemplate) {
+    @extend %ws-font-weight-bold;
+
+    color: $kam-medium-blue;
+    font-size: 16px;
+  }
+}
+
+.ws-body-4-blue-gray--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-4-action-secondary
+.ws-body-4-light {
+  @extend %ws-body-4;
+
+  color: $cb200;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs250;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra400;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-4-light--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-4-regular {
+  @extend %ws-body-4;
+
+  color: $de500;
+
+  @include styleFor($r41Template) {
+    color: $cab700;
+  }
+}
+
+.ws-body-4-regular--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-4-medium {
+  @extend %ws-body-4;
+
+  color: $cb500;
+
+  @include styleFor($r41Template) {
+    color: $cab800;
+  }
+}
+
+.ws-body-4-medium--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-4-dark {
+  @extend %ws-body-4;
+
+  color: $cb900;
+
+  @include styleFor($r41Template) {
+    color: $dss800;
+  }
+}
+
+.ws-body-4-dark--bold {
+  @extend %ws-font-weight-bold;
+}
+
+/* *** LABEL-1 *** */
+%ws-label-1 {
+  background-color: inherit;
+  color: $bs750;
+  font-family: 'sourceSansProBold', sans-serif;
+  font-size: 14px;
+
+  @include maxWidth(768) {
+    font-size: 13px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 12px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayHeavy', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+
+// Old - label-primary
+.ws-label-1-primary {
+  @extend %ws-label-1;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+// Old - label-secondary
+.ws-label-1-secondary {
+  @extend %ws-label-1;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+// Old - label-white
+.ws-label-1-white {
+  @extend %ws-label-1;
+
+  color: $bs000;
+}
+
+/* *** LABEL-2 *** */
+%ws-label-2 {
+  font-family: 'sourceSansProBold', sans-serif;
+  font-size: 14px;
+
+  @include maxWidth(768) {
+    font-size: 13px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 12px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayHeavy', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+}
+
+.ws-label-2-primary {
+  @extend %ws-label-2;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+/* *** LABEL-3 *** */
+%ws-label-3 {
+  color: $bs750;
+  font-family: 'sourceSansProBold', sans-serif;
+  font-size: 16px;
+
+  @include maxWidth(768) {
+    font-size: 15px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 14px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayHeavy', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+}
+
+.ws-label-3-primary {
+  @extend %ws-label-3;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+/* *** CAPTION-1 *** */
+%ws-caption-1 {
+  color: $bs750;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 13px;
+
+  @include maxWidth(768) {
+    font-size: 12px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 11px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratRegular', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoRegular', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayRegular', sans-serif;
+  }
+}
+
+// Old - caption-primary
+.ws-caption-1-primary {
+  @extend %ws-caption-1;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-caption-1-primary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - caption-secondary
+.ws-caption-1-secondary {
+  @extend %ws-caption-1;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-caption-1-secondary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - caption-white
+.ws-caption-1-white {
+  @extend %ws-caption-1;
+
+  color: $bs000;
+}
+
+.ws-caption-1-white--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-caption-1-light {
+  @extend %ws-caption-1;
+
+  color: $cb200;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs250;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra400;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-caption-1-light--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-caption-1-regular {
+  @extend %ws-caption-1;
+
+  color: $de500;
+
+  @include styleFor($r41Template) {
+    color: $cab700;
+  }
+}
+
+.ws-caption-1-regular--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-caption-1-medium {
+  @extend %ws-caption-1;
+
+  color: $cb500;
+
+  @include styleFor($adTemplate) {
+    color: $ra800;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss200;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab800;
+  }
+}
+
+.ws-caption-1-medium--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-caption-1-dark {
+  @extend %ws-caption-1;
+
+  color: $cb900;
+
+  @include styleFor($r41Template) {
+    color: $dss800;
+  }
+}
+
+.ws-caption-1-dark--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-caption-1-peach {
+  @extend %ws-caption-1;
+
+  color: $peach;
+}
+
+.ws-caption-1-peach--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-caption-1-gray-title {
+  @extend %ws-caption-1;
+
+  color: $gray-title;
+}
+
+.ws-caption-1-gray-title--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - caption-warning
+.ws-caption-1-warning {
+  @extend %ws-caption-1;
+
+  color: $oy600;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $ev500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $oy500;
+  }
+}
+
+.ws-caption-1-warning--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - caption-error
+.ws-caption-1-error {
+  @extend %ws-caption-1;
+
+  color: $ru500;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $ra300;
+  }
+}
+
+.ws-caption-1-error--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - caption-link
+.ws-caption-1-link {
+  @extend %ws-caption-1;
+
+  color: $de500;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr600;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-caption-1-link--bold {
+  @extend %ws-font-weight-bold;
+}
+
+%ws-action-1 {
+  color: $bs750;
+  font-family: 'sourceSansProBold', sans-serif;
+  font-size: 16px;
+
+  @include maxWidth(768) {
+    font-size: 15px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 14px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayBold', sans-serif;
+  }
+}
+
+.ws-action-1-primary {
+  @extend %ws-action-1;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-action-1-secondary {
+  @extend %ws-action-1;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-action-1-white {
+  @extend %ws-action-1;
+
+  color: $bs000;
+}
+
+.ws-action-1-action-secondary {
+  @extend %ws-action-1;
+
+  color: $action-secondary;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+}
+
+// Old - action-1-link
+.ws-action-1-link {
+  @extend %ws-action-1;
+
+  color: $de500;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr600;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-action-1-light {
+  @extend %ws-action-1;
+
+  color: $cb200;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs250;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra400;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-action-1-regular {
+  @extend %ws-action-1;
+
+  color: $de500;
+
+  @include styleFor($r41Template) {
+    color: $cab700;
+  }
+}
+
+// Old - action-1-medium-blue
+.ws-action-1-medium {
+  @extend %ws-action-1;
+
+  color: $cb500;
+
+  @include styleFor($adTemplate) {
+    color: $ra800;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss200;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab800;
+  }
+}
+
+.ws-action-1-dark {
+  @extend %ws-action-1;
+
+  color: $cb900;
+
+  @include styleFor($r41Template) {
+    color: $dss800;
+  }
+}
+
+.ws-action-1-peach {
+  @extend %ws-action-1;
+
+  color: $peach;
+}
+
+%ws-action-2 {
+  color: $bs750;
+  font-family: 'sourceSansProBold', sans-serif;
+  font-size: 18px;
+
+  @include maxWidth(768) {
+    font-size: 16px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 15px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayMedium', sans-serif;
+  }
+}
+
+.ws-action-2-primary {
+  @extend %ws-action-2;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-action-2-secondary {
+  @extend %ws-action-2;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-action-2-white {
+  @extend %ws-action-2;
+
+  color: $bs000;
+}
+
+.ws-action-2-link {
+  @extend %ws-action-2;
+
+  color: $de500;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr600;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-action-2-light {
+  @extend %ws-action-2;
+
+  color: $cb200;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs250;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra400;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-action-2-regular {
+  @extend %ws-action-2;
+
+  color: $de500;
+
+  @include styleFor($r41Template) {
+    color: $cab700;
+  }
+}
+
+.ws-action-2-medium {
+  @extend %ws-action-2;
+
+  color: $cb500;
+
+  @include styleFor($adTemplate) {
+    color: $ra800;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss200;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab800;
+  }
+}
+
+.ws-action-2-dark {
+  @extend %ws-action-2;
+
+  color: $cb900;
+
+  @include styleFor($r41Template) {
+    color: $dss800;
+  }
+}
+
+.ws-action-2-action-secondary {
+  @extend %ws-action-2;
+
+  color: $action-secondary;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+}