@marioschmidt/design-system-tokens 1.0.23 → 1.0.24

package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointSm390pxCompact.swift

@@ -13,10 +13,6 @@ public class BreakpointSm390pxCompact {
     // MARK: - COMPONENT
     // MARK: - ============================================
 
-    // MARK: - Component - Accordion
-    /** This variable exists specifically for changing the accordion font family across brands. It is subject to review. Bild: GothamXNarrow, SpoBi: Inter, Ads: LucindaGrande */
-    public static let AccordionLabelFontFamily = "Lucida Grande"
-
     // MARK: - Component - Article
     public static let AricleMobile1ColGridImageMarginSpace = "0px"
     /** 8 | 8 | 12 | 16 - This space variable is used at the top edge of the article main content bounding box. */
@@ -52,9 +48,124 @@ public class BreakpointSm390pxCompact {
     public static let ArticleInfoboxInlineSpace = "16px"
     public static let ArticleInfoboxStackSpace = "16px"
 
-    // MARK: - Component - AudioPlayer
-    /** This variable is used in the text style dedicated to audio player labels for elapsed time, reproduction speed and short functionality description text. 16 - 16 - 16 - 18 */
-    public static let AudioPlayerFontSize = "16px"
+    // MARK: - Component - _DSysDocs
+    /** Variable used in spacing parameters of bild.design webpage mockups. move to bild.design group maybe */
+    public static let BildDesignFrameSpace = "12px"
+    /** This variable is used on documentation pages. This is an alternative variable to the main container max width variable. 0 - 0 - 68 - 68 */
+    public static let DsMainContainerSpace = "0px"
+    public static let DsysDocsWidthSize = "750px"
+    /** This variable is used as a max width size for content blocks. For mobile devices this var references the DSysDocsWidthSize var 320 - 750 - 962 - 1024 */
+    public static let MainContentStageSize = "750px"
+    /** This variable is used on documentation pages that have an artistic banner at the top of the page that is related to the foundation topic on the page. 80 - 80 -80 - 140 */
+    public static let FoundationsBannerHeightSize = "80px"
+    /** This variable is used in documentation pages that have small caption or lables along with a UI component documented. 4 - 4 - 6 - 8 */
+    public static let DsCaptionStackSpace05x = "4px"
+    public static let DsCaptionStackSpace1x = "8px"
+    /** This variable is used only for this design system's component tests. */
+    public static let _1columnMobile = "320px"
+    /** This variable is currently used on a thin gallery that appears on desktop websites with petbook and other "books" content. Its height changes to a large height on mobile sites. 558 - 558 - 558 - 186 */
+    public static let ThinBannerVerticalHeightSize = "558px"
+    /** This variable is used only for texts and labels that form part of this design system's documentation. */
+    public static let SpecsFontFamily = "Gotham"
+    /** This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180 */
+    public static let DocHeaderHeightSize = "144px"
+
+    // MARK: - Component - Menu
+    public static let MenuItemSpace = "8px"
+    /** This variable is used on the menu link lane and on the mobile side menu drawer. */
+    public static let MenuItemFontSize = "15px"
+    public static let MenuItemUtilFontSize = "12px"
+    public static let MenuItemUtilStackSpace = "10px"
+    public static let MenuLinkLaneHeightSize = "48px"
+    public static let MenuUtillinkItemHeightSize = "48px"
+    public static let MenuLinkItemInlineSpace = "4px"
+    public static let MenuLogoDefaultSize = "56px"
+    public static let MenuLogoScrolledSize = "56px"
+    public static let MenuSpecialNaviItemHeightSize = "48px"
+    public static let SubNavBarHeightSize = "42px"
+    public static let MenuUtilityLinksContainerHeightSize = "56px"
+    public static let MenuTopStackSpace = "8px"
+    public static let MenuLeftInlineSpace = "8px"
+    public static let MenuUtilityLinksGapSpace = "24px"
+    public static let MenuRightInlineSpace = "0px"
+    public static let MenuBottomStackSpace = "8px"
+    public static let MenuUtilityLinksDividerHeightSize = "40px"
+    /** This color type variables are only in this semantic collection for making subtle shadow effects change visibility across device sizes. Shadow alpha: 10 - 10 - 10 - 0 */
+    public static let MenuShadowVisibility = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0.100)
+    /** This color type variables are only in this semantic collection for making subtle shadow effects change visibility across device sizes. Shadow alpha: 0 - 0 - 0 - 10 */
+    public static let HeyInputShadowVisibility = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0.000)
+    public static let AppTopbarTitleFontSize = "12px"
+    public static let AppTopbarStageTitleHeight = "14px"
+    public static let IOsappTopBarHeightSize = "44px"
+    public static let IOsappTopBarLeftInlineSpace = "12px"
+    public static let IOsappTopBarRightInlineSpace = "16px"
+
+    // MARK: - Component - Teaser
+    public static let TeaserTitleInlineLeftSpace = "12px"
+    public static let TeaserTitleStackSpace = "4px"
+    public static let TeaserTitleGapSpace = "4px"
+    public static let TeaserKickerBgInlineSpace = "6px"
+    public static let TeaserKickerBgStackSpace = "2px"
+    /** This variable is used for creating space around the outside of a subscription badge or video icon badge. */
+    public static let TeaserBadgesMarginSpace = "8px"
+    /** This token is for controling the height of badges that are inside of teasers. 32 - 32 - 32 - 40 */
+    public static let TeaserBadgesHeightSizeLg = "32px"
+    public static let TeaserTitleBottomStackSpace = "12px"
+    public static let TeaserBadgesHeightSizeSm = "24px"
+    public static let TeaserLayoutGridSpace = "12px"
+
+    // MARK: - Component - Teaser - mQTeaser
+    /** XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40 */
+    public static let MQteaserHeadlineFontSize = "16px"
+    public static let MQteaserHeadlineFontWeight = 600
+    public static let MQteaserHeadlineLineHeight = "18.399999618530273px"
+    public static let MqTeaserTitleInlineSpace = "8px"
+
+    // MARK: - Component - Teaser - aTeaser
+    /** 16 - 16 - 22 - 24 This variable references the semantic variables kicker3fontsize and kicker2fontsize. At the 600px breakpoint smaller devices use the kicker3 variable */
+    public static let ATeaserKickerFontSize = "14px"
+    /** This variable references the semantic variables headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64 */
+    public static let ATeaserHeadlineFontSize = "24px"
+    public static let ATeaserKickerLineHeight = "14px"
+    public static let ATeaserHeadlineLineHeight = "24px"
+    public static let ATeaserTitleInlineSpace = "8px"
+
+    // MARK: - Component - Teaser - stdTeaser
+    public static let StdTeaserImageTitleGapSpace = "4px"
+    /** This variable is used for creating space around the outside of a subscription badge or video icon badge. */
+    public static let StdTeaserBadgesMarginSpace = "4px"
+    /** 2 | 2 | 2 | 2 - This variable is used on the standard teaser vertical spacing between the kicker and the headline. It references the semantic variable stackSpaceConst3XS */
+    public static let StdTeaserKickerHeadlineStackSpace = "2px"
+
+    // MARK: - Component - Teaser - qTeaser
+    /** This component level variable is used on the quad teaser headline. It references the semantic level variable headline1. 48 - 48 - 72 - 100 */
+    public static let QuadHeadlineFontSize = "36px"
+    public static let QuadKickerFontSize = "16px"
+    public static let QuadHeadlineLineHeight = "37.79999923706055px"
+    public static let QTeaserTitleInlineSpace = "8px"
+
+    // MARK: - Component - Teaser - bildPlay
+    public static let BildPlayTeaserWidthSize = "145px"
+
+    // MARK: - Component - Teaser - superA
+    /** 16 - 16 - 16 - 16 */
+    public static let SuperAteaserTitleInlineSpace = "16px"
+
+    // MARK: - Component - Teaser - bTeaser
+    public static let BTeaserTitleInlineSpace = "8px"
+
+    // MARK: - Component - Table
+    public static let TableColumnWidthSize1x = "80px"
+    public static let TableColumnWidthSize2x = "140px"
+    public static let TableColumnWidthSize05x = "40px"
+    public static let TableColumnWidthSize15x = "120px"
+    public static let TableColumnWidthSize25x = "180px"
+    public static let TableColumnWidthSize075x = "56px"
+    public static let TableColumnWidthSize3x = "200px"
+    public static let TableItemMaxWidthSize = "224px"
+
+    // MARK: - Component - Separators
+    public static let SeparatorThicknessSize = "2px"
 
     // MARK: - Component - Avatar
     /** This variable is used on avatar names in article pages. Bild: 16 - 16 - 16 - 18; SpoBi&Ads: 13 - 13 - 13 - 15 */
