@marioschmidt/design-system-tokens 1.0.23 → 1.0.25

package/dist/flutter/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.dart

@@ -16,10 +16,6 @@ class BreakpointSm390pxCompact {
     // COMPONENT
     // ============================================
 
-    // 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 */
-    static const accordionLabelFontFamily = "Gotham XNarrow";
-
     // Component - Article
     static const aricleMobile1ColGridImageMarginSpace = "0px";
     /** 8 | 8 | 12 | 16 - This space variable is used at the top edge of the article main content bounding box. */
@@ -55,9 +51,124 @@ class BreakpointSm390pxCompact {
     static const articleInfoboxInlineSpace = "16px";
     static const articleInfoboxStackSpace = "16px";
 
-    // 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 */
-    static const audioPlayerFontSize = "16px";
+    // Component - _DSysDocs
+    /** Variable used in spacing parameters of bild.design webpage mockups. move to bild.design group maybe */
+    static const 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 */
+    static const dsMainContainerSpace = "0px";
+    static const 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 */
+    static const 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 */
+    static const 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 */
+    static const dsCaptionStackSpace05x = "4px";
+    static const dsCaptionStackSpace1x = "8px";
+    /** This variable is used only for this design system's component tests. */
+    static const _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 */
+    static const thinBannerVerticalHeightSize = "558px";
+    /** This variable is used only for texts and labels that form part of this design system's documentation. */
+    static const specsFontFamily = "Gotham";
+    /** This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180 */
+    static const docHeaderHeightSize = "144px";
+
+    // Component - Menu
+    static const menuItemSpace = "8px";
+    /** This variable is used on the menu link lane and on the mobile side menu drawer. */
+    static const menuItemFontSize = "15px";
+    static const menuItemUtilFontSize = "12px";
+    static const menuItemUtilStackSpace = "10px";
+    static const menuLinkLaneHeightSize = "48px";
+    static const menuUtillinkItemHeightSize = "48px";
+    static const menuLinkItemInlineSpace = "4px";
+    static const menuLogoDefaultSize = "56px";
+    static const menuLogoScrolledSize = "56px";
+    static const menuSpecialNaviItemHeightSize = "48px";
+    static const subNavBarHeightSize = "42px";
+    static const menuUtilityLinksContainerHeightSize = "56px";
+    static const menuTopStackSpace = "8px";
+    static const menuLeftInlineSpace = "8px";
+    static const menuUtilityLinksGapSpace = "24px";
+    static const menuRightInlineSpace = "0px";
+    static const menuBottomStackSpace = "8px";
+    static const 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 */
+    static const menuShadowVisibility = Color(0x1a000000);
+    /** 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 */
+    static const heyInputShadowVisibility = Color(0x00000000);
+    static const appTopbarTitleFontSize = "12px";
+    static const appTopbarStageTitleHeight = "14px";
+    static const iOsappTopBarHeightSize = "44px";
+    static const iOsappTopBarLeftInlineSpace = "12px";
+    static const iOsappTopBarRightInlineSpace = "16px";
+
+    // Component - Teaser
+    static const teaserTitleInlineLeftSpace = "12px";
+    static const teaserTitleStackSpace = "4px";
+    static const teaserTitleGapSpace = "4px";
+    static const teaserKickerBgInlineSpace = "6px";
+    static const teaserKickerBgStackSpace = "2px";
+    /** This variable is used for creating space around the outside of a subscription badge or video icon badge. */
+    static const teaserBadgesMarginSpace = "8px";
+    /** This token is for controling the height of badges that are inside of teasers. 32 - 32 - 32 - 40 */
+    static const teaserBadgesHeightSizeLg = "32px";
+    static const teaserTitleBottomStackSpace = "12px";
+    static const teaserBadgesHeightSizeSm = "24px";
+    static const teaserLayoutGridSpace = "12px";
+
+    // Component - Teaser - mQTeaser
+    /** XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40 */
+    static const mQteaserHeadlineFontSize = "22px";
+    static const mQteaserHeadlineFontWeight = 600;
+    static const mQteaserHeadlineLineHeight = "22px";
+    static const mqTeaserTitleInlineSpace = "8px";
+
+    // 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 */
+    static const aTeaserKickerFontSize = "16px";
+    /** This variable references the semantic variables headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64 */
+    static const aTeaserHeadlineFontSize = "28px";
+    static const aTeaserKickerLineHeight = "16px";
+    static const aTeaserHeadlineLineHeight = "28px";
+    static const aTeaserTitleInlineSpace = "8px";
+
+    // Component - Teaser - stdTeaser
+    static const stdTeaserImageTitleGapSpace = "4px";
+    /** This variable is used for creating space around the outside of a subscription badge or video icon badge. */
+    static const 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 */
+    static const stdTeaserKickerHeadlineStackSpace = "2px";
+
+    // 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 */
+    static const quadHeadlineFontSize = "48px";
+    static const quadKickerFontSize = "18px";
+    static const quadHeadlineLineHeight = "48px";
+    static const qTeaserTitleInlineSpace = "8px";
+
+    // Component - Teaser - bildPlay
+    static const bildPlayTeaserWidthSize = "145px";
+
+    // Component - Teaser - superA
+    /** 16 - 16 - 16 - 16 */
+    static const superAteaserTitleInlineSpace = "16px";
+
+    // Component - Teaser - bTeaser
+    static const bTeaserTitleInlineSpace = "8px";
+
+    // Component - Table
+    static const tableColumnWidthSize1x = "80px";
+    static const tableColumnWidthSize2x = "140px";
+    static const tableColumnWidthSize05x = "40px";
+    static const tableColumnWidthSize15x = "120px";
+    static const tableColumnWidthSize25x = "180px";
+    static const tableColumnWidthSize075x = "56px";
+    static const tableColumnWidthSize3x = "200px";
+    static const tableItemMaxWidthSize = "224px";
+
+    // Component - Separators
+    static const separatorThicknessSize = "2px";
 
     // Component - Avatar
     /** This variable is used on avatar names in article pages. Bild: 16 - 16 - 16 - 18; SpoBi&Ads: 13 - 13 - 13 - 15 */
@@ -75,37 +186,6 @@ class BreakpointSm390pxCompact {
     /** This variable is used for setting the font of avatars on iOS and Android platforms. This is subject to review. */
     static const appAvatarFontFamily = "Gotham";
 
-    // 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. */
-    static const 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. */
-    static const badgesInnerInlineSpace = "4px";
-    /** 30 - 30 - 30 - 30 - This variable is used on the Advert rectangular badge that is found above an ad containers. */
-    static const adLabelBadgeHeightSize = "30px";
-
-    // 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. */
-    static const breadcrumbFontSize = "15px";
-    static const breadcrumbFontFamily = "Gotham XNarrow";
-    static const breadcrumbArrowLeftInlineSpace1 = "3px";
-    static const breadcrumbArrowRightInlineSpace2 = "5px";
-    static const 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. */
-    static const breadcrumbLineHeight = "15px";
-    static const breadcrumbFontWeight = 700;
-    static const breadcrumbStackSpace = "14px";
-
-    // Component - BreakingNews
-    static const breakingNewsContainerHeightSize = "56px";
-    static const breakingNewsBadgeUpperTitleFontSize = "13px";
-    static const breakingNewsBadgeLowerTitleFontSize = "23px";
-    static const breakingNewsBadgeUpperTitleLineHeight = "13px";
-    static const breakingNewsBadgeLowerTitleLineHeight = "21px";
-    static const breakingNewsBadgeTitelsStackSpace = "0px";
-    static const breakingNewsScrollingTextFontSize = "21px";
-    static const breakingNewsScrollingTextLineHeight = "24px";
-    static const breakingNewsBadgeInlineSpace = "6px";
-
     // Component - Button
     static const buttonLabelFontSize = "15px";
     static const buttonInlineSpace = "16px";
@@ -121,73 +201,26 @@ class BreakpointSm390pxCompact {
     static const buttonStackSpace = "6px";
     static const buttonBorderRadius = "8px";
 
-    // Component - Cards
-    static const searchResultCardImageWidthSize = "216px";
-    static const searchResultCardImageHeightSizeStacked = "189px";
-    static const newstickerImageCardWidthSize = "206px";
-
-    // 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. */
-    static const 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. */
-    static const galleryTeaserAppGapSpace = "0px";
-    static const appEpaperCarouselItemFocusWidth = "182px";
-    static const appEpaperCarouselItemDefaultWidth = "144px";
-    static const appEpaperCarouseBeilageItemWidth = "110px";
-    static const standardTeaserGalleryTeaserWidthWeb = "145px";
-    static const standardTeaserGalleryTeaserWidthApp = "280px";
-
-    // 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 */
-    static const chipsFontSize = "16px";
-    static const chipsInlineSpace = "12px";
-    static const chipsStackSpace = "8px";
-
-    // Component - Datepicker
-    static const datepickerItemDayWidthSize = "44px";
-    static const datepickerItemHeightSize = "44px";
-    static const datepickerItemYearWidthSize = "77px";
-
-    // Component - Drawers
-    static const mobileMenuDrawerStackSpace = "20px";
-    static const mobileMenuDrawerLeftInlineSpace = "20px";
-    static const mobileMenuDrawerRightInlineSpace = "16px";
-    static const mobileMenuDrawerMaxWidthSize = "400px";
-
-    // Component - Dropdown
-    static const dropDownBorderRadius = "4px";
-    static const dropDownItemStackSpace = "8px";
-    static const dropDownItemInlineSpace = "12px";
-
-    // 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. */
-    static const footerFontSize = "11px";
-    static const footerLineHeight = "14px";
-    static const footerFontFamily = "Gotham XNarrow";
-    static const footerFontSizeUserOfferPages = "18px";
-    static const footerLineHeightUserOfferPages = "26px";
-
-    // Component - Icon
-    static const iconSize = "24px";
-    static const iconSizeEmbeddMedia = "40px";
-
-    // Component - InfoElement
-    static const infoElementTeaserBadgeHeightSize = "16px";
-    static const infoElementTeaserImageHeightSize = "80px";
-    static const infoElementTeaserImageWidthSize = "80px";
-    static const infoElementTeaserBadgeMarginSpace = "4px";
-
-    // Component - Inputfield
-    static const inputFieldStackSpace = "6px";
-    static const inputFieldInlineSpace = "16px";
-    static const 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 */
-    static const inputFieldFontSize = "16px";
-    static const inputFieldImessageInlineSpace = "16px";
-    static const inputFieldHeightSize = "36px";
-    static const heyInputContainerInlineSpace = "8px";
-    static const inputFieldMessageGapSpace = "4px";
-    static const inputFieldFontFamily = "Gotham XNarrow";
+    // Component - Newsticker
+    /** similar to kicker3 values - 16 - 16 - 16 - 18 */
+    static const newsTickerTimeFontSize = "16px";
+    static const newsTickerTimeFontWeight = 700;
+    static const newsTickerTimeFontFamily = "Gotham XNarrow";
+    /** 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. */
+    static const newsTickerTimeLineHeight = "20.799999237060547px";
+    static const newsTickerContentStackSpace = "4px";
+    static const newsTickerKickerInnerStackSpace = "2px";
+    static const newsTickerTitlesInlineSpace = "18px";
+    static const newsTickerBadgesInlineSpace = "8px";
+    static const newsTickerTimeKickerStackSpace = "4px";
+    static const newsTickerEntriesStackSpace = "22px";
+    static const newsTickerKickerInnerInlineSpace = "4px";
+    static const newsTickerSkeletonBottomSpace = "64px";
+    static const newsTickerRedDotSize = "12px";
+    static const newsTickerEntriesLeftInlineSpace = "22px";
+    static const newsTickerLineInlineSpace = "6px";
+    static const newsTickerAppCardHeightSize = "116px";
+    static const newsTickerAppCardWidthSize = "250px";
 
     // Component - Liveticker
     static const liveTickerheadlineFontWeight = 600;
@@ -201,68 +234,22 @@ class BreakpointSm390pxCompact {
     static const liveTickerAppCardHeightSize = "96px";
     static const liveTickerAppCardWidthSize = "250px";
 
-    // Component - Mediaplayer
-    static const podcastPlayButtonSize = "48px";
-    static const vidPlayerBottomBarGapSpace = "0px";
-    static const audioPlayerHeaderStackSpace = "56px";
-    static const videoTimeBadgeFontFamily = "Gotham XNarrow";
-    static const vidPlayerControlButtonSize = "42px";
-    static const vidPlayerControlButtonIconSizeHover = "28px";
-    static const vidPlayerTimecodeFontSize = "14px";
-    static const vidPlayerTimecodeContainerMinWidthSize = "45px";
-    static const vidPlayerProgressBarContainerHeightSize = "24px";
-    static const vidPlayerUnmuteButtonWidthSize = "220px";
-
-    // Component - Menu
-    static const menuItemSpace = "8px";
-    /** This variable is used on the menu link lane and on the mobile side menu drawer. */
-    static const menuItemFontSize = "15px";
-    static const menuItemUtilFontSize = "12px";
-    static const menuItemUtilStackSpace = "10px";
-    static const menuLinkLaneHeightSize = "48px";
-    static const menuUtillinkItemHeightSize = "48px";
-    static const menuLinkItemInlineSpace = "4px";
-    static const menuLogoDefaultSize = "56px";
-    static const menuLogoScrolledSize = "56px";
-    static const menuSpecialNaviItemHeightSize = "48px";
-    static const subNavBarHeightSize = "42px";
-    static const menuUtilityLinksContainerHeightSize = "56px";
-    static const menuTopStackSpace = "8px";
-    static const menuLeftInlineSpace = "8px";
-    static const menuUtilityLinksGapSpace = "24px";
-    static const menuRightInlineSpace = "0px";
-    static const menuBottomStackSpace = "8px";
-    static const 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 */
-    static const menuShadowVisibility = Color(0x1a000000);
-    /** 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 */
-    static const heyInputShadowVisibility = Color(0x00000000);
-    static const appTopbarTitleFontSize = "12px";
-    static const appTopbarStageTitleHeight = "14px";
-    static const iOsappTopBarHeightSize = "44px";
-    static const iOsappTopBarLeftInlineSpace = "12px";
-    static const iOsappTopBarRightInlineSpace = "16px";
-
-    // Component - Newsticker
-    /** similar to kicker3 values - 16 - 16 - 16 - 18 */
-    static const newsTickerTimeFontSize = "16px";
-    static const newsTickerTimeFontWeight = 700;
-    static const newsTickerTimeFontFamily = "Gotham XNarrow";
-    /** 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. */
-    static const newsTickerTimeLineHeight = "20.799999237060547px";
-    static const newsTickerContentStackSpace = "4px";
-    static const newsTickerKickerInnerStackSpace = "2px";
-    static const newsTickerTitlesInlineSpace = "18px";
-    static const newsTickerBadgesInlineSpace = "8px";
-    static const newsTickerTimeKickerStackSpace = "4px";
-    static const newsTickerEntriesStackSpace = "22px";
-    static const newsTickerKickerInnerInlineSpace = "4px";
-    static const newsTickerSkeletonBottomSpace = "64px";
-    static const newsTickerRedDotSize = "12px";
-    static const newsTickerEntriesLeftInlineSpace = "22px";
-    static const newsTickerLineInlineSpace = "6px";
-    static const newsTickerAppCardHeightSize = "116px";
-    static const newsTickerAppCardWidthSize = "250px";
+    // 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. */
+    static const 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. */
+    static const 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. */
+    static const videoTimeBadgeSize = "24px";
+    static const videoRedPlayIconWidthSize = "8px";
+    /** This variable is used for changing the red play icon inside the white square. */
+    static const videoRedPlayIconHeightSize = "10px";
+    static const videoBadgeTimeLineHeight = "21px";
+    static const videoSkeletonContainerHeight = "180px";
+    static const videoFrameInlineSpace = "0px";
+    static const verticalVideoMockHeadlineFontSize = "22px";
+    /** 14 - 14 - 16 - 16 -- This variable is used in the videoAdBadge font size parameter. */
+    static const videoAdBadgeFontSize = "14px";
 
     // Component - Pagination
     static const galleryPaginationItemHeightSize = "4px";
@@ -273,29 +260,46 @@ class BreakpointSm390pxCompact {
     static const galleryPaginationContainerAppInlineSpace = "12px";
     static const scrollBarThicknessSize = "8px";
 
-    // Component - Paywall
-    static const paywallContainerGapSpace = "-48px";
-    static const paywallHeaderBottomStackSpace = "80px";
-    static const paywallCardMaxWidthSize = "346px";
-    /** This variable is used on the paywall card price tag. 64 constant */
-    static const paywallCardPriceTagFontSize = "64px";
-    static const paywallCardPriceTagLineHeight = "64px";
-    static const paywallCardPriceNoteLineHeight = "40px";
-    /** This variable is used on the paywall card text under the price tag. 40 - 40 - 40 - 40 */
-    static const paywallCardPriceNoteFontSize = "40px";
+    // Component - Dropdown
+    static const dropDownBorderRadius = "4px";
+    static const dropDownItemStackSpace = "8px";
+    static const dropDownItemInlineSpace = "12px";
 
-    // Component - Quotes
-    static const quoteContainerInlineSpace = "16px";
-    static const quoteContainerStackSpace = "16px";
-    static const quoteQuotationMarksFontSize = "28px";
-    static const quoteContentGapSpace = "16px";
+    // Component - Inputfield
+    static const inputFieldStackSpace = "6px";
+    static const inputFieldInlineSpace = "16px";
+    static const 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 */
+    static const inputFieldFontSize = "16px";
+    static const inputFieldImessageInlineSpace = "16px";
+    static const inputFieldHeightSize = "36px";
+    static const heyInputContainerInlineSpace = "8px";
+    static const inputFieldMessageGapSpace = "4px";
+    static const inputFieldFontFamily = "Gotham XNarrow";
 
-    // Component - RadioButtons
-    static const radioSelectorSize = "20px";
-    static const radioSelectorDotActiveSize = "12px";
+    // 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. */
+    static const breadcrumbFontSize = "15px";
+    static const breadcrumbFontFamily = "Gotham XNarrow";
+    static const breadcrumbArrowLeftInlineSpace1 = "3px";
+    static const breadcrumbArrowRightInlineSpace2 = "5px";
+    static const 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. */
+    static const breadcrumbLineHeight = "15px";
+    static const breadcrumbFontWeight = 700;
+    static const breadcrumbStackSpace = "14px";
 
-    // Component - Search
-    static const searchResultBadgeHeightSize = "18px";
+    // Component - Icon
+    static const iconSize = "24px";
+    static const iconSizeEmbeddMedia = "40px";
+
+    // 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. */
+    static const 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. */
+    static const badgesInnerInlineSpace = "4px";
+    /** 30 - 30 - 30 - 30 - This variable is used on the Advert rectangular badge that is found above an ad containers. */
+    static const adLabelBadgeHeightSize = "30px";
 
     // Component - SectionTitle
     static const sectionTitleInnerStackBottomSpace = "12px";
@@ -305,8 +309,25 @@ 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. */
     static const sectionTitleArrowInlineSpaceActive = "5px";
 
-    // Component - Separators
-    static const separatorThicknessSize = "2px";
+    // 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 */
+    static const audioPlayerFontSize = "16px";
+
+    // Component - SpecialNavi
+    static const specialNaviInlineSpace = "24px";
+
+    // 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 */
+    static const chipsFontSize = "16px";
+    static const chipsInlineSpace = "12px";
+    static const chipsStackSpace = "8px";
+
+    // Component - Search
+    static const searchResultBadgeHeightSize = "18px";
+
+    // Component - RadioButtons
+    static const radioSelectorSize = "20px";
+    static const radioSelectorDotActiveSize = "12px";
 
     // Component - Skeletons
     static const headlinesSkeletonImagePlaceholderMaxWidth = "282px";
@@ -314,29 +335,39 @@ class BreakpointSm390pxCompact {
     static const articleSkeletonTextInlineSpace = "0px";
     static const articleTextSkeletonHeightSize = "270px";
 
-    // Component - Sliders
-    static const sliderProgressBarIdleHeightSize = "4px";
-    static const sliderProgressBarHoverHeightSize = "8px";
-    static const sliderProgressInactiveHeightSize = "2px";
-    static const vidPlayerProgressBarHeightSize = "12px";
-
-    // Component - SpecialNavi
-    static const specialNaviInlineSpace = "24px";
-
     // Component - Spinners
     static const videoSpinnerSize = "40px";
     static const videoSpinnerStrokeSize = "2px";
     static const videoSpinnerSize05x = "20px";
 
-    // Component - Table
-    static const tableColumnWidthSize1x = "80px";
-    static const tableColumnWidthSize2x = "140px";
-    static const tableColumnWidthSize05x = "40px";
-    static const tableColumnWidthSize15x = "120px";
-    static const tableColumnWidthSize25x = "180px";
-    static const tableColumnWidthSize075x = "56px";
-    static const tableColumnWidthSize3x = "200px";
-    static const tableItemMaxWidthSize = "224px";
+    // Component - BreakingNews
+    static const breakingNewsContainerHeightSize = "56px";
+    static const breakingNewsBadgeUpperTitleFontSize = "13px";
+    static const breakingNewsBadgeLowerTitleFontSize = "23px";
+    static const breakingNewsBadgeUpperTitleLineHeight = "13px";
+    static const breakingNewsBadgeLowerTitleLineHeight = "21px";
+    static const breakingNewsBadgeTitelsStackSpace = "0px";
+    static const breakingNewsScrollingTextFontSize = "21px";
+    static const breakingNewsScrollingTextLineHeight = "24px";
+    static const breakingNewsBadgeInlineSpace = "6px";
+
+    // Component - InfoElement
+    static const infoElementTeaserBadgeHeightSize = "16px";
+    static const infoElementTeaserImageHeightSize = "80px";
+    static const infoElementTeaserImageWidthSize = "80px";
+    static const infoElementTeaserBadgeMarginSpace = "4px";
+
+    // Component - Mediaplayer
+    static const podcastPlayButtonSize = "48px";
+    static const vidPlayerBottomBarGapSpace = "0px";
+    static const audioPlayerHeaderStackSpace = "56px";
+    static const videoTimeBadgeFontFamily = "Gotham XNarrow";
+    static const vidPlayerControlButtonSize = "42px";
+    static const vidPlayerControlButtonIconSizeHover = "28px";
+    static const vidPlayerTimecodeFontSize = "14px";
+    static const vidPlayerTimecodeContainerMinWidthSize = "45px";
+    static const vidPlayerProgressBarContainerHeightSize = "24px";
+    static const vidPlayerUnmuteButtonWidthSize = "220px";
 
     // 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. */
@@ -351,59 +382,57 @@ class BreakpointSm390pxCompact {
     static const appsTabsLabelLineHeight = "14.399999618530273px";
     static const topBarTabItemHeightSize = "44px";
 
-    // Component - Teaser
-    static const teaserTitleInlineLeftSpace = "12px";
-    static const teaserTitleStackSpace = "4px";
-    static const teaserTitleGapSpace = "4px";
-    static const teaserKickerBgInlineSpace = "6px";
-    static const teaserKickerBgStackSpace = "2px";
-    /** This variable is used for creating space around the outside of a subscription badge or video icon badge. */
-    static const teaserBadgesMarginSpace = "8px";
-    /** This token is for controling the height of badges that are inside of teasers. 32 - 32 - 32 - 40 */
-    static const teaserBadgesHeightSizeLg = "32px";
-    static const teaserTitleBottomStackSpace = "12px";
-    static const teaserBadgesHeightSizeSm = "24px";
-    static const teaserLayoutGridSpace = "12px";
-
-    // 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 */
-    static const aTeaserKickerFontSize = "16px";
-    /** This variable references the semantic variables headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64 */
-    static const aTeaserHeadlineFontSize = "28px";
-    static const aTeaserKickerLineHeight = "16px";
-    static const aTeaserHeadlineLineHeight = "28px";
-    static const aTeaserTitleInlineSpace = "8px";
+    // Component - Drawers
+    static const mobileMenuDrawerStackSpace = "20px";
+    static const mobileMenuDrawerLeftInlineSpace = "20px";
+    static const mobileMenuDrawerRightInlineSpace = "16px";
+    static const mobileMenuDrawerMaxWidthSize = "400px";
 
-    // Component - Teaser - bTeaser
-    static const bTeaserTitleInlineSpace = "8px";
+    // Component - Quotes
+    static const quoteContainerInlineSpace = "16px";
+    static const quoteContainerStackSpace = "16px";
+    static const quoteQuotationMarksFontSize = "28px";
+    static const quoteContentGapSpace = "16px";
 
-    // Component - Teaser - bildPlay
-    static const bildPlayTeaserWidthSize = "145px";
+    // 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. */
+    static const 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. */
+    static const galleryTeaserAppGapSpace = "0px";
+    static const appEpaperCarouselItemFocusWidth = "182px";
+    static const appEpaperCarouselItemDefaultWidth = "144px";
+    static const appEpaperCarouseBeilageItemWidth = "110px";
+    static const standardTeaserGalleryTeaserWidthWeb = "145px";
+    static const standardTeaserGalleryTeaserWidthApp = "280px";
 
-    // Component - Teaser - mQTeaser
-    /** XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40 */
-    static const mQteaserHeadlineFontSize = "22px";
-    static const mQteaserHeadlineFontWeight = 600;
-    static const mQteaserHeadlineLineHeight = "22px";
-    static const mqTeaserTitleInlineSpace = "8px";
+    // Component - Sliders
+    static const sliderProgressBarIdleHeightSize = "4px";
+    static const sliderProgressBarHoverHeightSize = "8px";
+    static const sliderProgressInactiveHeightSize = "2px";
+    static const vidPlayerProgressBarHeightSize = "12px";
 
-    // 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 */
-    static const quadHeadlineFontSize = "48px";
-    static const quadKickerFontSize = "18px";
-    static const quadHeadlineLineHeight = "48px";
-    static const qTeaserTitleInlineSpace = "8px";
+    // 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. */
+    static const footerFontSize = "11px";
+    static const footerLineHeight = "14px";
+    static const footerFontFamily = "Gotham XNarrow";
+    static const footerFontSizeUserOfferPages = "18px";
+    static const footerLineHeightUserOfferPages = "26px";
 
-    // Component - Teaser - stdTeaser
-    static const stdTeaserImageTitleGapSpace = "4px";
-    /** This variable is used for creating space around the outside of a subscription badge or video icon badge. */
-    static const 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 */
-    static const stdTeaserKickerHeadlineStackSpace = "2px";
+    // 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 */
+    static const accordionLabelFontFamily = "Gotham XNarrow";
 
-    // Component - Teaser - superA
-    /** 16 - 16 - 16 - 16 */
-    static const superAteaserTitleInlineSpace = "16px";
+    // Component - Paywall
+    static const paywallContainerGapSpace = "-48px";
+    static const paywallHeaderBottomStackSpace = "80px";
+    static const paywallCardMaxWidthSize = "346px";
+    /** This variable is used on the paywall card price tag. 64 constant */
+    static const paywallCardPriceTagFontSize = "64px";
+    static const paywallCardPriceTagLineHeight = "64px";
+    static const paywallCardPriceNoteLineHeight = "40px";
+    /** This variable is used on the paywall card text under the price tag. 40 - 40 - 40 - 40 */
+    static const paywallCardPriceNoteFontSize = "40px";
 
     // Component - ToggleSwitch
     /** This variable is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18 */
@@ -411,305 +440,86 @@ 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 */
     static const appToggleItemLabelLineHeight = "14.100000381469727px";
 
-    // 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. */
-    static const 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. */
-    static const 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. */
-    static const videoTimeBadgeSize = "24px";
-    static const videoRedPlayIconWidthSize = "8px";
-    /** This variable is used for changing the red play icon inside the white square. */
-    static const videoRedPlayIconHeightSize = "10px";
-    static const videoBadgeTimeLineHeight = "21px";
-    static const videoSkeletonContainerHeight = "180px";
-    static const videoFrameInlineSpace = "0px";
-    static const verticalVideoMockHeadlineFontSize = "22px";
-    /** 14 - 14 - 16 - 16 -- This variable is used in the videoAdBadge font size parameter. */
-    static const videoAdBadgeFontSize = "14px";
-
-    // Component - _DSysDocs
-    /** Variable used in spacing parameters of bild.design webpage mockups. move to bild.design group maybe */
-    static const 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 */
-    static const dsMainContainerSpace = "0px";
-    static const 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 */
-    static const 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 */
-    static const 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 */
-    static const dsCaptionStackSpace05x = "4px";
-    static const dsCaptionStackSpace1x = "8px";
-    /** This variable is used only for this design system's component tests. */
-    static const _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 */
-    static const thinBannerVerticalHeightSize = "558px";
-    /** This variable is used only for texts and labels that form part of this design system's documentation. */
-    static const specsFontFamily = "Gotham";
-    /** This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180 */
-    static const docHeaderHeightSize = "144px";
-
-
-    // ============================================
-    // OTHER
-    // ============================================
-
-    static const breakpointName = "sm";
-
-
-    // ============================================
-    // SEMANTIC
-    // ============================================
-
-    // Semantic - Border - BorderRadius
-    /** 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges. */
-    static const borderRadiusXs = "2px";
-    /** 8-8-8-8 – Standard radius for buttons, chips, input fields, and medium-sized interactive elements. */
-    static const borderRadiusMd = "8px";
-    /** 4-4-4-4 – use for corner rounding on compact components like checkboxes or small input controls. */
-    static const borderRadiusSm = "4px";
-    /** 24-24-24-24 – use for corner rounding on larger cards, overlays, dialogs, and other container components. */
-    static const borderRadiusXl = "24px";
-    /** 16-16-16-16 – use for corner rounding on small cards, overlays, and modal surfaces. */
-    static const borderRadiusLg = "16px";
-    /** 0-0-0-0 – no corner rounding. Used as default for flat layouts, content modules, images, and teaser elements. */
-    static const borderRadiusNone = "0px";
-    /** creates fully rounded shapes, typically used for circular elements like avatars. */
-    static const borderRadiusFull = "9999px";
-
-    // Semantic - Border - BorderWidth
-    /** 1-1-1-1 – use for subtle outlines and dividers */
-    static const borderWidthThin = "1px";
-    /** 2-2-2-2 – use for stronger outlines on form elements (inputs), buttons (outline variants), and interaction states (focus, hover, active) */
-    static const 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. */
-    static const borderWidthHairline = "0.33000001311302185px";
-
-    // 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. */
-    static const canvasHeightSizeWeb = "844px";
-    /** Common viewport width size based on the selected breakpoint.
-Apply this token to the main frame of page layouts. */
-    static const canvasWidthSizeWeb = "390px";
-    /** Common viewport width size based on the selected breakpoint.
-Apply this token to the main frame of page layouts. */
-    static const 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. */
-    static const canvasHeightSizeApp = "844px";
-
-    // 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. */
-    static const 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. */
-    static const breakpointMaxWidthSize = "599px";
-
-    // 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. */
-    static const contentMaxWidthMedium = "700px";
-    /** Use for content containers that should fill the full width of the page */
-    static const contentMaxWidthFull = "1024px";
-
-    // Semantic - Layout - Grid - Constant
-    /** 16-16-16-16 – use for fixed side paddings and gutters */
-    static const gridSpaceConstLg = "16px";
-    /** 12-12-12-12 – use for fixed side paddings and gutters */
-    static const gridSpaceConstSm = "12px";
-
-    // Semantic - Layout - Grid - LayoutGuide
-    /** Used to set the column count in Figma Layout guide Grids */
-    static const layoutGuideGridColums = "4px";
-
-    // Semantic - Layout - Grid - Responsive
-    /** 24-24-32-32 – use for side paddings and gutters in responsive layouts */
-    static const gridSpaceRespLg = "24px";
-    /** 48-48-64-64 – use for side paddings and gutters in responsive layouts */
-    static const gridSpaceRespXl = "48px";
-    /** 12-12-12-16 – use for side paddings and gutters in responsive layouts */
-    static const gridSpaceRespBase = "12px";
-    /** 6-6-6-8 – use for side paddings and gutters in responsive layouts */
-    static const 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. */
-    static const pageInlineSpace = "0px";
-
-    // Semantic - Layout - Section
-    /** 36-36-48-48 – Use for vertical spacing between sections in a layout. */
-    static const sectionSpaceBase = "36px";
-    /** 72-72-96-96 – Use for vertical spacing between sections in a layout */
-    static const sectionSpaceLg = "72px";
-    /** 16-16-32-32 – Use for spacing after paragraphs in text content */
-    static const paragraphEndSpace = "16px";
-    /** 24-24-36-36 – Use for vertical spacing between subsections in a layout */
-    static const sectionSpaceSm = "24px";
-
-    // Semantic - Size - Constant
-    /** 16-16-16-16 – Use for setting fixed height and width of UI elements */
-    static const sizeConst3Xs = "16px";
-    /** 24-24-24-24 – Use for setting fixed height and width of UI elements */
-    static const sizeConst2Xs = "24px";
-    /** 32-32-32-32 – Use for setting fixed height and width of UI elements */
-    static const sizeConstXs = "32px";
-    /** 40-40-40-40 – Use for setting fixed height and width of UI elements */
-    static const sizeConstSm = "40px";
-    /** 48-48-48-48 Use for setting fixed height and width of UI elements */
-    static const sizeConstMd = "48px";
-    /** 56-56-56-56 – Use for setting fixed height and width of UI elements */
-    static const sizeConstLg = "56px";
-    /** 64-64-64-64 – Use for setting fixed height and width of UI elements */
-    static const sizeConstXl = "64px";
-    /** 96-96-96-96 – Use for setting fixed height and width of UI elements */
-    static const sizeConst3Xl = "96px";
-    /** 148-148-148-148 – Use for setting fixed height and width of UI elements */
-    static const sizeConst4Xl = "148px";
-    /** 72-72-72-72 – Use for setting fixed height and width of UI elements */
-    static const sizeConst2Xl = "72px";
-    /** 8-8-8-8 – Use for setting fixed height and width of UI elements */
-    static const sizeConst4Xs = "8px";
-
-    // Semantic - Size - Responsive
-    /** 16-16-16-24 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeResp3Xs = "16px";
-    /** 24-24-32-32 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeResp2Xs = "24px";
-    /** 32-32-40-48 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeRespXs = "32px";
-    /** 40-40-48-56 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeRespSm = "40px";
-    /** 48-48-64-72 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeRespMd = "48px";
-    /** 56-56-72-92 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeRespLg = "56px";
-    /** 64-64-80-96 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeRespXl = "64px";
-    /** 72-72-92-100 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeResp2Xl = "72px";
-    /** 96-96-120-148 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeResp3Xl = "96px";
-    /** 148-148-160-180 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeResp4Xl = "148px";
-    /** 12-12-14-16 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeResp4Xs = "12px";
-
-    // Semantic - Space - Gap - Constant
-    /** 2-2-2-2 – Use for fixed gaps between items inside of UI elements */
-    static const gapSpaceConst2Xs = "2px";
-    /** 4-4-4-4 – Use for fixed gaps between items inside of UI elements */
-    static const gapSpaceConstXs = "4px";
-    /** 8-8-8-8 – Use for fixed gaps between items inside of UI elements */
-    static const gapSpaceConstSm = "8px";
-    /** 12-12-12-12 – Use for fixed gaps between items inside of UI elements */
-    static const gapSpaceConstMd = "12px";
-    /** 16-16-16-16 – Use for fixed gaps between items inside of UI elements */
-    static const gapSpaceConstLg = "16px";
-    /** 24-24-24-24 – Use for fixed gaps between items inside of UI elements */
-    static const gapSpaceConstXl = "24px";
-    /** 32-32-32-32 – Use for fixed gaps between items inside of UI elements */
-    static const gapSpaceConst2Xl = "32px";
-    /** 48-48-48-48 – Use for fixed gaps between items inside of UI elements */
-    static const gapSpaceConst3Xl = "48px";
-
-    // Semantic - Space - Gap - Responsive
-    /** 4-4-6-8 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    static const gapSpaceRespXs = "4px";
-    /** 16-16-24-32 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    static const gapSpaceRespLg = "16px";
-    /** 24-24-32-48 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    static const gapSpaceRespXl = "24px";
-    /** 32-32-48-64 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    static const gapSpaceResp2Xl = "32px";
-    /** 12-12-16-24 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    static const gapSpaceRespMd = "12px";
-    /** 8-8-12-16 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    static const gapSpaceRespSm = "8px";
-    /** 2-2-4-6 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    static const gapSpaceResp2Xs = "2px";
-    /** 48-48-72-96 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    static const gapSpaceResp3Xl = "48px";
+    // Component - Cards
+    static const searchResultCardImageWidthSize = "216px";
+    static const searchResultCardImageHeightSizeStacked = "189px";
+    static const newstickerImageCardWidthSize = "206px";
 
-    // Semantic - Space - Inline - Constant
-    /** 8-8-8-8 – Use for fixed horizontal (left/right) padding of UI elements */
-    static const inlineSpaceConstSm = "8px";
-    /** 12-12-12-12 – Use for fixed horizontal (left/right) padding of UI elements */
-    static const inlineSpaceConstMd = "12px";
-    /** 16-16-16-16 – Use for fixed horizontal (left/right) padding of UI elements */
-    static const inlineSpaceConstLg = "16px";
-    /** 32-32-32-32 – Use for fixed horizontal (left/right) padding of UI elements */
-    static const inlineSpaceConst2Xl = "32px";
-    /** 24-24-24-24 – Use for fixed horizontal (left/right) padding of UI elements */
-    static const inlineSpaceConstXl = "24px";
-    /** 6-6-6-6 – Use for fixed horizontal (left/right) padding of UI elements */
-    static const inlineSpaceConstXs = "6px";
-    /** 2-2-2-2 – Use for fixed horizontal (left/right) padding of UI elements */
-    static const inlineSpaceConst3Xs = "2px";
-    /** 4-4-4-4 – Use for fixed horizontal (left/right) padding of UI elements */
-    static const inlineSpaceConst2Xs = "4px";
+    // Component - Datepicker
+    static const datepickerItemDayWidthSize = "44px";
+    static const datepickerItemHeightSize = "44px";
+    static const datepickerItemYearWidthSize = "77px";
 
-    // Semantic - Space - Inline - Responsive
-    /** 8-8-12-16 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-    static const inlineSpaceRespSm = "8px";
-    /** 12-12-16-24 use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-    static const inlineSpaceRespMd = "12px";
-    /** 16-16-24-32 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-    static const inlineSpaceRespLg = "16px";
-    /** 32-32-48-64 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-    static const inlineSpaceResp2Xl = "32px";
-    /** 24-24-32-40 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-    static const inlineSpaceRespXl = "24px";
 
-    // Semantic - Space - Stack - Constant
-    /** 8-8-8-8 – Use for fixed vertical (top/bottom) padding of UI elements */
-    static const stackSpaceConstSm = "8px";
-    /** 12-12-12-12 – Use for fixed vertical (top/bottom) padding of UI elements */
-    static const stackSpaceConstMd = "12px";
-    /** 16-16-16-16 – Use for fixed vertical (top/bottom) padding of UI elements */
-    static const stackSpaceConstLg = "16px";
-    /** 32-32-32-32 – Use for fixed vertical (top/bottom) padding of UI elements */
-    static const stackSpaceConst2Xl = "32px";
-    /** 24-24-24-24 – Use for fixed vertical (top/bottom) padding of UI elements */
-    static const stackSpaceConstXl = "24px";
-    /** 6-6-6-6 – Use for fixed vertical (top/bottom) padding of UI elements */
-    static const stackSpaceConstXs = "6px";
-    /** 2-2-2-2 – Use for fixed vertical (top/bottom) padding of UI elements */
-    static const stackSpaceConst3Xs = "2px";
-    /** 4-4-4-4 – Use for fixed vertical (top/bottom) padding of UI elements */
-    static const stackSpaceConst2Xs = "4px";
+    // ============================================
+    // SEMANTIC
+    // ============================================
 
-    // Semantic - Space - Stack - Responsive
-    /** 12-12-16-24 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-    static const stackSpaceRespMd = "12px";
-    /** 16-16-24-32 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-    static const stackSpaceRespLg = "16px";
-    /** 32-32-48-64 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-    static const stackSpaceResp2Xl = "32px";
-    /** 8-8-12-16 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-    static const stackSpaceRespSm = "8px";
-    /** 24-24-32-40 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-    static const stackSpaceRespXl = "24px";
+    // Semantic - Layout - Grid - Responsive
+    /** 24-24-32-32 – use for side paddings and gutters in responsive layouts */
+    static const gridSpaceRespLg = "24px";
+    /** 48-48-64-64 – use for side paddings and gutters in responsive layouts */
+    static const gridSpaceRespXl = "48px";
+    /** 12-12-12-16 – use for side paddings and gutters in responsive layouts */
+    static const gridSpaceRespBase = "12px";
+    /** 6-6-6-8 – use for side paddings and gutters in responsive layouts */
+    static const 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. */
+    static const pageInlineSpace = "0px";
 
-    // Semantic - Typography - FontFamily
-    /** This variable references the bodyFontFamily variable from the branding collection. */
-    static const bodyFontFamily = "Gotham XNarrow";
-    static const calloutFontFamily = "Gotham";
-    static const headlineFontFamily = "Gotham Condensed";
-    static const footnoteFontFamily = "Gotham XNarrow";
-    static const labelFontFamily = "Gotham XNarrow";
-    static const kickerFontFamily = "Gotham XNarrow";
-    static const subheadlineFontFamily = "Gotham Condensed";
-    static const titleFontFamily = "Gotham";
-    static const quoteFontFamily = "Gotham";
-    static const displayFontFamily = "Gotham";
+    // Semantic - Layout - Grid - Constant
+    /** 16-16-16-16 – use for fixed side paddings and gutters */
+    static const gridSpaceConstLg = "16px";
+    /** 12-12-12-12 – use for fixed side paddings and gutters */
+    static const gridSpaceConstSm = "12px";
 
-    // Semantic - Typography - FontSize - Body
-    /** This variable is used on the body text style's font size parameter. It remains constant at 21. */
-    static const bodyFontSize = "21px";
+    // Semantic - Layout - Grid - LayoutGuide
+    /** Used to set the column count in Figma Layout guide Grids */
+    static const layoutGuideGridColums = "4px";
 
-    // Semantic - Typography - FontSize - Callout
-    /** This token is used for the font size parameter of the callout text style. 18 - 18 - 22 - 22 */
-    static const callout1FontSize = "18px";
+    // Semantic - Layout - Section
+    /** 36-36-48-48 – Use for vertical spacing between sections in a layout. */
+    static const sectionSpaceBase = "36px";
+    /** 72-72-96-96 – Use for vertical spacing between sections in a layout */
+    static const sectionSpaceLg = "72px";
+    /** 16-16-32-32 – Use for spacing after paragraphs in text content */
+    static const paragraphEndSpace = "16px";
+    /** 24-24-36-36 – Use for vertical spacing between subsections in a layout */
+    static const sectionSpaceSm = "24px";
+
+    // 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. */
+    static const 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. */
+    static const breakpointMaxWidthSize = "599px";
+
+    // 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. */
+    static const canvasHeightSizeWeb = "844px";
+    /** Common viewport width size based on the selected breakpoint.
+Apply this token to the main frame of page layouts. */
+    static const canvasWidthSizeWeb = "390px";
+    /** Common viewport width size based on the selected breakpoint.
+Apply this token to the main frame of page layouts. */
+    static const 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. */
+    static const canvasHeightSizeApp = "844px";
+
+    // 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. */
+    static const contentMaxWidthMedium = "700px";
+    /** Use for content containers that should fill the full width of the page */
+    static const contentMaxWidthFull = "1024px";
+
+    // Semantic - Typography - FontSize - Title
+    /** 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
+    static const title1FontSize = "22px";
+    /** 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
+    static const title2FontSize = "16px";
 
     // Semantic - Typography - FontSize - Display
     /** This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120 */
@@ -719,12 +529,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 */
     static const display3FontSize = "28px";
 
-    // Semantic - Typography - FontSize - Footnote
-    /** This token is used on the footnote text style font size parameter. 16 - 16 - 16 - 18 */
-    static const footnote1FontSize = "16px";
-    /** This token is used in the font size parameter of the footnote2 text style. 12 - 12 - 12 - 16 */
-    static const footnote2FontSize = "12px";
-
     // Semantic - Typography - FontSize - Headline
     /** This token is used for the headline1 text style's font size parameter. 48 - 48 - 72 - 100 */
     static const headline1FontSize = "48px";
@@ -735,15 +539,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 */
     static const headline4FontSize = "22px";
 
-    // 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. */
-    static const kicker1FontSize = "18px";
-    /** 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 */
-    static const kicker2FontSize = "18px";
-    /** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 16 - 16 - 18 - 20 */
-    static const kicker3FontSize = "16px";
-    /** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 14 - 14 - 16 - 16 */
-    static const kicker4FontSize = "14px";
+    // Semantic - Typography - FontSize - Body
+    /** This variable is used on the body text style's font size parameter. It remains constant at 21. */
+    static const bodyFontSize = "21px";
 
     // 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. */
@@ -757,33 +555,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. */
     static const label4FontSize = "8px";
 
-    // Semantic - Typography - FontSize - Quote
-    /** 16 - 16 - 18 - 20 -- This variable is used for controlling the font size of the quote text style. */
-    static const quoteFontSize = "16px";
+    // Semantic - Typography - FontSize - Callout
+    /** This token is used for the font size parameter of the callout text style. 18 - 18 - 22 - 22 */
+    static const callout1FontSize = "18px";
+
+    // Semantic - Typography - FontSize - Footnote
+    /** This token is used on the footnote text style font size parameter. 16 - 16 - 16 - 18 */
+    static const footnote1FontSize = "16px";
+    /** This token is used in the font size parameter of the footnote2 text style. 12 - 12 - 12 - 16 */
+    static const footnote2FontSize = "12px";
+
+    // 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. */
+    static const kicker1FontSize = "18px";
+    /** 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 */
+    static const kicker2FontSize = "18px";
+    /** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 16 - 16 - 18 - 20 */
+    static const kicker3FontSize = "16px";
+    /** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 14 - 14 - 16 - 16 */
+    static const kicker4FontSize = "14px";
 
     // Semantic - Typography - FontSize - Subheadline
     /** This token controls the subheadline1 font size parameter. 24 - 24 - 32 - 36 */
     static const subheadline1FontSize = "24px";
 
-    // Semantic - Typography - FontSize - Title
-    /** 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
-    static const title1FontSize = "22px";
-    /** 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
-    static const title2FontSize = "16px";
+    // Semantic - Typography - FontSize - Quote
+    /** 16 - 16 - 18 - 20 -- This variable is used for controlling the font size of the quote text style. */
+    static const quoteFontSize = "16px";
 
-    // Semantic - Typography - FontWeight - Body
-    static const bodyFontWeightBook = 400;
-    static const bodyFontWeightBold = 700;
+    // Semantic - Typography - FontFamily
+    /** This variable references the bodyFontFamily variable from the branding collection. */
+    static const bodyFontFamily = "Gotham XNarrow";
+    static const calloutFontFamily = "Gotham";
+    static const headlineFontFamily = "Gotham Condensed";
+    static const footnoteFontFamily = "Gotham XNarrow";
+    static const labelFontFamily = "Gotham XNarrow";
+    static const kickerFontFamily = "Gotham XNarrow";
+    static const subheadlineFontFamily = "Gotham Condensed";
+    static const titleFontFamily = "Gotham";
+    static const quoteFontFamily = "Gotham";
+    static const displayFontFamily = "Gotham";
 
     // Semantic - Typography - FontWeight - Callout
     static const calloutFontWeight = 800;
 
-    // Semantic - Typography - FontWeight - Display
-    static const displayFontWeight = 800;
+    // Semantic - Typography - FontWeight - Label
+    static const labelFontWeightBold = 700;
+    static const labelFontWeightBook = 400;
 
-    // Semantic - Typography - FontWeight - Footnote
-    static const footnoteFontWeightBook = 400;
-    static const footnoteFontWeightBold = 700;
+    // Semantic - Typography - FontWeight - Body
+    static const bodyFontWeightBook = 400;
+    static const bodyFontWeightBold = 700;
+
+    // Semantic - Typography - FontWeight - Kicker
+    static const kickerFontWeight = 700;
+    static const kickerFontWeightSt = "700";
+
+    // Semantic - Typography - FontWeight - Subheadline
+    static const subheadlineFontWeight = 700;
 
     // Semantic - Typography - FontWeight - Headline
     static const headline1FontWeight = 700;
@@ -793,22 +622,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. */
     static const headline1FontWeightSt = "700";
 
-    // Semantic - Typography - FontWeight - Kicker
-    static const kickerFontWeight = 700;
-    static const kickerFontWeightSt = "700";
+    // Semantic - Typography - FontWeight - Title
+    static const titleFontWeight = 800;
+
+    // Semantic - Typography - FontWeight - Display
+    static const displayFontWeight = 800;
+
+    // Semantic - Typography - FontWeight - Quote
+    static const quoteFontWeight = 800;
+
+    // Semantic - Typography - FontWeight - Footnote
+    static const footnoteFontWeightBook = 400;
+    static const footnoteFontWeightBold = 700;
+
+    // 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) */
+    static const bodyLineHeight = "28px";
+
+    // Semantic - Typography - LineHeight - Kicker
+    static const kicker4LineHeight = "15.399999618530273px";
+    static const kicker3LineHeight = "17.600000381469727px";
+    static const kicker2LineHeight = "19.799999237060547px";
+    static const kicker1LineHeight = "19.799999237060547px";
+
+    // Semantic - Typography - LineHeight - Label
+    static const 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. */
+    static const label1LineHeight = "17px";
+    static const label1ResponsiveLineHeight = "10px";
+    static const label2LineHeight = "16px";
+    static const label4LineHeight = "10px";
+
+    // Semantic - Typography - LineHeight - Display
+    static const display1LineHeight = "40px";
+    static const display2LineHeight = "36px";
+    static const display3LineHeight = "28px";
 
-    // Semantic - Typography - FontWeight - Label
-    static const labelFontWeightBold = 700;
-    static const labelFontWeightBook = 400;
+    // Semantic - Typography - LineHeight - Title
+    static const title1LineHeight = "22px";
+    /** html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
+    static const title2LineHeight = "17.600000381469727px";
 
-    // Semantic - Typography - FontWeight - Quote
-    static const quoteFontWeight = 800;
+    // Semantic - Typography - LineHeight - Quote
+    /** This variable is used in the quote text style line height parameter. */
+    static const quoteLineHeight = "16px";
 
-    // Semantic - Typography - FontWeight - Subheadline
-    static const subheadlineFontWeight = 700;
+    // Semantic - Typography - LineHeight - Footnote
+    static const footnote1LineHeight = "21px";
+    static const footnote2LineHeight = "15.600000381469727px";
 
-    // Semantic - Typography - FontWeight - Title
-    static const titleFontWeight = 800;
+    // Semantic - Typography - LineHeight - Headline
+    static const headline1LineHeight = "48px";
+    static const headline2LineHeight = "40px";
+    static const headline3LineHeight = "28px";
+    static const headline4LineHeight = "22px";
+
+    // Semantic - Typography - LineHeight - Callout
+    static const calloutLineHeight = "18px";
+
+    // Semantic - Typography - LineHeight - Subheadline
+    static const subheadline1LineHeight = "24px";
 
     // 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. */
@@ -838,53 +711,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. */
     static const display3LetterSpacing = "-0.5px";
 
-    // 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) */
-    static const bodyLineHeight = "28px";
-
-    // Semantic - Typography - LineHeight - Callout
-    static const calloutLineHeight = "18px";
-
-    // Semantic - Typography - LineHeight - Display
-    static const display1LineHeight = "40px";
-    static const display2LineHeight = "36px";
-    static const display3LineHeight = "28px";
-
-    // Semantic - Typography - LineHeight - Footnote
-    static const footnote1LineHeight = "21px";
-    static const footnote2LineHeight = "15.600000381469727px";
-
-    // Semantic - Typography - LineHeight - Headline
-    static const headline1LineHeight = "48px";
-    static const headline2LineHeight = "40px";
-    static const headline3LineHeight = "28px";
-    static const headline4LineHeight = "22px";
-
-    // Semantic - Typography - LineHeight - Kicker
-    static const kicker4LineHeight = "15.399999618530273px";
-    static const kicker3LineHeight = "17.600000381469727px";
-    static const kicker2LineHeight = "19.799999237060547px";
-    static const kicker1LineHeight = "19.799999237060547px";
-
-    // Semantic - Typography - LineHeight - Label
-    static const 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. */
-    static const label1LineHeight = "17px";
-    static const label1ResponsiveLineHeight = "10px";
-    static const label2LineHeight = "16px";
-    static const label4LineHeight = "10px";
-
-    // Semantic - Typography - LineHeight - Quote
-    /** This variable is used in the quote text style line height parameter. */
-    static const quoteLineHeight = "16px";
-
-    // Semantic - Typography - LineHeight - Subheadline
-    static const subheadline1LineHeight = "24px";
+    // Semantic - Border - BorderRadius
+    /** 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges. */
+    static const borderRadiusXs = "2px";
+    /** 8-8-8-8 – Standard radius for buttons, chips, input fields, and medium-sized interactive elements. */
+    static const borderRadiusMd = "8px";
+    /** 4-4-4-4 – use for corner rounding on compact components like checkboxes or small input controls. */
+    static const borderRadiusSm = "4px";
+    /** 24-24-24-24 – use for corner rounding on larger cards, overlays, dialogs, and other container components. */
+    static const borderRadiusXl = "24px";
+    /** 16-16-16-16 – use for corner rounding on small cards, overlays, and modal surfaces. */
+    static const borderRadiusLg = "16px";
+    /** 0-0-0-0 – no corner rounding. Used as default for flat layouts, content modules, images, and teaser elements. */
+    static const borderRadiusNone = "0px";
+    /** creates fully rounded shapes, typically used for circular elements like avatars. */
+    static const borderRadiusFull = "9999px";
 
-    // Semantic - Typography - LineHeight - Title
-    static const title1LineHeight = "22px";
-    /** html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
-    static const title2LineHeight = "17.600000381469727px";
+    // Semantic - Border - BorderWidth
+    /** 1-1-1-1 – use for subtle outlines and dividers */
+    static const borderWidthThin = "1px";
+    /** 2-2-2-2 – use for stronger outlines on form elements (inputs), buttons (outline variants), and interaction states (focus, hover, active) */
+    static const 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. */
+    static const borderWidthHairline = "0.33000001311302185px";
 
     // Semantic - Visibility - Boolean
     /** Use for showing elements on mobile viewport sizes only */
@@ -909,4 +758,155 @@ Apply this token to the main frame of page layouts to simulate realistic maximum
     static const bpSpecificWeb = "xs/sm";
     static const bpSpecificApp = "compact";
 
+    // Semantic - Space - Inline - Responsive
+    /** 8-8-12-16 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
+    static const inlineSpaceRespSm = "8px";
+    /** 12-12-16-24 use for horizontal (left/right) padding of UI elements that scales across breakpoints */
+    static const inlineSpaceRespMd = "12px";
+    /** 16-16-24-32 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
+    static const inlineSpaceRespLg = "16px";
+    /** 32-32-48-64 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
+    static const inlineSpaceResp2Xl = "32px";
+    /** 24-24-32-40 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
+    static const inlineSpaceRespXl = "24px";
+
+    // Semantic - Space - Inline - Constant
+    /** 8-8-8-8 – Use for fixed horizontal (left/right) padding of UI elements */
+    static const inlineSpaceConstSm = "8px";
+    /** 12-12-12-12 – Use for fixed horizontal (left/right) padding of UI elements */
+    static const inlineSpaceConstMd = "12px";
+    /** 16-16-16-16 – Use for fixed horizontal (left/right) padding of UI elements */
+    static const inlineSpaceConstLg = "16px";
+    /** 32-32-32-32 – Use for fixed horizontal (left/right) padding of UI elements */
+    static const inlineSpaceConst2Xl = "32px";
+    /** 24-24-24-24 – Use for fixed horizontal (left/right) padding of UI elements */
+    static const inlineSpaceConstXl = "24px";
+    /** 6-6-6-6 – Use for fixed horizontal (left/right) padding of UI elements */
+    static const inlineSpaceConstXs = "6px";
+    /** 2-2-2-2 – Use for fixed horizontal (left/right) padding of UI elements */
+    static const inlineSpaceConst3Xs = "2px";
+    /** 4-4-4-4 – Use for fixed horizontal (left/right) padding of UI elements */
+    static const inlineSpaceConst2Xs = "4px";
+
+    // Semantic - Space - Stack - Responsive
+    /** 12-12-16-24 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
+    static const stackSpaceRespMd = "12px";
+    /** 16-16-24-32 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
+    static const stackSpaceRespLg = "16px";
+    /** 32-32-48-64 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
+    static const stackSpaceResp2Xl = "32px";
+    /** 8-8-12-16 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
+    static const stackSpaceRespSm = "8px";
+    /** 24-24-32-40 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
+    static const stackSpaceRespXl = "24px";
+
+    // Semantic - Space - Stack - Constant
+    /** 8-8-8-8 – Use for fixed vertical (top/bottom) padding of UI elements */
+    static const stackSpaceConstSm = "8px";
+    /** 12-12-12-12 – Use for fixed vertical (top/bottom) padding of UI elements */
+    static const stackSpaceConstMd = "12px";
+    /** 16-16-16-16 – Use for fixed vertical (top/bottom) padding of UI elements */
+    static const stackSpaceConstLg = "16px";
+    /** 32-32-32-32 – Use for fixed vertical (top/bottom) padding of UI elements */
+    static const stackSpaceConst2Xl = "32px";
+    /** 24-24-24-24 – Use for fixed vertical (top/bottom) padding of UI elements */
+    static const stackSpaceConstXl = "24px";
+    /** 6-6-6-6 – Use for fixed vertical (top/bottom) padding of UI elements */
+    static const stackSpaceConstXs = "6px";
+    /** 2-2-2-2 – Use for fixed vertical (top/bottom) padding of UI elements */
+    static const stackSpaceConst3Xs = "2px";
+    /** 4-4-4-4 – Use for fixed vertical (top/bottom) padding of UI elements */
+    static const stackSpaceConst2Xs = "4px";
+
+    // Semantic - Space - Gap - Responsive
+    /** 4-4-6-8 – Use for gaps between items inside of UI elements that scale across breakpoints */
+    static const gapSpaceRespXs = "4px";
+    /** 16-16-24-32 – Use for gaps between items inside of UI elements that scale across breakpoints */
+    static const gapSpaceRespLg = "16px";
+    /** 24-24-32-48 – Use for gaps between items inside of UI elements that scale across breakpoints */
+    static const gapSpaceRespXl = "24px";
+    /** 32-32-48-64 – Use for gaps between items inside of UI elements that scale across breakpoints */
+    static const gapSpaceResp2Xl = "32px";
+    /** 12-12-16-24 – Use for gaps between items inside of UI elements that scale across breakpoints */
+    static const gapSpaceRespMd = "12px";
+    /** 8-8-12-16 – Use for gaps between items inside of UI elements that scale across breakpoints */
+    static const gapSpaceRespSm = "8px";
+    /** 2-2-4-6 – Use for gaps between items inside of UI elements that scale across breakpoints */
+    static const gapSpaceResp2Xs = "2px";
+    /** 48-48-72-96 – Use for gaps between items inside of UI elements that scale across breakpoints */
+    static const gapSpaceResp3Xl = "48px";
+
+    // Semantic - Space - Gap - Constant
+    /** 2-2-2-2 – Use for fixed gaps between items inside of UI elements */
+    static const gapSpaceConst2Xs = "2px";
+    /** 4-4-4-4 – Use for fixed gaps between items inside of UI elements */
+    static const gapSpaceConstXs = "4px";
+    /** 8-8-8-8 – Use for fixed gaps between items inside of UI elements */
+    static const gapSpaceConstSm = "8px";
+    /** 12-12-12-12 – Use for fixed gaps between items inside of UI elements */
+    static const gapSpaceConstMd = "12px";
+    /** 16-16-16-16 – Use for fixed gaps between items inside of UI elements */
+    static const gapSpaceConstLg = "16px";
+    /** 24-24-24-24 – Use for fixed gaps between items inside of UI elements */
+    static const gapSpaceConstXl = "24px";
+    /** 32-32-32-32 – Use for fixed gaps between items inside of UI elements */
+    static const gapSpaceConst2Xl = "32px";
+    /** 48-48-48-48 – Use for fixed gaps between items inside of UI elements */
+    static const gapSpaceConst3Xl = "48px";
+
+    // Semantic - Size - Constant
+    /** 16-16-16-16 – Use for setting fixed height and width of UI elements */
+    static const sizeConst3Xs = "16px";
+    /** 24-24-24-24 – Use for setting fixed height and width of UI elements */
+    static const sizeConst2Xs = "24px";
+    /** 32-32-32-32 – Use for setting fixed height and width of UI elements */
+    static const sizeConstXs = "32px";
+    /** 40-40-40-40 – Use for setting fixed height and width of UI elements */
+    static const sizeConstSm = "40px";
+    /** 48-48-48-48 Use for setting fixed height and width of UI elements */
+    static const sizeConstMd = "48px";
+    /** 56-56-56-56 – Use for setting fixed height and width of UI elements */
+    static const sizeConstLg = "56px";
+    /** 64-64-64-64 – Use for setting fixed height and width of UI elements */
+    static const sizeConstXl = "64px";
+    /** 96-96-96-96 – Use for setting fixed height and width of UI elements */
+    static const sizeConst3Xl = "96px";
+    /** 148-148-148-148 – Use for setting fixed height and width of UI elements */
+    static const sizeConst4Xl = "148px";
+    /** 72-72-72-72 – Use for setting fixed height and width of UI elements */
+    static const sizeConst2Xl = "72px";
+    /** 8-8-8-8 – Use for setting fixed height and width of UI elements */
+    static const sizeConst4Xs = "8px";
+
+    // Semantic - Size - Responsive
+    /** 16-16-16-24 – Use for setting height and width of UI elements that scale across breakpoints */
+    static const sizeResp3Xs = "16px";
+    /** 24-24-32-32 – Use for setting height and width of UI elements that scale across breakpoints */
+    static const sizeResp2Xs = "24px";
+    /** 32-32-40-48 – Use for setting height and width of UI elements that scale across breakpoints */
+    static const sizeRespXs = "32px";
+    /** 40-40-48-56 – Use for setting height and width of UI elements that scale across breakpoints */
+    static const sizeRespSm = "40px";
+    /** 48-48-64-72 – Use for setting height and width of UI elements that scale across breakpoints */
+    static const sizeRespMd = "48px";
+    /** 56-56-72-92 – Use for setting height and width of UI elements that scale across breakpoints */
+    static const sizeRespLg = "56px";
+    /** 64-64-80-96 – Use for setting height and width of UI elements that scale across breakpoints */
+    static const sizeRespXl = "64px";
+    /** 72-72-92-100 – Use for setting height and width of UI elements that scale across breakpoints */
+    static const sizeResp2Xl = "72px";
+    /** 96-96-120-148 – Use for setting height and width of UI elements that scale across breakpoints */
+    static const sizeResp3Xl = "96px";
+    /** 148-148-160-180 – Use for setting height and width of UI elements that scale across breakpoints */
+    static const sizeResp4Xl = "148px";
+    /** 12-12-14-16 – Use for setting height and width of UI elements that scale across breakpoints */
+    static const sizeResp4Xs = "12px";
+
+
+    // ============================================
+    // OTHER
+    // ============================================
+
+    static const breakpointName = "sm";
+
 }