@marioschmidt/design-system-tokens 1.0.23 → 1.0.25

package/dist/js/brands/bild/semantic/breakpoints/breakpoint-md-600px.js

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