@@ -72,37 +183,6 @@ public class BreakpointSm390pxCompact {
     /** This variable is used for setting the font of avatars on iOS and Android platforms. This is subject to review. */
     public static let AppAvatarFontFamily = "Lucida Grande"
 
-    // MARK: - Component - Badge
-    /** This space variable is used for creating the top and bottom space between a badge's text label and the surface that the text label is on top of. */
-    public static let BadgesInnerStackSpace = "2px"
-    /** This space variable is used for creating the left and right space between a badge's text label and the badge background surface that the text label is on top of. */
-    public static let BadgesInnerInlineSpace = "4px"
-    /** 30 - 30 - 30 - 30 - This variable is used on the Advert rectangular badge that is found above an ad containers. */
-    public static let AdLabelBadgeHeightSize = "30px"
-
-    // MARK: - Component - Breadcrumb
-    /** 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices. */
-    public static let BreadcrumbFontSize = "15px"
-    public static let BreadcrumbFontFamily = "Lucida Grande"
-    public static let BreadcrumbArrowLeftInlineSpace1 = "3px"
-    public static let BreadcrumbArrowRightInlineSpace2 = "5px"
-    public static let BreadcrumbInlineSpace = "12px"
-    /** 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices. */
-    public static let BreadcrumbLineHeight = "15px"
-    public static let BreadcrumbFontWeight = 700
-    public static let BreadcrumbStackSpace = "14px"
-
-    // MARK: - Component - BreakingNews
-    public static let BreakingNewsContainerHeightSize = "56px"
-    public static let BreakingNewsBadgeUpperTitleFontSize = "13px"
-    public static let BreakingNewsBadgeLowerTitleFontSize = "23px"
-    public static let BreakingNewsBadgeUpperTitleLineHeight = "13px"
-    public static let BreakingNewsBadgeLowerTitleLineHeight = "21px"
-    public static let BreakingNewsBadgeTitelsStackSpace = "0px"
-    public static let BreakingNewsScrollingTextFontSize = "21px"
-    public static let BreakingNewsScrollingTextLineHeight = "24px"
-    public static let BreakingNewsBadgeInlineSpace = "6px"
-
     // MARK: - Component - Button
     public static let ButtonLabelFontSize = "15px"
     public static let ButtonInlineSpace = "16px"
@@ -118,73 +198,26 @@ public class BreakpointSm390pxCompact {
     public static let ButtonStackSpace = "6px"
     public static let ButtonBorderRadius = "8px"
 
-    // MARK: - Component - Cards
-    public static let SearchResultCardImageWidthSize = "216px"
-    public static let SearchResultCardImageHeightSizeStacked = "189px"
-    public static let NewstickerImageCardWidthSize = "206px"
-
-    // MARK: - Component - Carousel
-    /** This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination. */
-    public static let GalleryTeaserTitleBottomSpace = "28px"
-    /** This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination. */
-    public static let GalleryTeaserAppGapSpace = "0px"
-    public static let AppEpaperCarouselItemFocusWidth = "182px"
-    public static let AppEpaperCarouselItemDefaultWidth = "144px"
-    public static let AppEpaperCarouseBeilageItemWidth = "110px"
-    public static let StandardTeaserGalleryTeaserWidthWeb = "145px"
-    public static let StandardTeaserGalleryTeaserWidthApp = "280px"
-
-    // MARK: - Component - Chips
-    /** This variable is used on the chips font size parameter of the chips text style. The font size changes only for the change between larger device widths and any device smaller than the largest. 16 - 16 -16 - 18 */
-    public static let ChipsFontSize = "16px"
-    public static let ChipsInlineSpace = "12px"
-    public static let ChipsStackSpace = "8px"
-
-    // MARK: - Component - Datepicker
-    public static let DatepickerItemDayWidthSize = "44px"
-    public static let DatepickerItemHeightSize = "44px"
-    public static let DatepickerItemYearWidthSize = "77px"
-
-    // MARK: - Component - Drawers
-    public static let MobileMenuDrawerStackSpace = "20px"
-    public static let MobileMenuDrawerLeftInlineSpace = "20px"
-    public static let MobileMenuDrawerRightInlineSpace = "16px"
-    public static let MobileMenuDrawerMaxWidthSize = "400px"
-
-    // MARK: - Component - Dropdown
-    public static let DropDownBorderRadius = "4px"
-    public static let DropDownItemStackSpace = "8px"
-    public static let DropDownItemInlineSpace = "12px"
-
-    // MARK: - Component - Footer
-    /** This variable is used on footer links that commonly show up at the bottom of pages. The font size parameter remains constant at 11 px across device sizes. */
-    public static let FooterFontSize = "11px"
-    public static let FooterLineHeight = "14px"
-    public static let FooterFontFamily = "Gotham XNarrow"
-    public static let FooterFontSizeUserOfferPages = "18px"
-    public static let FooterLineHeightUserOfferPages = "26px"
-
-    // MARK: - Component - Icon
-    public static let IconSize = "24px"
-    public static let IconSizeEmbeddMedia = "40px"
-
-    // MARK: - Component - InfoElement
-    public static let InfoElementTeaserBadgeHeightSize = "16px"
-    public static let InfoElementTeaserImageHeightSize = "80px"
-    public static let InfoElementTeaserImageWidthSize = "80px"
-    public static let InfoElementTeaserBadgeMarginSpace = "4px"
-
-    // MARK: - Component - Inputfield
-    public static let InputFieldStackSpace = "6px"
-    public static let InputFieldInlineSpace = "16px"
-    public static let InputFieldMiniLabelInlineSpace = "4px"
-    /** This variable controls texts inside of input fields such as dropdowns, date input and other text inputs that appear in forms for example. compact 15 - default 17 - spacious 19 */
-    public static let InputFieldFontSize = "16px"
-    public static let InputFieldImessageInlineSpace = "16px"
-    public static let InputFieldHeightSize = "36px"
-    public static let HeyInputContainerInlineSpace = "8px"
-    public static let InputFieldMessageGapSpace = "4px"
-    public static let InputFieldFontFamily = "Lucida Grande"
+    // MARK: - Component - Newsticker
+    /** similar to kicker3 values - 16 - 16 - 16 - 18 */
+    public static let NewsTickerTimeFontSize = "16px"
+    public static let NewsTickerTimeFontWeight = 700
+    public static let NewsTickerTimeFontFamily = "Lucida Grande"
+    /** Figma currently does not allow for percentages in Line Height variables. The values in this token are the result of multiplying the font size by the line height variable defined on the Bild home css -> newsTickerTime line height: 1.3. Line height for this component does not change across devices. */
+    public static let NewsTickerTimeLineHeight = "20.799999237060547px"
+    public static let NewsTickerContentStackSpace = "4px"
+    public static let NewsTickerKickerInnerStackSpace = "2px"
+    public static let NewsTickerTitlesInlineSpace = "18px"
+    public static let NewsTickerBadgesInlineSpace = "8px"
+    public static let NewsTickerTimeKickerStackSpace = "4px"
+    public static let NewsTickerEntriesStackSpace = "22px"
+    public static let NewsTickerKickerInnerInlineSpace = "4px"
+    public static let NewsTickerSkeletonBottomSpace = "64px"
+    public static let NewsTickerRedDotSize = "12px"
+    public static let NewsTickerEntriesLeftInlineSpace = "22px"
+    public static let NewsTickerLineInlineSpace = "6px"
+    public static let NewsTickerAppCardHeightSize = "116px"
+    public static let NewsTickerAppCardWidthSize = "250px"
 
     // MARK: - Component - Liveticker
     public static let LiveTickerheadlineFontWeight = 600
@@ -198,68 +231,22 @@ public class BreakpointSm390pxCompact {
     public static let LiveTickerAppCardHeightSize = "96px"
     public static let LiveTickerAppCardWidthSize = "250px"
 
-    // MARK: - Component - Mediaplayer
-    public static let PodcastPlayButtonSize = "48px"
-    public static let VidPlayerBottomBarGapSpace = "0px"
-    public static let AudioPlayerHeaderStackSpace = "56px"
-    public static let VideoTimeBadgeFontFamily = "Lucida Grande"
-    public static let VidPlayerControlButtonSize = "42px"
-    public static let VidPlayerControlButtonIconSizeHover = "28px"
-    public static let VidPlayerTimecodeFontSize = "14px"
-    public static let VidPlayerTimecodeContainerMinWidthSize = "45px"
-    public static let VidPlayerProgressBarContainerHeightSize = "24px"
-    public static let VidPlayerUnmuteButtonWidthSize = "220px"
-
-    // MARK: - Component - Menu
-    public static let MenuItemSpace = "8px"
-    /** This variable is used on the menu link lane and on the mobile side menu drawer. */
-    public static let MenuItemFontSize = "15px"
-    public static let MenuItemUtilFontSize = "12px"
-    public static let MenuItemUtilStackSpace = "10px"
-    public static let MenuLinkLaneHeightSize = "48px"
-    public static let MenuUtillinkItemHeightSize = "48px"
-    public static let MenuLinkItemInlineSpace = "4px"
-    public static let MenuLogoDefaultSize = "56px"
-    public static let MenuLogoScrolledSize = "56px"
-    public static let MenuSpecialNaviItemHeightSize = "48px"
-    public static let SubNavBarHeightSize = "42px"
-    public static let MenuUtilityLinksContainerHeightSize = "56px"
-    public static let MenuTopStackSpace = "8px"
-    public static let MenuLeftInlineSpace = "8px"
-    public static let MenuUtilityLinksGapSpace = "24px"
-    public static let MenuRightInlineSpace = "0px"
-    public static let MenuBottomStackSpace = "8px"
-    public static let MenuUtilityLinksDividerHeightSize = "40px"
-    /** This color type variables are only in this semantic collection for making subtle shadow effects change visibility across device sizes. Shadow alpha: 10 - 10 - 10 - 0 */
-    public static let MenuShadowVisibility = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0.100)
-    /** This color type variables are only in this semantic collection for making subtle shadow effects change visibility across device sizes. Shadow alpha: 0 - 0 - 0 - 10 */
-    public static let HeyInputShadowVisibility = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0.000)
-    public static let AppTopbarTitleFontSize = "12px"
-    public static let AppTopbarStageTitleHeight = "14px"
-    public static let IOsappTopBarHeightSize = "44px"
-    public static let IOsappTopBarLeftInlineSpace = "12px"
-    public static let IOsappTopBarRightInlineSpace = "16px"
-
-    // MARK: - Component - Newsticker
-    /** similar to kicker3 values - 16 - 16 - 16 - 18 */
-    public static let NewsTickerTimeFontSize = "16px"
-    public static let NewsTickerTimeFontWeight = 700
-    public static let NewsTickerTimeFontFamily = "Lucida Grande"
-    /** Figma currently does not allow for percentages in Line Height variables. The values in this token are the result of multiplying the font size by the line height variable defined on the Bild home css -> newsTickerTime line height: 1.3. Line height for this component does not change across devices. */
-    public static let NewsTickerTimeLineHeight = "20.799999237060547px"
-    public static let NewsTickerContentStackSpace = "4px"
-    public static let NewsTickerKickerInnerStackSpace = "2px"
-    public static let NewsTickerTitlesInlineSpace = "18px"
-    public static let NewsTickerBadgesInlineSpace = "8px"
-    public static let NewsTickerTimeKickerStackSpace = "4px"
-    public static let NewsTickerEntriesStackSpace = "22px"
-    public static let NewsTickerKickerInnerInlineSpace = "4px"
-    public static let NewsTickerSkeletonBottomSpace = "64px"
-    public static let NewsTickerRedDotSize = "12px"
-    public static let NewsTickerEntriesLeftInlineSpace = "22px"
-    public static let NewsTickerLineInlineSpace = "6px"
-    public static let NewsTickerAppCardHeightSize = "116px"
-    public static let NewsTickerAppCardWidthSize = "250px"
+    // MARK: - Component - Video
+    /** This variable is used on video player badges that display a red play icon on top of a white square next to a time stamp. This variable references the borderRadiusXS. Constant value of 2 across device sizes. */
+    public static let VideoTimeBadgeCornerSize = "2px"
+    /** 16 - 16 - 18 - 18 -- This variable is used to control the videoTimeBadge text style's font size parameter. The typography style that uses this variable is the videoTimeBadge style. The badge that uses this variable appears on the upper right corner of horizontal videos. */
+    public static let VideoTimeBadgeFontSize = "16px"
+    /** 24 - 24 - 32 - 40 - This variable is used on horizontal video badges that contain a red play icon on top of a white square next to a timestamp. */
+    public static let VideoTimeBadgeSize = "24px"
+    public static let VideoRedPlayIconWidthSize = "8px"
+    /** This variable is used for changing the red play icon inside the white square. */
+    public static let VideoRedPlayIconHeightSize = "10px"
+    public static let VideoBadgeTimeLineHeight = "21px"
+    public static let VideoSkeletonContainerHeight = "180px"
+    public static let VideoFrameInlineSpace = "0px"
+    public static let VerticalVideoMockHeadlineFontSize = "22px"
+    /** 14 - 14 - 16 - 16 -- This variable is used in the videoAdBadge font size parameter. */
+    public static let VideoAdBadgeFontSize = "14px"
 
     // MARK: - Component - Pagination
     public static let GalleryPaginationItemHeightSize = "4px"
@@ -270,29 +257,46 @@ public class BreakpointSm390pxCompact {
     public static let GalleryPaginationContainerAppInlineSpace = "12px"
     public static let ScrollBarThicknessSize = "8px"
 
-    // MARK: - Component - Paywall
-    public static let PaywallContainerGapSpace = "-48px"
-    public static let PaywallHeaderBottomStackSpace = "80px"
-    public static let PaywallCardMaxWidthSize = "346px"
-    /** This variable is used on the paywall card price tag. 64 constant */
-    public static let PaywallCardPriceTagFontSize = "64px"
-    public static let PaywallCardPriceTagLineHeight = "64px"
-    public static let PaywallCardPriceNoteLineHeight = "40px"
-    /** This variable is used on the paywall card text under the price tag. 40 - 40 - 40 - 40 */
-    public static let PaywallCardPriceNoteFontSize = "40px"
+    // MARK: - Component - Dropdown
+    public static let DropDownBorderRadius = "4px"
+    public static let DropDownItemStackSpace = "8px"
+    public static let DropDownItemInlineSpace = "12px"
 
-    // MARK: - Component - Quotes
-    public static let QuoteContainerInlineSpace = "16px"
-    public static let QuoteContainerStackSpace = "16px"
-    public static let QuoteQuotationMarksFontSize = "28px"
-    public static let QuoteContentGapSpace = "16px"
+    // MARK: - Component - Inputfield
+    public static let InputFieldStackSpace = "6px"
+    public static let InputFieldInlineSpace = "16px"
+    public static let InputFieldMiniLabelInlineSpace = "4px"
+    /** This variable controls texts inside of input fields such as dropdowns, date input and other text inputs that appear in forms for example. compact 15 - default 17 - spacious 19 */
+    public static let InputFieldFontSize = "16px"
+    public static let InputFieldImessageInlineSpace = "16px"
+    public static let InputFieldHeightSize = "36px"
+    public static let HeyInputContainerInlineSpace = "8px"
+    public static let InputFieldMessageGapSpace = "4px"
+    public static let InputFieldFontFamily = "Lucida Grande"
 
-    // MARK: - Component - RadioButtons
-    public static let RadioSelectorSize = "20px"
-    public static let RadioSelectorDotActiveSize = "12px"
+    // MARK: - Component - Breadcrumb
+    /** 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices. */
+    public static let BreadcrumbFontSize = "15px"
+    public static let BreadcrumbFontFamily = "Lucida Grande"
+    public static let BreadcrumbArrowLeftInlineSpace1 = "3px"
+    public static let BreadcrumbArrowRightInlineSpace2 = "5px"
+    public static let BreadcrumbInlineSpace = "12px"
+    /** 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices. */
+    public static let BreadcrumbLineHeight = "15px"
+    public static let BreadcrumbFontWeight = 700
+    public static let BreadcrumbStackSpace = "14px"
 
-    // MARK: - Component - Search
-    public static let SearchResultBadgeHeightSize = "18px"
+    // MARK: - Component - Icon
+    public static let IconSize = "24px"
+    public static let IconSizeEmbeddMedia = "40px"
+
+    // MARK: - Component - Badge
+    /** This space variable is used for creating the top and bottom space between a badge's text label and the surface that the text label is on top of. */
+    public static let BadgesInnerStackSpace = "2px"
+    /** This space variable is used for creating the left and right space between a badge's text label and the badge background surface that the text label is on top of. */
+    public static let BadgesInnerInlineSpace = "4px"
+    /** 30 - 30 - 30 - 30 - This variable is used on the Advert rectangular badge that is found above an ad containers. */
+    public static let AdLabelBadgeHeightSize = "30px"
 
     // MARK: - Component - SectionTitle
     public static let SectionTitleInnerStackBottomSpace = "12px"
@@ -302,8 +306,25 @@ public class BreakpointSm390pxCompact {
     /** This variable is used for increasing the space between the text and the arrow at the end of the large title text. On mobile devices there is no hover state so this variables values are the same as the default state values. */
     public static let SectionTitleArrowInlineSpaceActive = "5px"
 
-    // MARK: - Component - Separators
-    public static let SeparatorThicknessSize = "2px"
+    // MARK: - Component - AudioPlayer
+    /** This variable is used in the text style dedicated to audio player labels for elapsed time, reproduction speed and short functionality description text. 16 - 16 - 16 - 18 */
+    public static let AudioPlayerFontSize = "16px"
+
+    // MARK: - Component - SpecialNavi
+    public static let SpecialNaviInlineSpace = "24px"
+
+    // MARK: - Component - Chips
+    /** This variable is used on the chips font size parameter of the chips text style. The font size changes only for the change between larger device widths and any device smaller than the largest. 16 - 16 -16 - 18 */
+    public static let ChipsFontSize = "16px"
+    public static let ChipsInlineSpace = "12px"
+    public static let ChipsStackSpace = "8px"
+
+    // MARK: - Component - Search
+    public static let SearchResultBadgeHeightSize = "18px"
+
+    // MARK: - Component - RadioButtons
+    public static let RadioSelectorSize = "20px"
+    public static let RadioSelectorDotActiveSize = "12px"
 
     // MARK: - Component - Skeletons
     public static let HeadlinesSkeletonImagePlaceholderMaxWidth = "282px"
@@ -311,29 +332,39 @@ public class BreakpointSm390pxCompact {
     public static let ArticleSkeletonTextInlineSpace = "0px"
     public static let ArticleTextSkeletonHeightSize = "270px"
 
-    // MARK: - Component - Sliders
-    public static let SliderProgressBarIdleHeightSize = "4px"
-    public static let SliderProgressBarHoverHeightSize = "8px"
-    public static let SliderProgressInactiveHeightSize = "2px"
-    public static let VidPlayerProgressBarHeightSize = "12px"
-
-    // MARK: - Component - SpecialNavi
-    public static let SpecialNaviInlineSpace = "24px"
-
     // MARK: - Component - Spinners
     public static let VideoSpinnerSize = "40px"
     public static let VideoSpinnerStrokeSize = "2px"
     public static let VideoSpinnerSize05x = "20px"
 
-    // MARK: - Component - Table
-    public static let TableColumnWidthSize1x = "80px"
-    public static let TableColumnWidthSize2x = "140px"
-    public static let TableColumnWidthSize05x = "40px"
-    public static let TableColumnWidthSize15x = "120px"
-    public static let TableColumnWidthSize25x = "180px"
-    public static let TableColumnWidthSize075x = "56px"
-    public static let TableColumnWidthSize3x = "200px"
-    public static let TableItemMaxWidthSize = "224px"
+    // MARK: - Component - BreakingNews
+    public static let BreakingNewsContainerHeightSize = "56px"
+    public static let BreakingNewsBadgeUpperTitleFontSize = "13px"
+    public static let BreakingNewsBadgeLowerTitleFontSize = "23px"
+    public static let BreakingNewsBadgeUpperTitleLineHeight = "13px"
+    public static let BreakingNewsBadgeLowerTitleLineHeight = "21px"
+    public static let BreakingNewsBadgeTitelsStackSpace = "0px"
+    public static let BreakingNewsScrollingTextFontSize = "21px"
+    public static let BreakingNewsScrollingTextLineHeight = "24px"
+    public static let BreakingNewsBadgeInlineSpace = "6px"
+
+    // MARK: - Component - InfoElement
+    public static let InfoElementTeaserBadgeHeightSize = "16px"
+    public static let InfoElementTeaserImageHeightSize = "80px"
+    public static let InfoElementTeaserImageWidthSize = "80px"
+    public static let InfoElementTeaserBadgeMarginSpace = "4px"
+
+    // MARK: - Component - Mediaplayer
+    public static let PodcastPlayButtonSize = "48px"
+    public static let VidPlayerBottomBarGapSpace = "0px"
+    public static let AudioPlayerHeaderStackSpace = "56px"
+    public static let VideoTimeBadgeFontFamily = "Lucida Grande"
+    public static let VidPlayerControlButtonSize = "42px"
+    public static let VidPlayerControlButtonIconSizeHover = "28px"
+    public static let VidPlayerTimecodeFontSize = "14px"
+    public static let VidPlayerTimecodeContainerMinWidthSize = "45px"
+    public static let VidPlayerProgressBarContainerHeightSize = "24px"
+    public static let VidPlayerUnmuteButtonWidthSize = "220px"
 
     // MARK: - Component - Tabs
     /** Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data. */
@@ -348,59 +379,57 @@ public class BreakpointSm390pxCompact {
     public static let AppsTabsLabelLineHeight = "14.399999618530273px"
     public static let TopBarTabItemHeightSize = "44px"
 
-    // MARK: - Component - Teaser
-    public static let TeaserTitleInlineLeftSpace = "12px"
-    public static let TeaserTitleStackSpace = "4px"
-    public static let TeaserTitleGapSpace = "4px"
-    public static let TeaserKickerBgInlineSpace = "6px"
-    public static let TeaserKickerBgStackSpace = "2px"
-    /** This variable is used for creating space around the outside of a subscription badge or video icon badge. */
-    public static let TeaserBadgesMarginSpace = "8px"
-    /** This token is for controling the height of badges that are inside of teasers. 32 - 32 - 32 - 40 */
-    public static let TeaserBadgesHeightSizeLg = "32px"
-    public static let TeaserTitleBottomStackSpace = "12px"
-    public static let TeaserBadgesHeightSizeSm = "24px"
-    public static let TeaserLayoutGridSpace = "12px"
-
-    // MARK: - Component - Teaser - aTeaser
-    /** 16 - 16 - 22 - 24 This variable references the semantic variables kicker3fontsize and kicker2fontsize. At the 600px breakpoint smaller devices use the kicker3 variable */
-    public static let ATeaserKickerFontSize = "14px"
-    /** This variable references the semantic variables headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64 */
-    public static let ATeaserHeadlineFontSize = "24px"
-    public static let ATeaserKickerLineHeight = "14px"
-    public static let ATeaserHeadlineLineHeight = "24px"
-    public static let ATeaserTitleInlineSpace = "8px"
+    // MARK: - Component - Drawers
+    public static let MobileMenuDrawerStackSpace = "20px"
+    public static let MobileMenuDrawerLeftInlineSpace = "20px"
+    public static let MobileMenuDrawerRightInlineSpace = "16px"
+    public static let MobileMenuDrawerMaxWidthSize = "400px"
 
-    // MARK: - Component - Teaser - bTeaser
-    public static let BTeaserTitleInlineSpace = "8px"
+    // MARK: - Component - Quotes
+    public static let QuoteContainerInlineSpace = "16px"
+    public static let QuoteContainerStackSpace = "16px"
+    public static let QuoteQuotationMarksFontSize = "28px"
+    public static let QuoteContentGapSpace = "16px"
 
-    // MARK: - Component - Teaser - bildPlay
-    public static let BildPlayTeaserWidthSize = "145px"
+    // MARK: - Component - Carousel
+    /** This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination. */
+    public static let GalleryTeaserTitleBottomSpace = "28px"
+    /** This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination. */
+    public static let GalleryTeaserAppGapSpace = "0px"
+    public static let AppEpaperCarouselItemFocusWidth = "182px"
+    public static let AppEpaperCarouselItemDefaultWidth = "144px"
+    public static let AppEpaperCarouseBeilageItemWidth = "110px"
+    public static let StandardTeaserGalleryTeaserWidthWeb = "145px"
+    public static let StandardTeaserGalleryTeaserWidthApp = "280px"
 
-    // MARK: - Component - Teaser - mQTeaser
-    /** XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40 */
-    public static let MQteaserHeadlineFontSize = "16px"
-    public static let MQteaserHeadlineFontWeight = 600
-    public static let MQteaserHeadlineLineHeight = "18.399999618530273px"
-    public static let MqTeaserTitleInlineSpace = "8px"
+    // MARK: - Component - Sliders
+    public static let SliderProgressBarIdleHeightSize = "4px"
+    public static let SliderProgressBarHoverHeightSize = "8px"
+    public static let SliderProgressInactiveHeightSize = "2px"
+    public static let VidPlayerProgressBarHeightSize = "12px"
 
-    // MARK: - Component - Teaser - qTeaser
-    /** This component level variable is used on the quad teaser headline. It references the semantic level variable headline1. 48 - 48 - 72 - 100 */
-    public static let QuadHeadlineFontSize = "36px"
-    public static let QuadKickerFontSize = "16px"
-    public static let QuadHeadlineLineHeight = "37.79999923706055px"
-    public static let QTeaserTitleInlineSpace = "8px"
+    // MARK: - Component - Footer
+    /** This variable is used on footer links that commonly show up at the bottom of pages. The font size parameter remains constant at 11 px across device sizes. */
+    public static let FooterFontSize = "11px"
+    public static let FooterLineHeight = "14px"
+    public static let FooterFontFamily = "Gotham XNarrow"
+    public static let FooterFontSizeUserOfferPages = "18px"
+    public static let FooterLineHeightUserOfferPages = "26px"
 
-    // MARK: - Component - Teaser - stdTeaser
-    public static let StdTeaserImageTitleGapSpace = "4px"
-    /** This variable is used for creating space around the outside of a subscription badge or video icon badge. */
-    public static let StdTeaserBadgesMarginSpace = "4px"
-    /** 2 | 2 | 2 | 2 - This variable is used on the standard teaser vertical spacing between the kicker and the headline. It references the semantic variable stackSpaceConst3XS */
-    public static let StdTeaserKickerHeadlineStackSpace = "2px"
+    // MARK: - Component - Accordion
+    /** This variable exists specifically for changing the accordion font family across brands. It is subject to review. Bild: GothamXNarrow, SpoBi: Inter, Ads: LucindaGrande */
+    public static let AccordionLabelFontFamily = "Lucida Grande"
 
-    // MARK: - Component - Teaser - superA
-    /** 16 - 16 - 16 - 16 */
-    public static let SuperAteaserTitleInlineSpace = "16px"
+    // MARK: - Component - Paywall
+    public static let PaywallContainerGapSpace = "-48px"
+    public static let PaywallHeaderBottomStackSpace = "80px"
+    public static let PaywallCardMaxWidthSize = "346px"
+    /** This variable is used on the paywall card price tag. 64 constant */
+    public static let PaywallCardPriceTagFontSize = "64px"
+    public static let PaywallCardPriceTagLineHeight = "64px"
+    public static let PaywallCardPriceNoteLineHeight = "40px"
+    /** This variable is used on the paywall card text under the price tag. 40 - 40 - 40 - 40 */
+    public static let PaywallCardPriceNoteFontSize = "40px"
 
     // MARK: - Component - ToggleSwitch
     /** This variable is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18 */
@@ -408,305 +437,86 @@ public class BreakpointSm390pxCompact {
     /** This variable is used on labels in list items with toggle switches found in app preferences. 14.1 - 14.1 - 16.2 - 18.2 */
     public static let AppToggleItemLabelLineHeight = "14.100000381469727px"
 
-    // MARK: - Component - Video
-    /** This variable is used on video player badges that display a red play icon on top of a white square next to a time stamp. This variable references the borderRadiusXS. Constant value of 2 across device sizes. */
-    public static let VideoTimeBadgeCornerSize = "2px"
-    /** 16 - 16 - 18 - 18 -- This variable is used to control the videoTimeBadge text style's font size parameter. The typography style that uses this variable is the videoTimeBadge style. The badge that uses this variable appears on the upper right corner of horizontal videos. */
-    public static let VideoTimeBadgeFontSize = "16px"
-    /** 24 - 24 - 32 - 40 - This variable is used on horizontal video badges that contain a red play icon on top of a white square next to a timestamp. */
-    public static let VideoTimeBadgeSize = "24px"
-    public static let VideoRedPlayIconWidthSize = "8px"
-    /** This variable is used for changing the red play icon inside the white square. */
-    public static let VideoRedPlayIconHeightSize = "10px"
-    public static let VideoBadgeTimeLineHeight = "21px"
-    public static let VideoSkeletonContainerHeight = "180px"
-    public static let VideoFrameInlineSpace = "0px"
-    public static let VerticalVideoMockHeadlineFontSize = "22px"
-    /** 14 - 14 - 16 - 16 -- This variable is used in the videoAdBadge font size parameter. */
-    public static let VideoAdBadgeFontSize = "14px"
-
-    // MARK: - Component - _DSysDocs
-    /** Variable used in spacing parameters of bild.design webpage mockups. move to bild.design group maybe */
-    public static let BildDesignFrameSpace = "12px"
-    /** This variable is used on documentation pages. This is an alternative variable to the main container max width variable. 0 - 0 - 68 - 68 */
-    public static let DsMainContainerSpace = "0px"
-    public static let DsysDocsWidthSize = "750px"
-    /** This variable is used as a max width size for content blocks. For mobile devices this var references the DSysDocsWidthSize var 320 - 750 - 962 - 1024 */
-    public static let MainContentStageSize = "750px"
-    /** This variable is used on documentation pages that have an artistic banner at the top of the page that is related to the foundation topic on the page. 80 - 80 -80 - 140 */
-    public static let FoundationsBannerHeightSize = "80px"
-    /** This variable is used in documentation pages that have small caption or lables along with a UI component documented. 4 - 4 - 6 - 8 */
-    public static let DsCaptionStackSpace05x = "4px"
-    public static let DsCaptionStackSpace1x = "8px"
-    /** This variable is used only for this design system's component tests. */
-    public static let _1columnMobile = "320px"
-    /** This variable is currently used on a thin gallery that appears on desktop websites with petbook and other "books" content. Its height changes to a large height on mobile sites. 558 - 558 - 558 - 186 */
-    public static let ThinBannerVerticalHeightSize = "558px"
-    /** This variable is used only for texts and labels that form part of this design system's documentation. */
-    public static let SpecsFontFamily = "Gotham"
-    /** This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180 */
-    public static let DocHeaderHeightSize = "144px"
-
-
-    // MARK: - ============================================
-    // MARK: - OTHER
-    // MARK: - ============================================
-
-    public static let BreakpointName = "sm"
-
-
-    // MARK: - ============================================
-    // MARK: - SEMANTIC
-    // MARK: - ============================================
-
-    // MARK: - Semantic - Border - BorderRadius
-    /** 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges. */
-    public static let BorderRadiusXs = "2px"
-    /** 8-8-8-8 – Standard radius for buttons, chips, input fields, and medium-sized interactive elements. */
-    public static let BorderRadiusMd = "8px"
-    /** 4-4-4-4 – use for corner rounding on compact components like checkboxes or small input controls. */
-    public static let BorderRadiusSm = "4px"
-    /** 24-24-24-24 – use for corner rounding on larger cards, overlays, dialogs, and other container components. */
-    public static let BorderRadiusXl = "24px"
-    /** 16-16-16-16 – use for corner rounding on small cards, overlays, and modal surfaces. */
-    public static let BorderRadiusLg = "16px"
-    /** 0-0-0-0 – no corner rounding. Used as default for flat layouts, content modules, images, and teaser elements. */
-    public static let BorderRadiusNone = "0px"
-    /** creates fully rounded shapes, typically used for circular elements like avatars. */
-    public static let BorderRadiusFull = "9999px"
-
-    // MARK: - Semantic - Border - BorderWidth
-    /** 1-1-1-1 – use for subtle outlines and dividers */
-    public static let BorderWidthThin = "1px"
-    /** 2-2-2-2 – use for stronger outlines on form elements (inputs), buttons (outline variants), and interaction states (focus, hover, active) */
-    public static let BorderWidthThick = "2px"
-    /** 0.33 -0.33 -0.33 -0.33 – primarily used in mobile app interfaces. Optimized for high-density displays to create subtle dividers and outlines without visual overload. */
-    public static let BorderWidthHairline = "0.33000001311302185px"
-
-    // MARK: - Semantic - Layout
-    /** Common viewport height size based on the selected mode.
-Apply this token to the main frame of page layouts to simulate realistic vertical space. */
-    public static let CanvasHeightSizeWeb = "844px"
-    /** Common viewport width size based on the selected breakpoint.
-Apply this token to the main frame of page layouts. */
-    public static let CanvasWidthSizeWeb = "390px"
-    /** Common viewport width size based on the selected breakpoint.
-Apply this token to the main frame of page layouts. */
-    public static let CanvasWidthSizeApp = "390px"
-    /** Common viewport height size based on the selected mode.
-Apply this token to the main frame of page layouts to simulate realistic vertical space. */
-    public static let CanvasHeightSizeApp = "844px"
-
-    // MARK: - Semantic - Layout - Breakpoints
-    /** 320 - 390 - 600 - 1024 – Defines the minimum width of the main frame for different breakpoints.
-Apply this token to the main frame of page layouts to simulate realistic minimum widths across responsive viewports. */
-    public static let BreakpointMinWidthSize = "390px"
-    /** 389 - 599 - 1023 - 1024 – Defines the minimum width of the main frame for different breakpoints.
-Apply this token to the main frame of page layouts to simulate realistic maximum widths across responsive viewports. */
-    public static let BreakpointMaxWidthSize = "599px"
-
-    // MARK: - Semantic - Layout - ContentWidth
-    /** Use for content containers that should not fill the full page width on larger viewports. This is commonly used on article body text content and other elements in an article page. */
-    public static let ContentMaxWidthMedium = "700px"
-    /** Use for content containers that should fill the full width of the page */
-    public static let ContentMaxWidthFull = "1024px"
-
-    // MARK: - Semantic - Layout - Grid - Constant
-    /** 16-16-16-16 – use for fixed side paddings and gutters */
-    public static let GridSpaceConstLg = "16px"
-    /** 12-12-12-12 – use for fixed side paddings and gutters */
-    public static let GridSpaceConstSm = "12px"
-
-    // MARK: - Semantic - Layout - Grid - LayoutGuide
-    /** Used to set the column count in Figma Layout guide Grids */
-    public static let LayoutGuideGridColums = "4px"
-
-    // MARK: - Semantic - Layout - Grid - Responsive
-    /** 24-24-32-32 – use for side paddings and gutters in responsive layouts */
-    public static let GridSpaceRespLg = "24px"
-    /** 48-48-64-64 – use for side paddings and gutters in responsive layouts */
-    public static let GridSpaceRespXl = "48px"
-    /** 12-12-12-16 – use for side paddings and gutters in responsive layouts */
-    public static let GridSpaceRespBase = "12px"
-    /** 6-6-6-8 – use for side paddings and gutters in responsive layouts */
-    public static let GridSpaceRespSm = "6px"
-    /** 0-0-0-16 – This token is used on the main homepages content container, ensuring full-width layout (no horizontal padding) on mobile and tablet breakpoints. */
-    public static let PageInlineSpace = "0px"
-
-    // MARK: - Semantic - Layout - Section
-    /** 36-36-48-48 – Use for vertical spacing between sections in a layout. */
-    public static let SectionSpaceBase = "36px"
-    /** 72-72-96-96 – Use for vertical spacing between sections in a layout */
-    public static let SectionSpaceLg = "72px"
-    /** 16-16-32-32 – Use for spacing after paragraphs in text content */
-    public static let ParagraphEndSpace = "16px"
-    /** 24-24-36-36 – Use for vertical spacing between subsections in a layout */
-    public static let SectionSpaceSm = "24px"
-
-    // MARK: - Semantic - Size - Constant
-    /** 16-16-16-16 – Use for setting fixed height and width of UI elements */
-    public static let SizeConst3Xs = "16px"
-    /** 24-24-24-24 – Use for setting fixed height and width of UI elements */
-    public static let SizeConst2Xs = "24px"
-    /** 32-32-32-32 – Use for setting fixed height and width of UI elements */
-    public static let SizeConstXs = "32px"
-    /** 40-40-40-40 – Use for setting fixed height and width of UI elements */
-    public static let SizeConstSm = "40px"
-    /** 48-48-48-48 Use for setting fixed height and width of UI elements */
-    public static let SizeConstMd = "48px"
-    /** 56-56-56-56 – Use for setting fixed height and width of UI elements */
-    public static let SizeConstLg = "56px"
-    /** 64-64-64-64 – Use for setting fixed height and width of UI elements */
-    public static let SizeConstXl = "64px"
-    /** 96-96-96-96 – Use for setting fixed height and width of UI elements */
-    public static let SizeConst3Xl = "96px"
-    /** 148-148-148-148 – Use for setting fixed height and width of UI elements */
-    public static let SizeConst4Xl = "148px"
-    /** 72-72-72-72 – Use for setting fixed height and width of UI elements */
-    public static let SizeConst2Xl = "72px"
-    /** 8-8-8-8 – Use for setting fixed height and width of UI elements */
-    public static let SizeConst4Xs = "8px"
-
-    // MARK: - Semantic - Size - Responsive
-    /** 16-16-16-24 – Use for setting height and width of UI elements that scale across breakpoints */
-    public static let SizeResp3Xs = "16px"
-    /** 24-24-32-32 – Use for setting height and width of UI elements that scale across breakpoints */
-    public static let SizeResp2Xs = "24px"
-    /** 32-32-40-48 – Use for setting height and width of UI elements that scale across breakpoints */
-    public static let SizeRespXs = "32px"
-    /** 40-40-48-56 – Use for setting height and width of UI elements that scale across breakpoints */
-    public static let SizeRespSm = "40px"
-    /** 48-48-64-72 – Use for setting height and width of UI elements that scale across breakpoints */
-    public static let SizeRespMd = "48px"
-    /** 56-56-72-92 – Use for setting height and width of UI elements that scale across breakpoints */
-    public static let SizeRespLg = "56px"
-    /** 64-64-80-96 – Use for setting height and width of UI elements that scale across breakpoints */
-    public static let SizeRespXl = "64px"
-    /** 72-72-92-100 – Use for setting height and width of UI elements that scale across breakpoints */
-    public static let SizeResp2Xl = "72px"
-    /** 96-96-120-148 – Use for setting height and width of UI elements that scale across breakpoints */
-    public static let SizeResp3Xl = "96px"
-    /** 148-148-160-180 – Use for setting height and width of UI elements that scale across breakpoints */
-    public static let SizeResp4Xl = "148px"
-    /** 12-12-14-16 – Use for setting height and width of UI elements that scale across breakpoints */
-    public static let SizeResp4Xs = "12px"
-
-    // MARK: - Semantic - Space - Gap - Constant
-    /** 2-2-2-2 – Use for fixed gaps between items inside of UI elements */
-    public static let GapSpaceConst2Xs = "2px"
-    /** 4-4-4-4 – Use for fixed gaps between items inside of UI elements */
-    public static let GapSpaceConstXs = "4px"
-    /** 8-8-8-8 – Use for fixed gaps between items inside of UI elements */
-    public static let GapSpaceConstSm = "8px"
-    /** 12-12-12-12 – Use for fixed gaps between items inside of UI elements */
-    public static let GapSpaceConstMd = "12px"
-    /** 16-16-16-16 – Use for fixed gaps between items inside of UI elements */
-    public static let GapSpaceConstLg = "16px"
-    /** 24-24-24-24 – Use for fixed gaps between items inside of UI elements */
-    public static let GapSpaceConstXl = "24px"
-    /** 32-32-32-32 – Use for fixed gaps between items inside of UI elements */
-    public static let GapSpaceConst2Xl = "32px"
-    /** 48-48-48-48 – Use for fixed gaps between items inside of UI elements */
-    public static let GapSpaceConst3Xl = "48px"
-
-    // MARK: - Semantic - Space - Gap - Responsive
-    /** 4-4-6-8 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    public static let GapSpaceRespXs = "4px"
-    /** 16-16-24-32 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    public static let GapSpaceRespLg = "16px"
-    /** 24-24-32-48 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    public static let GapSpaceRespXl = "24px"
-    /** 32-32-48-64 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    public static let GapSpaceResp2Xl = "32px"
-    /** 12-12-16-24 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    public static let GapSpaceRespMd = "12px"
-    /** 8-8-12-16 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    public static let GapSpaceRespSm = "8px"
-    /** 2-2-4-6 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    public static let GapSpaceResp2Xs = "2px"
-    /** 48-48-72-96 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    public static let GapSpaceResp3Xl = "48px"
+    // MARK: - Component - Cards
+    public static let SearchResultCardImageWidthSize = "216px"
+    public static let SearchResultCardImageHeightSizeStacked = "189px"
+    public static let NewstickerImageCardWidthSize = "206px"
 
-    // MARK: - Semantic - Space - Inline - Constant
-    /** 8-8-8-8 – Use for fixed horizontal (left/right) padding of UI elements */
-    public static let InlineSpaceConstSm = "8px"
-    /** 12-12-12-12 – Use for fixed horizontal (left/right) padding of UI elements */
-    public static let InlineSpaceConstMd = "12px"
-    /** 16-16-16-16 – Use for fixed horizontal (left/right) padding of UI elements */
-    public static let InlineSpaceConstLg = "16px"
-    /** 32-32-32-32 – Use for fixed horizontal (left/right) padding of UI elements */
-    public static let InlineSpaceConst2Xl = "32px"
-    /** 24-24-24-24 – Use for fixed horizontal (left/right) padding of UI elements */
-    public static let InlineSpaceConstXl = "24px"
-    /** 6-6-6-6 – Use for fixed horizontal (left/right) padding of UI elements */
-    public static let InlineSpaceConstXs = "6px"
-    /** 2-2-2-2 – Use for fixed horizontal (left/right) padding of UI elements */
-    public static let InlineSpaceConst3Xs = "2px"
-    /** 4-4-4-4 – Use for fixed horizontal (left/right) padding of UI elements */
-    public static let InlineSpaceConst2Xs = "4px"
+    // MARK: - Component - Datepicker
+    public static let DatepickerItemDayWidthSize = "44px"
+    public static let DatepickerItemHeightSize = "44px"
+    public static let DatepickerItemYearWidthSize = "77px"
 
-    // MARK: - Semantic - Space - Inline - Responsive
-    /** 8-8-12-16 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-    public static let InlineSpaceRespSm = "8px"
-    /** 12-12-16-24 use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-    public static let InlineSpaceRespMd = "12px"
-    /** 16-16-24-32 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-    public static let InlineSpaceRespLg = "16px"
-    /** 32-32-48-64 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-    public static let InlineSpaceResp2Xl = "32px"
-    /** 24-24-32-40 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-    public static let InlineSpaceRespXl = "24px"
 
-    // MARK: - Semantic - Space - Stack - Constant
-    /** 8-8-8-8 – Use for fixed vertical (top/bottom) padding of UI elements */
-    public static let StackSpaceConstSm = "8px"
-    /** 12-12-12-12 – Use for fixed vertical (top/bottom) padding of UI elements */
-    public static let StackSpaceConstMd = "12px"
-    /** 16-16-16-16 – Use for fixed vertical (top/bottom) padding of UI elements */
-    public static let StackSpaceConstLg = "16px"
-    /** 32-32-32-32 – Use for fixed vertical (top/bottom) padding of UI elements */
-    public static let StackSpaceConst2Xl = "32px"
-    /** 24-24-24-24 – Use for fixed vertical (top/bottom) padding of UI elements */
-    public static let StackSpaceConstXl = "24px"
-    /** 6-6-6-6 – Use for fixed vertical (top/bottom) padding of UI elements */
-    public static let StackSpaceConstXs = "6px"
-    /** 2-2-2-2 – Use for fixed vertical (top/bottom) padding of UI elements */
-    public static let StackSpaceConst3Xs = "2px"
-    /** 4-4-4-4 – Use for fixed vertical (top/bottom) padding of UI elements */
-    public static let StackSpaceConst2Xs = "4px"
+    // MARK: - ============================================
+    // MARK: - SEMANTIC
+    // MARK: - ============================================
 
-    // MARK: - Semantic - Space - Stack - Responsive
-    /** 12-12-16-24 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-    public static let StackSpaceRespMd = "12px"
-    /** 16-16-24-32 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-    public static let StackSpaceRespLg = "16px"
-    /** 32-32-48-64 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-    public static let StackSpaceResp2Xl = "32px"
-    /** 8-8-12-16 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-    public static let StackSpaceRespSm = "8px"
-    /** 24-24-32-40 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-    public static let StackSpaceRespXl = "24px"
+    // MARK: - Semantic - Layout - Grid - Responsive
+    /** 24-24-32-32 – use for side paddings and gutters in responsive layouts */
+    public static let GridSpaceRespLg = "24px"
+    /** 48-48-64-64 – use for side paddings and gutters in responsive layouts */
+    public static let GridSpaceRespXl = "48px"
+    /** 12-12-12-16 – use for side paddings and gutters in responsive layouts */
+    public static let GridSpaceRespBase = "12px"
+    /** 6-6-6-8 – use for side paddings and gutters in responsive layouts */
+    public static let GridSpaceRespSm = "6px"
+    /** 0-0-0-16 – This token is used on the main homepages content container, ensuring full-width layout (no horizontal padding) on mobile and tablet breakpoints. */
+    public static let PageInlineSpace = "0px"
 
-    // MARK: - Semantic - Typography - FontFamily
-    /** This variable references the bodyFontFamily variable from the branding collection. */
-    public static let BodyFontFamily = "Lucida Grande"
-    public static let CalloutFontFamily = "Lucida Grande"
-    public static let HeadlineFontFamily = "Lucida Grande"
-    public static let FootnoteFontFamily = "Lucida Grande"
-    public static let LabelFontFamily = "Lucida Grande"
-    public static let KickerFontFamily = "Lucida Grande"
-    public static let SubheadlineFontFamily = "Lucida Grande"
-    public static let TitleFontFamily = "Lucida Grande"
-    public static let QuoteFontFamily = "Lucida Grande"
-    public static let DisplayFontFamily = "Lucida Grande"
+    // MARK: - Semantic - Layout - Grid - Constant
+    /** 16-16-16-16 – use for fixed side paddings and gutters */
+    public static let GridSpaceConstLg = "16px"
+    /** 12-12-12-12 – use for fixed side paddings and gutters */
+    public static let GridSpaceConstSm = "12px"
 
-    // MARK: - Semantic - Typography - FontSize - Body
-    /** This variable is used on the body text style's font size parameter. It remains constant at 21. */
-    public static let BodyFontSize = "17px"
+    // MARK: - Semantic - Layout - Grid - LayoutGuide
+    /** Used to set the column count in Figma Layout guide Grids */
+    public static let LayoutGuideGridColums = "4px"
 
-    // MARK: - Semantic - Typography - FontSize - Callout
-    /** This token is used for the font size parameter of the callout text style. 18 - 18 - 22 - 22 */
-    public static let Callout1FontSize = "16px"
+    // MARK: - Semantic - Layout - Section
+    /** 36-36-48-48 – Use for vertical spacing between sections in a layout. */
+    public static let SectionSpaceBase = "36px"
+    /** 72-72-96-96 – Use for vertical spacing between sections in a layout */
+    public static let SectionSpaceLg = "72px"
+    /** 16-16-32-32 – Use for spacing after paragraphs in text content */
+    public static let ParagraphEndSpace = "16px"
+    /** 24-24-36-36 – Use for vertical spacing between subsections in a layout */
+    public static let SectionSpaceSm = "24px"
+
+    // MARK: - Semantic - Layout - Breakpoints
+    /** 320 - 390 - 600 - 1024 – Defines the minimum width of the main frame for different breakpoints.
+Apply this token to the main frame of page layouts to simulate realistic minimum widths across responsive viewports. */
+    public static let BreakpointMinWidthSize = "390px"
+    /** 389 - 599 - 1023 - 1024 – Defines the minimum width of the main frame for different breakpoints.
+Apply this token to the main frame of page layouts to simulate realistic maximum widths across responsive viewports. */
+    public static let BreakpointMaxWidthSize = "599px"
+
+    // MARK: - Semantic - Layout
+    /** Common viewport height size based on the selected mode.
+Apply this token to the main frame of page layouts to simulate realistic vertical space. */
+    public static let CanvasHeightSizeWeb = "844px"
+    /** Common viewport width size based on the selected breakpoint.
+Apply this token to the main frame of page layouts. */
+    public static let CanvasWidthSizeWeb = "390px"
+    /** Common viewport width size based on the selected breakpoint.
+Apply this token to the main frame of page layouts. */
+    public static let CanvasWidthSizeApp = "390px"
+    /** Common viewport height size based on the selected mode.
+Apply this token to the main frame of page layouts to simulate realistic vertical space. */
+    public static let CanvasHeightSizeApp = "844px"
+
+    // MARK: - Semantic - Layout - ContentWidth
+    /** Use for content containers that should not fill the full page width on larger viewports. This is commonly used on article body text content and other elements in an article page. */
+    public static let ContentMaxWidthMedium = "700px"
+    /** Use for content containers that should fill the full width of the page */
+    public static let ContentMaxWidthFull = "1024px"
+
+    // MARK: - Semantic - Typography - FontSize - Title
+    /** 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
+    public static let Title1FontSize = "22px"
+    /** 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
+    public static let Title2FontSize = "14px"
 
     // MARK: - Semantic - Typography - FontSize - Display
     /** This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120 */
@@ -716,12 +526,6 @@ Apply this token to the main frame of page layouts to simulate realistic maximum
     /** This variable is used on the display3 font size parameter of the display3 text style. 28 - 28 - 32 - 40 */
     public static let Display3FontSize = "27px"
 
-    // MARK: - Semantic - Typography - FontSize - Footnote
-    /** This token is used on the footnote text style font size parameter. 16 - 16 - 16 - 18 */
-    public static let Footnote1FontSize = "13px"
-    /** This token is used in the font size parameter of the footnote2 text style. 12 - 12 - 12 - 16 */
-    public static let Footnote2FontSize = "10px"
-
     // MARK: - Semantic - Typography - FontSize - Headline
     /** This token is used for the headline1 text style's font size parameter. 48 - 48 - 72 - 100 */
     public static let Headline1FontSize = "36px"
@@ -732,15 +536,9 @@ Apply this token to the main frame of page layouts to simulate realistic maximum
     /** This token controls the headline4 text style's font size parameter: 22 - 22 - 26 - 32 */
     public static let Headline4FontSize = "16px"
 
-    // MARK: - Semantic - Typography - FontSize - Kicker
-    /** Values come from NMT Figma File 01_Foundation; in online CSS this is kicker0. 18 - 18 - 22 - 30 - This variable does not exist yet in online css. Online css is called kicker0 for smallest font size. */
-    public static let Kicker1FontSize = "16px"
-    /** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. This DS uses 1 to 4 following html convention of h1, h2, h3, etc. 18 - 18 - 22 - 24 */
-    public static let Kicker2FontSize = "16px"
-    /** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 16 - 16 - 18 - 20 */
-    public static let Kicker3FontSize = "14px"
-    /** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 14 - 14 - 16 - 16 */
-    public static let Kicker4FontSize = "12px"
+    // MARK: - Semantic - Typography - FontSize - Body
+    /** This variable is used on the body text style's font size parameter. It remains constant at 21. */
+    public static let BodyFontSize = "17px"
 
     // MARK: - Semantic - Typography - FontSize - Label
     /** This token is used in the label3 text style's font size parameter. Its value remains constant at 12 across device sizes. */
@@ -754,33 +552,64 @@ Apply this token to the main frame of page layouts to simulate realistic maximum
     /** This token is used in the font size parameter of the label4 text style. The value remains constant at 8. */
     public static let Label4FontSize = "8px"
 
-    // MARK: - Semantic - Typography - FontSize - Quote
-    /** 16 - 16 - 18 - 20 -- This variable is used for controlling the font size of the quote text style. */
-    public static let QuoteFontSize = "16px"
+    // MARK: - Semantic - Typography - FontSize - Callout
+    /** This token is used for the font size parameter of the callout text style. 18 - 18 - 22 - 22 */
+    public static let Callout1FontSize = "16px"
+
+    // MARK: - Semantic - Typography - FontSize - Footnote
+    /** This token is used on the footnote text style font size parameter. 16 - 16 - 16 - 18 */
+    public static let Footnote1FontSize = "13px"
+    /** This token is used in the font size parameter of the footnote2 text style. 12 - 12 - 12 - 16 */
+    public static let Footnote2FontSize = "10px"
+
+    // MARK: - Semantic - Typography - FontSize - Kicker
+    /** Values come from NMT Figma File 01_Foundation; in online CSS this is kicker0. 18 - 18 - 22 - 30 - This variable does not exist yet in online css. Online css is called kicker0 for smallest font size. */
+    public static let Kicker1FontSize = "16px"
+    /** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. This DS uses 1 to 4 following html convention of h1, h2, h3, etc. 18 - 18 - 22 - 24 */
+    public static let Kicker2FontSize = "16px"
+    /** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 16 - 16 - 18 - 20 */
+    public static let Kicker3FontSize = "14px"
+    /** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 14 - 14 - 16 - 16 */
+    public static let Kicker4FontSize = "12px"
 
     // MARK: - Semantic - Typography - FontSize - Subheadline
     /** This token controls the subheadline1 font size parameter. 24 - 24 - 32 - 36 */
     public static let Subheadline1FontSize = "18px"
 
-    // MARK: - Semantic - Typography - FontSize - Title
-    /** 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
-    public static let Title1FontSize = "22px"
-    /** 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
-    public static let Title2FontSize = "14px"
+    // MARK: - Semantic - Typography - FontSize - Quote
+    /** 16 - 16 - 18 - 20 -- This variable is used for controlling the font size of the quote text style. */
+    public static let QuoteFontSize = "16px"
 
-    // MARK: - Semantic - Typography - FontWeight - Body
-    public static let BodyFontWeightBook = 400
-    public static let BodyFontWeightBold = 700
+    // MARK: - Semantic - Typography - FontFamily
+    /** This variable references the bodyFontFamily variable from the branding collection. */
+    public static let BodyFontFamily = "Lucida Grande"
+    public static let CalloutFontFamily = "Lucida Grande"
+    public static let HeadlineFontFamily = "Lucida Grande"
+    public static let FootnoteFontFamily = "Lucida Grande"
+    public static let LabelFontFamily = "Lucida Grande"
+    public static let KickerFontFamily = "Lucida Grande"
+    public static let SubheadlineFontFamily = "Lucida Grande"
+    public static let TitleFontFamily = "Lucida Grande"
+    public static let QuoteFontFamily = "Lucida Grande"
+    public static let DisplayFontFamily = "Lucida Grande"
 
     // MARK: - Semantic - Typography - FontWeight - Callout
     public static let CalloutFontWeight = 800
 
-    // MARK: - Semantic - Typography - FontWeight - Display
-    public static let DisplayFontWeight = 800
+    // MARK: - Semantic - Typography - FontWeight - Label
+    public static let LabelFontWeightBold = 700
+    public static let LabelFontWeightBook = 400
 
-    // MARK: - Semantic - Typography - FontWeight - Footnote
-    public static let FootnoteFontWeightBook = 400
-    public static let FootnoteFontWeightBold = 700
+    // MARK: - Semantic - Typography - FontWeight - Body
+    public static let BodyFontWeightBook = 400
+    public static let BodyFontWeightBold = 700
+
+    // MARK: - Semantic - Typography - FontWeight - Kicker
+    public static let KickerFontWeight = 700
+    public static let KickerFontWeightSt = "700"
+
+    // MARK: - Semantic - Typography - FontWeight - Subheadline
+    public static let SubheadlineFontWeight = 700
 
     // MARK: - Semantic - Typography - FontWeight - Headline
     public static let Headline1FontWeight = 700
@@ -790,22 +619,66 @@ Apply this token to the main frame of page layouts to simulate realistic maximum
     /** This variable is a string type variable for controlling not only headline font weight but also the italic style for Sport Bild headlines. */
     public static let Headline1FontWeightSt = "700"
 
-    // MARK: - Semantic - Typography - FontWeight - Kicker
-    public static let KickerFontWeight = 700
-    public static let KickerFontWeightSt = "700"
+    // MARK: - Semantic - Typography - FontWeight - Title
+    public static let TitleFontWeight = 800
+
+    // MARK: - Semantic - Typography - FontWeight - Display
+    public static let DisplayFontWeight = 800
+
+    // MARK: - Semantic - Typography - FontWeight - Quote
+    public static let QuoteFontWeight = 800
+
+    // MARK: - Semantic - Typography - FontWeight - Footnote
+    public static let FootnoteFontWeightBook = 400
+    public static let FootnoteFontWeightBold = 700
+
+    // MARK: - Semantic - Typography - LineHeight - Body
+    /** Figma's font line height currently does not allow for multipliers as is used on current website css var(--body-line-height) */
+    public static let BodyLineHeight = "29.75px"
+
+    // MARK: - Semantic - Typography - LineHeight - Kicker
+    public static let Kicker4LineHeight = "13.199999809265137px"
+    public static let Kicker3LineHeight = "15.399999618530273px"
+    public static let Kicker2LineHeight = "17.600000381469727px"
+    public static let Kicker1LineHeight = "17.600000381469727px"
+
+    // MARK: - Semantic - Typography - LineHeight - Label
+    public static let Label3LineHeight = "14.399999618530273px"
+    /** This variable is used in the label1 text style's line height parameter. It references branding variables for brand specific line heights. */
+    public static let Label1LineHeight = "20.399999618530273px"
+    public static let Label1ResponsiveLineHeight = "10px"
+    public static let Label2LineHeight = "16px"
+    public static let Label4LineHeight = "10px"
+
+    // MARK: - Semantic - Typography - LineHeight - Display
+    public static let Display1LineHeight = "40px"
+    public static let Display2LineHeight = "36px"
+    public static let Display3LineHeight = "28px"
 
-    // MARK: - Semantic - Typography - FontWeight - Label
-    public static let LabelFontWeightBold = 700
-    public static let LabelFontWeightBook = 400
+    // MARK: - Semantic - Typography - LineHeight - Title
+    public static let Title1LineHeight = "26.399999618530273px"
+    /** html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
+    public static let Title2LineHeight = "16.799999237060547px"
 
-    // MARK: - Semantic - Typography - FontWeight - Quote
-    public static let QuoteFontWeight = 800
+    // MARK: - Semantic - Typography - LineHeight - Quote
+    /** This variable is used in the quote text style line height parameter. */
+    public static let QuoteLineHeight = "20.799999237060547px"
 
-    // MARK: - Semantic - Typography - FontWeight - Subheadline
-    public static let SubheadlineFontWeight = 700
+    // MARK: - Semantic - Typography - LineHeight - Footnote
+    public static let Footnote1LineHeight = "16.899999618530273px"
+    public static let Footnote2LineHeight = "13px"
 
-    // MARK: - Semantic - Typography - FontWeight - Title
-    public static let TitleFontWeight = 800
+    // MARK: - Semantic - Typography - LineHeight - Headline
+    public static let Headline1LineHeight = "37.79999923706055px"
+    public static let Headline2LineHeight = "33px"
+    public static let Headline3LineHeight = "26.399999618530273px"
+    public static let Headline4LineHeight = "18.399999618530273px"
+
+    // MARK: - Semantic - Typography - LineHeight - Callout
+    public static let CalloutLineHeight = "20.799999237060547px"
+
+    // MARK: - Semantic - Typography - LineHeight - Subheadline
+    public static let Subheadline1LineHeight = "23.399999618530273px"
 
     // MARK: - Semantic - Typography - LetterSpacing
     /** 0.5 | 0.5 | 0.5 | 0.5 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. */
@@ -835,53 +708,29 @@ Apply this token to the main frame of page layouts to simulate realistic maximum
     /** -0.5 | -0.5 | -1 | -1 | This variable is used for the letter spacing parameter of the display3 text style. On smaller devices the value is smaller than on larger devices. */
     public static let Display3LetterSpacing = "-0.5px"
 
-    // MARK: - Semantic - Typography - LineHeight - Body
-    /** Figma's font line height currently does not allow for multipliers as is used on current website css var(--body-line-height) */
-    public static let BodyLineHeight = "29.75px"
-
-    // MARK: - Semantic - Typography - LineHeight - Callout
-    public static let CalloutLineHeight = "20.799999237060547px"
-
-    // MARK: - Semantic - Typography - LineHeight - Display
-    public static let Display1LineHeight = "40px"
-    public static let Display2LineHeight = "36px"
-    public static let Display3LineHeight = "28px"
-
-    // MARK: - Semantic - Typography - LineHeight - Footnote
-    public static let Footnote1LineHeight = "16.899999618530273px"
-    public static let Footnote2LineHeight = "13px"
-
-    // MARK: - Semantic - Typography - LineHeight - Headline
-    public static let Headline1LineHeight = "37.79999923706055px"
-    public static let Headline2LineHeight = "33px"
-    public static let Headline3LineHeight = "26.399999618530273px"
-    public static let Headline4LineHeight = "18.399999618530273px"
-
-    // MARK: - Semantic - Typography - LineHeight - Kicker
-    public static let Kicker4LineHeight = "13.199999809265137px"
-    public static let Kicker3LineHeight = "15.399999618530273px"
-    public static let Kicker2LineHeight = "17.600000381469727px"
-    public static let Kicker1LineHeight = "17.600000381469727px"
-
-    // MARK: - Semantic - Typography - LineHeight - Label
-    public static let Label3LineHeight = "14.399999618530273px"
-    /** This variable is used in the label1 text style's line height parameter. It references branding variables for brand specific line heights. */
-    public static let Label1LineHeight = "20.399999618530273px"
-    public static let Label1ResponsiveLineHeight = "10px"
-    public static let Label2LineHeight = "16px"
-    public static let Label4LineHeight = "10px"
-
-    // MARK: - Semantic - Typography - LineHeight - Quote
-    /** This variable is used in the quote text style line height parameter. */
-    public static let QuoteLineHeight = "20.799999237060547px"
-
-    // MARK: - Semantic - Typography - LineHeight - Subheadline
-    public static let Subheadline1LineHeight = "23.399999618530273px"
+    // MARK: - Semantic - Border - BorderRadius
+    /** 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges. */
+    public static let BorderRadiusXs = "2px"
+    /** 8-8-8-8 – Standard radius for buttons, chips, input fields, and medium-sized interactive elements. */
+    public static let BorderRadiusMd = "8px"
+    /** 4-4-4-4 – use for corner rounding on compact components like checkboxes or small input controls. */
+    public static let BorderRadiusSm = "4px"
+    /** 24-24-24-24 – use for corner rounding on larger cards, overlays, dialogs, and other container components. */
+    public static let BorderRadiusXl = "24px"
+    /** 16-16-16-16 – use for corner rounding on small cards, overlays, and modal surfaces. */
+    public static let BorderRadiusLg = "16px"
+    /** 0-0-0-0 – no corner rounding. Used as default for flat layouts, content modules, images, and teaser elements. */
+    public static let BorderRadiusNone = "0px"
+    /** creates fully rounded shapes, typically used for circular elements like avatars. */
+    public static let BorderRadiusFull = "9999px"
 
-    // MARK: - Semantic - Typography - LineHeight - Title
-    public static let Title1LineHeight = "26.399999618530273px"
-    /** html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
-    public static let Title2LineHeight = "16.799999237060547px"
+    // MARK: - Semantic - Border - BorderWidth
+    /** 1-1-1-1 – use for subtle outlines and dividers */
+    public static let BorderWidthThin = "1px"
+    /** 2-2-2-2 – use for stronger outlines on form elements (inputs), buttons (outline variants), and interaction states (focus, hover, active) */
+    public static let BorderWidthThick = "2px"
+    /** 0.33 -0.33 -0.33 -0.33 – primarily used in mobile app interfaces. Optimized for high-density displays to create subtle dividers and outlines without visual overload. */
+    public static let BorderWidthHairline = "0.33000001311302185px"
 
     // MARK: - Semantic - Visibility - Boolean
     /** Use for showing elements on mobile viewport sizes only */
@@ -906,4 +755,155 @@ Apply this token to the main frame of page layouts to simulate realistic maximum
     public static let BpSpecificWeb = "xs/sm"
     public static let BpSpecificApp = "compact"
 
+    // MARK: - Semantic - Space - Inline - Responsive
+    /** 8-8-12-16 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
+    public static let InlineSpaceRespSm = "8px"
+    /** 12-12-16-24 use for horizontal (left/right) padding of UI elements that scales across breakpoints */
+    public static let InlineSpaceRespMd = "12px"
+    /** 16-16-24-32 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
+    public static let InlineSpaceRespLg = "16px"
+    /** 32-32-48-64 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
+    public static let InlineSpaceResp2Xl = "32px"
+    /** 24-24-32-40 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
+    public static let InlineSpaceRespXl = "24px"
+
+    // MARK: - Semantic - Space - Inline - Constant
+    /** 8-8-8-8 – Use for fixed horizontal (left/right) padding of UI elements */
+    public static let InlineSpaceConstSm = "8px"
+    /** 12-12-12-12 – Use for fixed horizontal (left/right) padding of UI elements */
+    public static let InlineSpaceConstMd = "12px"
+    /** 16-16-16-16 – Use for fixed horizontal (left/right) padding of UI elements */
+    public static let InlineSpaceConstLg = "16px"
+    /** 32-32-32-32 – Use for fixed horizontal (left/right) padding of UI elements */
+    public static let InlineSpaceConst2Xl = "32px"
+    /** 24-24-24-24 – Use for fixed horizontal (left/right) padding of UI elements */
+    public static let InlineSpaceConstXl = "24px"
+    /** 6-6-6-6 – Use for fixed horizontal (left/right) padding of UI elements */
+    public static let InlineSpaceConstXs = "6px"
+    /** 2-2-2-2 – Use for fixed horizontal (left/right) padding of UI elements */
+    public static let InlineSpaceConst3Xs = "2px"
+    /** 4-4-4-4 – Use for fixed horizontal (left/right) padding of UI elements */
+    public static let InlineSpaceConst2Xs = "4px"
+
+    // MARK: - Semantic - Space - Stack - Responsive
+    /** 12-12-16-24 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
+    public static let StackSpaceRespMd = "12px"
+    /** 16-16-24-32 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
+    public static let StackSpaceRespLg = "16px"
+    /** 32-32-48-64 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
+    public static let StackSpaceResp2Xl = "32px"
+    /** 8-8-12-16 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
+    public static let StackSpaceRespSm = "8px"
+    /** 24-24-32-40 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
+    public static let StackSpaceRespXl = "24px"
+
+    // MARK: - Semantic - Space - Stack - Constant
+    /** 8-8-8-8 – Use for fixed vertical (top/bottom) padding of UI elements */
+    public static let StackSpaceConstSm = "8px"
+    /** 12-12-12-12 – Use for fixed vertical (top/bottom) padding of UI elements */
+    public static let StackSpaceConstMd = "12px"
+    /** 16-16-16-16 – Use for fixed vertical (top/bottom) padding of UI elements */
+    public static let StackSpaceConstLg = "16px"
+    /** 32-32-32-32 – Use for fixed vertical (top/bottom) padding of UI elements */
+    public static let StackSpaceConst2Xl = "32px"
+    /** 24-24-24-24 – Use for fixed vertical (top/bottom) padding of UI elements */
+    public static let StackSpaceConstXl = "24px"
+    /** 6-6-6-6 – Use for fixed vertical (top/bottom) padding of UI elements */
+    public static let StackSpaceConstXs = "6px"
+    /** 2-2-2-2 – Use for fixed vertical (top/bottom) padding of UI elements */
+    public static let StackSpaceConst3Xs = "2px"
+    /** 4-4-4-4 – Use for fixed vertical (top/bottom) padding of UI elements */
+    public static let StackSpaceConst2Xs = "4px"
+
+    // MARK: - Semantic - Space - Gap - Responsive
+    /** 4-4-6-8 – Use for gaps between items inside of UI elements that scale across breakpoints */
+    public static let GapSpaceRespXs = "4px"
+    /** 16-16-24-32 – Use for gaps between items inside of UI elements that scale across breakpoints */
+    public static let GapSpaceRespLg = "16px"
+    /** 24-24-32-48 – Use for gaps between items inside of UI elements that scale across breakpoints */
+    public static let GapSpaceRespXl = "24px"
+    /** 32-32-48-64 – Use for gaps between items inside of UI elements that scale across breakpoints */
+    public static let GapSpaceResp2Xl = "32px"
+    /** 12-12-16-24 – Use for gaps between items inside of UI elements that scale across breakpoints */
+    public static let GapSpaceRespMd = "12px"
+    /** 8-8-12-16 – Use for gaps between items inside of UI elements that scale across breakpoints */
+    public static let GapSpaceRespSm = "8px"
+    /** 2-2-4-6 – Use for gaps between items inside of UI elements that scale across breakpoints */
+    public static let GapSpaceResp2Xs = "2px"
+    /** 48-48-72-96 – Use for gaps between items inside of UI elements that scale across breakpoints */
+    public static let GapSpaceResp3Xl = "48px"
+
+    // MARK: - Semantic - Space - Gap - Constant
+    /** 2-2-2-2 – Use for fixed gaps between items inside of UI elements */
+    public static let GapSpaceConst2Xs = "2px"
+    /** 4-4-4-4 – Use for fixed gaps between items inside of UI elements */
+    public static let GapSpaceConstXs = "4px"
+    /** 8-8-8-8 – Use for fixed gaps between items inside of UI elements */
+    public static let GapSpaceConstSm = "8px"
+    /** 12-12-12-12 – Use for fixed gaps between items inside of UI elements */
+    public static let GapSpaceConstMd = "12px"
+    /** 16-16-16-16 – Use for fixed gaps between items inside of UI elements */
+    public static let GapSpaceConstLg = "16px"
+    /** 24-24-24-24 – Use for fixed gaps between items inside of UI elements */
+    public static let GapSpaceConstXl = "24px"
+    /** 32-32-32-32 – Use for fixed gaps between items inside of UI elements */
+    public static let GapSpaceConst2Xl = "32px"
+    /** 48-48-48-48 – Use for fixed gaps between items inside of UI elements */
+    public static let GapSpaceConst3Xl = "48px"
+
+    // MARK: - Semantic - Size - Constant
+    /** 16-16-16-16 – Use for setting fixed height and width of UI elements */
+    public static let SizeConst3Xs = "16px"
+    /** 24-24-24-24 – Use for setting fixed height and width of UI elements */
+    public static let SizeConst2Xs = "24px"
+    /** 32-32-32-32 – Use for setting fixed height and width of UI elements */
+    public static let SizeConstXs = "32px"
+    /** 40-40-40-40 – Use for setting fixed height and width of UI elements */
+    public static let SizeConstSm = "40px"
+    /** 48-48-48-48 Use for setting fixed height and width of UI elements */
+    public static let SizeConstMd = "48px"
+    /** 56-56-56-56 – Use for setting fixed height and width of UI elements */
+    public static let SizeConstLg = "56px"
+    /** 64-64-64-64 – Use for setting fixed height and width of UI elements */
+    public static let SizeConstXl = "64px"
+    /** 96-96-96-96 – Use for setting fixed height and width of UI elements */
+    public static let SizeConst3Xl = "96px"
+    /** 148-148-148-148 – Use for setting fixed height and width of UI elements */
+    public static let SizeConst4Xl = "148px"
+    /** 72-72-72-72 – Use for setting fixed height and width of UI elements */
+    public static let SizeConst2Xl = "72px"
+    /** 8-8-8-8 – Use for setting fixed height and width of UI elements */
+    public static let SizeConst4Xs = "8px"
+
+    // MARK: - Semantic - Size - Responsive
+    /** 16-16-16-24 – Use for setting height and width of UI elements that scale across breakpoints */
+    public static let SizeResp3Xs = "16px"
+    /** 24-24-32-32 – Use for setting height and width of UI elements that scale across breakpoints */
+    public static let SizeResp2Xs = "24px"
+    /** 32-32-40-48 – Use for setting height and width of UI elements that scale across breakpoints */
+    public static let SizeRespXs = "32px"
+    /** 40-40-48-56 – Use for setting height and width of UI elements that scale across breakpoints */
+    public static let SizeRespSm = "40px"
+    /** 48-48-64-72 – Use for setting height and width of UI elements that scale across breakpoints */
+    public static let SizeRespMd = "48px"
+    /** 56-56-72-92 – Use for setting height and width of UI elements that scale across breakpoints */
+    public static let SizeRespLg = "56px"
+    /** 64-64-80-96 – Use for setting height and width of UI elements that scale across breakpoints */
+    public static let SizeRespXl = "64px"
+    /** 72-72-92-100 – Use for setting height and width of UI elements that scale across breakpoints */
+    public static let SizeResp2Xl = "72px"
+    /** 96-96-120-148 – Use for setting height and width of UI elements that scale across breakpoints */
+    public static let SizeResp3Xl = "96px"
+    /** 148-148-160-180 – Use for setting height and width of UI elements that scale across breakpoints */
+    public static let SizeResp4Xl = "148px"
+    /** 12-12-14-16 – Use for setting height and width of UI elements that scale across breakpoints */
+    public static let SizeResp4Xs = "12px"
+
+
+    // MARK: - ============================================
+    // MARK: - OTHER
+    // MARK: - ============================================
+
+    public static let BreakpointName = "sm"
+
 }