@marioschmidt/design-system-tokens 1.0.23 → 1.0.24

package/dist/ios/brands/bild/sizeclass-regular/Typography.swift

@@ -10,43 +10,151 @@ import UIKit
 extension UIFont {
     struct TypographyBildregular {
         // MARK: - ============================================
-        // MARK: - .DSDOCSSTYLES
+        // MARK: - DISPLAY
         // MARK: - ============================================
 
-        static let .pageheaderdescription = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 16, weight: .bold)
-        /** This text style is only used on the design system's documentation for code syntax snippets. */
-        static let .codesnippets = UIFont(name: "Source Code Pro", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
-        /** This text style is only used for mockup pages of the design system website. */
-        static let .bilddesignsidemenu = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
-        /** This text style is only used for mockup pages of the design system website. */
-        static let .bilddesignsidemenuactive = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
-        /** This text style is only used for mockup pages of the design system website. */
-        static let .bilddesignsidemenuhover = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.semibold) ?? UIFont.systemFont(ofSize: 16, weight: .semibold)
-        /** This text style is only used for mockups the vertical video component teaser headlines. */
-        static let .verticalvideosmockheadlines = UIFont(name: "Gotham Condensed", size: 32)?.withWeight(.semibold) ?? UIFont.systemFont(ofSize: 32, weight: .semibold)
-        /** This text style is used on documentation pages that contain some token information. */
-        static let .tokenspecl = UIFont(name: "Source Code Pro", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
+        /** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 40 - 40 - 72 - 120 */
+        static let display1 = UIFont(name: "Gotham", size: 120)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 120, weight: .heavy)
+        /** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 36 - 36 - 42 - 64 */
+        static let display2 = UIFont(name: "Gotham", size: 64)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 64, weight: .heavy)
+        /** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 28 - 28 - 32 - 40 */
+        static let display3 = UIFont(name: "Gotham", size: 40)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 40, weight: .heavy)
 
         // MARK: - ============================================
-        // MARK: - .SPECS
+        // MARK: - HEADLINE
         // MARK: - ============================================
 
-        /** This text style is only used for audit pages of the design system. */
-        static let .specsxs = UIFont(name: "Gotham", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
-        /** This text style is only used for audit pages of the design system. */
-        static let .specss = UIFont(name: "Gotham", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
-        /** This text style is only used for audit pages of the design system. */
-        static let .specsms = UIFont(name: "Gotham", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
-        /** This text style is only used for audit pages of the design system. */
-        static let .specsm = UIFont(name: "Gotham", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
-        /** This text style is only used for audit pages of the design system. */
-        static let .specsml = UIFont(name: "Gotham", size: 64)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 64, weight: .light)
-        /** This text style is only used for audit pages of the design system. */
-        static let .specsl = UIFont(name: "Gotham", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
-        /** This text style is only used for audit pages of the design system. */
-        static let .specsxl = UIFont(name: "Gotham", size: 16)?.withWeight(.semibold) ?? UIFont.systemFont(ofSize: 16, weight: .semibold)
-        /** This text style is only used for audit pages of the design system. */
-        static let .specsxxl = UIFont(name: "Gotham", size: 16)?.withWeight(.semibold) ?? UIFont.systemFont(ofSize: 16, weight: .semibold)
+        /** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. Font size: 48 - 48 - 72 - 100 */
+        static let headline1 = UIFont(name: "Gotham Condensed", size: 100)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 100, weight: .light)
+        /** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. This text style's token for the font size parameter changes across device sizes as follows: 40 - 40 - 48 - 64 */
+        static let headline2 = UIFont(name: "Gotham Condensed", size: 64)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 64, weight: .light)
+        /** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. This text style's font size parameter is controlled by the headline3FontSize token: 28 - 28 - 36 - 40 */
+        static let headline3 = UIFont(name: "Gotham Condensed", size: 40)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 40, weight: .light)
+        /** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. Font size: 22 - 22 - 26 - 32 */
+        static let headline4 = UIFont(name: "Gotham Condensed", size: 32)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 32, weight: .light)
+
+        // MARK: - ============================================
+        // MARK: - SUBHEADLINE
+        // MARK: - ============================================
+
+        /** This Subheadlines text style is used in articles. They are placed under the headline at the top of an article. Subheadlines can appear in some teasers also. Font size: 24 - 24 - 32 - 36 */
+        static let subheadline1 = UIFont(name: "Gotham Condensed", size: 36)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 36, weight: .bold)
+
+        // MARK: - ============================================
+        // MARK: - KICKER
+        // MARK: - ============================================
+
+        /** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 18 - 18 - 22 - 30 --//*//-- currently css uses kicker0 for the naming of this text style and sequence of font size changes */
+        static let kicker1 = UIFont(name: "Gotham XNarrow", size: 30)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 30, weight: .light)
+        /** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 18 - 18 - 22 - 24 --//*//-- currently css uses kicker1 for the naming of this text style and sequence of font size changes */
+        static let kicker2 = UIFont(name: "Gotham XNarrow", size: 24)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 24, weight: .light)
+        /** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 16 - 16 - 18 - 20 --//*//-- currently css uses kicker2 for the naming of this text style and sequence of font size changes */
+        static let kicker3 = UIFont(name: "Gotham XNarrow", size: 20)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 20, weight: .light)
+        /** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 14 - 14 - 16 - 16 --//*//-- currently css uses kicker3 for the naming of this text style and sequence of font size changes */
+        static let kicker4 = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
+
+        // MARK: - ============================================
+        // MARK: - TITLE
+        // MARK: - ============================================
+
+        /** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. Font size: 22 - 22 - 22 - 28 */
+        static let title1 = UIFont(name: "Gotham", size: 28)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 28, weight: .heavy)
+        /** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. Font size: 22 - 22 - 22 - 28 */
+        static let title1uppercase = UIFont(name: "Gotham", size: 28)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 28, weight: .heavy)
+        /** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. 
+
+In the previous system, this style was named Caption. For greater clarity and consistency, it has been renamed to title2. Font size: 16 - 16 - 18 - 20 */
+        static let title2 = UIFont(name: "Gotham", size: 20)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 20, weight: .heavy)
+        /** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. 
+
+In the previous system, this style was named Caption. For greater clarity and consistency, it has been renamed to title2. Font size: 16 - 16 - 18 - 20 */
+        static let title2uppercase = UIFont(name: "Gotham", size: 20)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 20, weight: .heavy)
+
+        // MARK: - ============================================
+        // MARK: - CALLOUT
+        // MARK: - ============================================
+
+        /** Callouts highlight key information, quotes, or important notes inside content. They stand apart from body text to draw attention. There is overlap between this text style and the title text styles. Font size: 18 - 18 - 22 - 22 */
+        static let callout = UIFont(name: "Gotham", size: 22)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 22, weight: .heavy)
+
+        // MARK: - ============================================
+        // MARK: - BODY
+        // MARK: - ============================================
+
+        /** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
+        static let body = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 21, weight: .light)
+        /** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
+        static let bodyitalic = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 21, weight: .light)
+        /** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
+        static let bodybold = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 21, weight: .bold)
+        /** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
+        static let bodybolditalic = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 21, weight: .light)
+
+        // MARK: - ============================================
+        // MARK: - TEXTLINK
+        // MARK: - ============================================
+
+        /** Use this text style for styling elements that are clickable text links inside body texts. This style is often found in article texts. Font size remains constant at 21 across device sizes. */
+        static let textlink = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 21, weight: .light)
+        /** Use this text style for styling elements that are clickable text links inside body texts that are using the italic style. This style is often found in article texts that need to show contrast for publications titles, specific words or names. Font size remains constant at 21 across device sizes. */
+        static let textlinkitalic = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 21, weight: .light)
+        /** Use this text style for styling elements that are clickable text links inside emphasized body texts that are using the bold or html strong style. This style is often found in article texts that need to show contrast for specific words or names. Font size remains constant at 21 across device sizes. */
+        static let textlinkbold = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 21, weight: .bold)
+        /** Use this style for body text links or other text links that are in active state. Font size remains constant at 21 across device sizes. */
+        static let textlinkhover = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 21, weight: .light)
+        /** Use this style for body text links or other text links that are in active state. Font size remains constant at 21 across device sizes. */
+        static let textlinkboldhover = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 21, weight: .bold)
+
+        // MARK: - ============================================
+        // MARK: - FOOTNOTE
+        // MARK: - ============================================
+
+        /** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This specific style is commonly used on small two lines of text that are seen on standard teasers. The font size of this text style is similar to the label text style. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 16 - 16 - 16 - 18 */
+        static let footnote1 = UIFont(name: "Gotham XNarrow", size: 18)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 18, weight: .light)
+        /** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. 16 - 16 - 16 - 18 */
+        static let footnote1bold = UIFont(name: "Gotham XNarrow", size: 18)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 18, weight: .bold)
+        /** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 12 - 12 - 12 - 16 */
+        static let footnote2 = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
+        /** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 12 - 12 - 12 - 16 */
+        static let footnote2bold = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 16, weight: .bold)
+
+        // MARK: - ============================================
+        // MARK: - LABEL
+        // MARK: - ============================================
+
+        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
+        static let label1 = UIFont(name: "Gotham XNarrow", size: 17)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 17, weight: .light)
+        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
+        static let label1bold = UIFont(name: "Gotham XNarrow", size: 17)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 17, weight: .bold)
+        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size changes across device sizes: 10 - 10 - 15 - 17 */
+        static let label1boldresp = UIFont(name: "Gotham XNarrow", size: 17)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 17, weight: .bold)
+        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
+        static let label1uppercasebold = UIFont(name: "Gotham XNarrow", size: 17)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 17, weight: .bold)
+        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
+        static let label2 = UIFont(name: "Gotham XNarrow", size: 15)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 15, weight: .light)
+        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
+        static let label2uppercase = UIFont(name: "Gotham XNarrow", size: 15)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 15, weight: .light)
+        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
+        static let label2bold = UIFont(name: "Gotham XNarrow", size: 15)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 15, weight: .bold)
+        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This style used on special navi component simiiar to link lane menu items. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. The font size value remains constant at 15 across device sizes. */
+        static let label2uppercasebold = UIFont(name: "Gotham XNarrow", size: 15)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 15, weight: .bold)
+        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
+        static let label3 = UIFont(name: "Gotham XNarrow", size: 12)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 12, weight: .light)
+        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. Current online CSS .nav_btn--type-list & .nav_btn__text // --nav-btn */
+        static let label3uppercase = UIFont(name: "Gotham XNarrow", size: 12)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 12, weight: .light)
+        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
+        static let label3bold = UIFont(name: "Gotham XNarrow", size: 12)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 12, weight: .bold)
+        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
+        static let label3uppercasebold = UIFont(name: "Gotham XNarrow", size: 12)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 12, weight: .bold)
+        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 8. */
+        static let label4 = UIFont(name: "Gotham XNarrow", size: 8)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 8, weight: .light)
+
+        // MARK: - ============================================
+        // MARK: - QUOTE
+        // MARK: - ============================================
+
+        /** Use this text style for sections of text that are inside a fieldset with a quotation given by a person in an interview or a section of text from a larger body of text that need to be emphasized. */
+        static let quote = UIFont(name: "Gotham", size: 20)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 20, weight: .heavy)
 
         // MARK: - ============================================
         // MARK: - ACCORDION
@@ -70,15 +178,6 @@ extension UIFont {
         /** Use this text style for time and day text string that commonly shows up along with the article authors avatars. Font size: 12 - 12 - 14 - 16 */
         static let articletimestamp = UIFont(name: "Gotham", size: 16)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 16, weight: .heavy)
 
-        // MARK: - ============================================
-        // MARK: - ATEASER
-        // MARK: - ============================================
-
-        /** 16 - 16 - 22 - 24 | This text style currently uses two different semantic styles within it, the kicker3 for XS & S, and kicker2 for MD & LG */
-        static let ateaserkicker = UIFont(name: "Gotham XNarrow", size: 24)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 24, weight: .light)
-        /** This text style references the semantic text styles headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64 */
-        static let ateaserheadline = UIFont(name: "Gotham Condensed", size: 64)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 64, weight: .light)
-
         // MARK: - ============================================
         // MARK: - AUDIOPLAYER
         // MARK: - ============================================
@@ -112,19 +211,6 @@ extension UIFont {
         /** This text style is used on horizontal video badges that contain either the video's total duration or a live status identifier. Font size: 16 - 16 - 18 - 18 */
         static let videotimebadge = UIFont(name: "Gotham XNarrow", size: 18)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 18, weight: .light)
 
-        // MARK: - ============================================
-        // MARK: - BODY
-        // MARK: - ============================================
-
-        /** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
-        static let body = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 21, weight: .light)
-        /** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
-        static let bodyitalic = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 21, weight: .light)
-        /** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
-        static let bodybold = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 21, weight: .bold)
-        /** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
-        static let bodybolditalic = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 21, weight: .light)
-
         // MARK: - ============================================
         // MARK: - BREADCRUMB
         // MARK: - ============================================
@@ -156,13 +242,6 @@ extension UIFont {
         /** This text style is used on buttons that are commonly used inside of a container for advertizers and partners. This text is used in buttons that open links to external content.  Font size: 16 - 16 - 16 - 18 */
         static let partnerlinkbuttonlabel = UIFont(name: "Gotham XNarrow", size: 18)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 18, weight: .light)
 
-        // MARK: - ============================================
-        // MARK: - CALLOUT
-        // MARK: - ============================================
-
-        /** Callouts highlight key information, quotes, or important notes inside content. They stand apart from body text to draw attention. There is overlap between this text style and the title text styles. Font size: 18 - 18 - 22 - 22 */
-        static let callout = UIFont(name: "Gotham", size: 22)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 22, weight: .heavy)
-
         // MARK: - ============================================
         // MARK: - CHIPS
         // MARK: - ============================================
@@ -170,17 +249,6 @@ extension UIFont {
         /** This text style is used on the chips component. They are commonly used for filtering parameters. font size: 16 - 16 - 16 - 18 */
         static let chipslabel = UIFont(name: "Gotham XNarrow", size: 18)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 18, weight: .bold)
 
-        // MARK: - ============================================
-        // MARK: - DISPLAY
-        // MARK: - ============================================
-
-        /** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 40 - 40 - 72 - 120 */
-        static let display1 = UIFont(name: "Gotham", size: 120)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 120, weight: .heavy)
-        /** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 36 - 36 - 42 - 64 */
-        static let display2 = UIFont(name: "Gotham", size: 64)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 64, weight: .heavy)
-        /** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 28 - 28 - 32 - 40 */
-        static let display3 = UIFont(name: "Gotham", size: 40)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 40, weight: .heavy)
-
         // MARK: - ============================================
         // MARK: - FOOTER
         // MARK: - ============================================
@@ -194,32 +262,6 @@ extension UIFont {
         /** User data and offer pages use this text style on footer links. Font size remains constant at 18px. */
         static let footerlinkuser&offerpages = UIFont(name: "Gotham XNarrow", size: 18)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 18, weight: .light)
 
-        // MARK: - ============================================
-        // MARK: - FOOTNOTE
-        // MARK: - ============================================
-
-        /** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This specific style is commonly used on small two lines of text that are seen on standard teasers. The font size of this text style is similar to the label text style. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 16 - 16 - 16 - 18 */
-        static let footnote1 = UIFont(name: "Gotham XNarrow", size: 18)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 18, weight: .light)
-        /** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. 16 - 16 - 16 - 18 */
-        static let footnote1bold = UIFont(name: "Gotham XNarrow", size: 18)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 18, weight: .bold)
-        /** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 12 - 12 - 12 - 16 */
-        static let footnote2 = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
-        /** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 12 - 12 - 12 - 16 */
-        static let footnote2bold = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 16, weight: .bold)
-
-        // MARK: - ============================================
-        // MARK: - HEADLINE
-        // MARK: - ============================================
-
-        /** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. Font size: 48 - 48 - 72 - 100 */
-        static let headline1 = UIFont(name: "Gotham Condensed", size: 100)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 100, weight: .light)
-        /** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. This text style's token for the font size parameter changes across device sizes as follows: 40 - 40 - 48 - 64 */
-        static let headline2 = UIFont(name: "Gotham Condensed", size: 64)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 64, weight: .light)
-        /** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. This text style's font size parameter is controlled by the headline3FontSize token: 28 - 28 - 36 - 40 */
-        static let headline3 = UIFont(name: "Gotham Condensed", size: 40)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 40, weight: .light)
-        /** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. Font size: 22 - 22 - 26 - 32 */
-        static let headline4 = UIFont(name: "Gotham Condensed", size: 32)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 32, weight: .light)
-
         // MARK: - ============================================
         // MARK: - INPUTFIELD
         // MARK: - ============================================
@@ -227,50 +269,6 @@ extension UIFont {
         /** This text style is used in dropdowns and other text input fields such as date inputs, search input fields and other inputs for text found in forms for example. Font size references a variable from the density collection. 15 - 17 - 19 */
         static let textinputfieldlabel = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
 
-        // MARK: - ============================================
-        // MARK: - KICKER
-        // MARK: - ============================================
-
-        /** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 18 - 18 - 22 - 30 --//*//-- currently css uses kicker0 for the naming of this text style and sequence of font size changes */
-        static let kicker1 = UIFont(name: "Gotham XNarrow", size: 30)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 30, weight: .light)
-        /** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 18 - 18 - 22 - 24 --//*//-- currently css uses kicker1 for the naming of this text style and sequence of font size changes */
-        static let kicker2 = UIFont(name: "Gotham XNarrow", size: 24)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 24, weight: .light)
-        /** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 16 - 16 - 18 - 20 --//*//-- currently css uses kicker2 for the naming of this text style and sequence of font size changes */
-        static let kicker3 = UIFont(name: "Gotham XNarrow", size: 20)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 20, weight: .light)
-        /** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 14 - 14 - 16 - 16 --//*//-- currently css uses kicker3 for the naming of this text style and sequence of font size changes */
-        static let kicker4 = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
-
-        // MARK: - ============================================
-        // MARK: - LABEL
-        // MARK: - ============================================
-
-        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
-        static let label1 = UIFont(name: "Gotham XNarrow", size: 17)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 17, weight: .light)
-        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
-        static let label1bold = UIFont(name: "Gotham XNarrow", size: 17)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 17, weight: .bold)
-        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size changes across device sizes: 10 - 10 - 15 - 17 */
-        static let label1boldresp = UIFont(name: "Gotham XNarrow", size: 17)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 17, weight: .bold)
-        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
-        static let label1uppercasebold = UIFont(name: "Gotham XNarrow", size: 17)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 17, weight: .bold)
-        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
-        static let label2 = UIFont(name: "Gotham XNarrow", size: 15)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 15, weight: .light)
-        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
-        static let label2uppercase = UIFont(name: "Gotham XNarrow", size: 15)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 15, weight: .light)
-        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
-        static let label2bold = UIFont(name: "Gotham XNarrow", size: 15)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 15, weight: .bold)
-        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This style used on special navi component simiiar to link lane menu items. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. The font size value remains constant at 15 across device sizes. */
-        static let label2uppercasebold = UIFont(name: "Gotham XNarrow", size: 15)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 15, weight: .bold)
-        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
-        static let label3 = UIFont(name: "Gotham XNarrow", size: 12)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 12, weight: .light)
-        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. Current online CSS .nav_btn--type-list & .nav_btn__text // --nav-btn */
-        static let label3uppercase = UIFont(name: "Gotham XNarrow", size: 12)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 12, weight: .light)
-        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
-        static let label3bold = UIFont(name: "Gotham XNarrow", size: 12)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 12, weight: .bold)
-        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
-        static let label3uppercasebold = UIFont(name: "Gotham XNarrow", size: 12)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 12, weight: .bold)
-        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 8. */
-        static let label4 = UIFont(name: "Gotham XNarrow", size: 8)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 8, weight: .light)
-
         // MARK: - ============================================
         // MARK: - LIVETICKER
         // MARK: - ============================================
@@ -304,16 +302,6 @@ extension UIFont {
         /** Use this tokenized font style for menu items with icons that are more important than the menu link lane items. Current online CSS: .nav_btn--type-util */
         static let menuitemutillabel = UIFont(name: "Gotham XNarrow", size: 12)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 12, weight: .light)
 
-        // MARK: - ============================================
-        // MARK: - MQTEASER
-        // MARK: - ============================================
-
-        /** This component level text style references size variables for the semantic level. Specifically kicker4. 14 - 14 - 16 - 16 */
-        static let mqteaserkicker = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
-        /** This component level text style references the semantic level text sizes of headline3 and headline4.
-XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40 */
-        static let mqteaserheadline = UIFont(name: "Gotham Condensed", size: 40)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 40, weight: .light)
-
         // MARK: - ============================================
         // MARK: - NEWSTICKER
         // MARK: - ============================================
@@ -342,88 +330,100 @@ XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 //
         static let paywallcardnote = UIFont(name: "Gotham", size: 40)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 40, weight: .heavy)
 
         // MARK: - ============================================
-        // MARK: - QTEASER
+        // MARK: - SPECIALNAVI
         // MARK: - ============================================
 
-        /** This component level text style is used on the quad teaser headline. Its font size parameter references the semantic level variable headline1. 48 - 48 - 72 - 100 */
-        static let qteaserheadline = UIFont(name: "Gotham Condensed", size: 100)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 100, weight: .light)
+        /** Used on menu link lane items and on mobile side menu drawer. */
+        static let specianaviitemlabel = UIFont(name: "Gotham XNarrow", size: 15)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 15, weight: .light)
 
         // MARK: - ============================================
-        // MARK: - QUOTE
+        // MARK: - TABS
         // MARK: - ============================================
 
-        /** Use this text style for sections of text that are inside a fieldset with a quotation given by a person in an interview or a section of text from a larger body of text that need to be emphasized. */
-        static let quote = UIFont(name: "Gotham", size: 20)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 20, weight: .heavy)
+        /** This text style stores variables for the tab component. Tabs are similar to submenus and special navigation elements but tabs do not link to other URLs. */
+        static let tablabel = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 16, weight: .bold)
+        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. */
+        static let appbottombarlabeldefault = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
+        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. */
+        static let appbottombarlabelactive = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 16, weight: .bold)
 
         // MARK: - ============================================
-        // MARK: - SPECIALNAVI
+        // MARK: - ATEASER
         // MARK: - ============================================
 
-        /** Used on menu link lane items and on mobile side menu drawer. */
-        static let specianaviitemlabel = UIFont(name: "Gotham XNarrow", size: 15)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 15, weight: .light)
+        /** 16 - 16 - 22 - 24 | This text style currently uses two different semantic styles within it, the kicker3 for XS & S, and kicker2 for MD & LG */
+        static let ateaserkicker = UIFont(name: "Gotham XNarrow", size: 24)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 24, weight: .light)
+        /** This text style references the semantic text styles headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64 */
+        static let ateaserheadline = UIFont(name: "Gotham Condensed", size: 64)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 64, weight: .light)
 
         // MARK: - ============================================
-        // MARK: - STDTEASER
+        // MARK: - MQTEASER
         // MARK: - ============================================
 
-        /** Standard teasers typography changes more than other teasers. On desktop they have a kicker, a headline and a short text. On mobile devices the short text is eliminated and the headline gains weight at device widths 600px. Then at small mobile sizes the weight drops once again. */
-        static let stdteaserheadline = UIFont(name: "Gotham Condensed", size: 32)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 32, weight: .light)
+        /** This component level text style references size variables for the semantic level. Specifically kicker4. 14 - 14 - 16 - 16 */
+        static let mqteaserkicker = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
+        /** This component level text style references the semantic level text sizes of headline3 and headline4.
+XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40 */
+        static let mqteaserheadline = UIFont(name: "Gotham Condensed", size: 40)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 40, weight: .light)
 
         // MARK: - ============================================
-        // MARK: - SUBHEADLINE
+        // MARK: - QTEASER
         // MARK: - ============================================
 
-        /** This Subheadlines text style is used in articles. They are placed under the headline at the top of an article. Subheadlines can appear in some teasers also. Font size: 24 - 24 - 32 - 36 */
-        static let subheadline1 = UIFont(name: "Gotham Condensed", size: 36)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 36, weight: .bold)
+        /** This component level text style is used on the quad teaser headline. Its font size parameter references the semantic level variable headline1. 48 - 48 - 72 - 100 */
+        static let qteaserheadline = UIFont(name: "Gotham Condensed", size: 100)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 100, weight: .light)
 
         // MARK: - ============================================
-        // MARK: - TABS
+        // MARK: - STDTEASER
         // MARK: - ============================================
 
-        /** This text style stores variables for the tab component. Tabs are similar to submenus and special navigation elements but tabs do not link to other URLs. */
-        static let tablabel = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 16, weight: .bold)
-        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. */
-        static let appbottombarlabeldefault = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
-        /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. */
-        static let appbottombarlabelactive = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 16, weight: .bold)
+        /** Standard teasers typography changes more than other teasers. On desktop they have a kicker, a headline and a short text. On mobile devices the short text is eliminated and the headline gains weight at device widths 600px. Then at small mobile sizes the weight drops once again. */
+        static let stdteaserheadline = UIFont(name: "Gotham Condensed", size: 32)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 32, weight: .light)
 
         // MARK: - ============================================
-        // MARK: - TEXTLINK
+        // MARK: - TOGGLESWITCHES
         // MARK: - ============================================
 
-        /** Use this text style for styling elements that are clickable text links inside body texts. This style is often found in article texts. Font size remains constant at 21 across device sizes. */
-        static let textlink = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 21, weight: .light)
-        /** Use this text style for styling elements that are clickable text links inside body texts that are using the italic style. This style is often found in article texts that need to show contrast for publications titles, specific words or names. Font size remains constant at 21 across device sizes. */
-        static let textlinkitalic = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 21, weight: .light)
-        /** Use this text style for styling elements that are clickable text links inside emphasized body texts that are using the bold or html strong style. This style is often found in article texts that need to show contrast for specific words or names. Font size remains constant at 21 across device sizes. */
-        static let textlinkbold = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 21, weight: .bold)
-        /** Use this style for body text links or other text links that are in active state. Font size remains constant at 21 across device sizes. */
-        static let textlinkhover = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 21, weight: .light)
-        /** Use this style for body text links or other text links that are in active state. Font size remains constant at 21 across device sizes. */
-        static let textlinkboldhover = UIFont(name: "Gotham XNarrow", size: 21)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 21, weight: .bold)
+        /** This text style is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18 */
+        static let apptoogleitemlabel = UIFont(name: "Gotham", size: 18)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 18, weight: .heavy)
 
         // MARK: - ============================================
-        // MARK: - TITLE
+        // MARK: - .DSDOCSSTYLES
         // MARK: - ============================================
 
-        /** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. Font size: 22 - 22 - 22 - 28 */
-        static let title1 = UIFont(name: "Gotham", size: 28)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 28, weight: .heavy)
-        /** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. Font size: 22 - 22 - 22 - 28 */
-        static let title1uppercase = UIFont(name: "Gotham", size: 28)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 28, weight: .heavy)
-        /** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. 
-
-In the previous system, this style was named Caption. For greater clarity and consistency, it has been renamed to title2. Font size: 16 - 16 - 18 - 20 */
-        static let title2 = UIFont(name: "Gotham", size: 20)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 20, weight: .heavy)
-        /** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. 
-
-In the previous system, this style was named Caption. For greater clarity and consistency, it has been renamed to title2. Font size: 16 - 16 - 18 - 20 */
-        static let title2uppercase = UIFont(name: "Gotham", size: 20)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 20, weight: .heavy)
+        static let .pageheaderdescription = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.bold) ?? UIFont.systemFont(ofSize: 16, weight: .bold)
+        /** This text style is only used on the design system's documentation for code syntax snippets. */
+        static let .codesnippets = UIFont(name: "Source Code Pro", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
+        /** This text style is only used for mockup pages of the design system website. */
+        static let .bilddesignsidemenu = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
+        /** This text style is only used for mockup pages of the design system website. */
+        static let .bilddesignsidemenuactive = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
+        /** This text style is only used for mockup pages of the design system website. */
+        static let .bilddesignsidemenuhover = UIFont(name: "Gotham XNarrow", size: 16)?.withWeight(.semibold) ?? UIFont.systemFont(ofSize: 16, weight: .semibold)
+        /** This text style is only used for mockups the vertical video component teaser headlines. */
+        static let .verticalvideosmockheadlines = UIFont(name: "Gotham Condensed", size: 32)?.withWeight(.semibold) ?? UIFont.systemFont(ofSize: 32, weight: .semibold)
+        /** This text style is used on documentation pages that contain some token information. */
+        static let .tokenspecl = UIFont(name: "Source Code Pro", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
 
         // MARK: - ============================================
-        // MARK: - TOGGLESWITCHES
+        // MARK: - .SPECS
         // MARK: - ============================================
 
-        /** This text style is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18 */
-        static let apptoogleitemlabel = UIFont(name: "Gotham", size: 18)?.withWeight(.heavy) ?? UIFont.systemFont(ofSize: 18, weight: .heavy)
+        /** This text style is only used for audit pages of the design system. */
+        static let .specsxs = UIFont(name: "Gotham", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
+        /** This text style is only used for audit pages of the design system. */
+        static let .specss = UIFont(name: "Gotham", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
+        /** This text style is only used for audit pages of the design system. */
+        static let .specsms = UIFont(name: "Gotham", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
+        /** This text style is only used for audit pages of the design system. */
+        static let .specsm = UIFont(name: "Gotham", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
+        /** This text style is only used for audit pages of the design system. */
+        static let .specsml = UIFont(name: "Gotham", size: 64)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 64, weight: .light)
+        /** This text style is only used for audit pages of the design system. */
+        static let .specsl = UIFont(name: "Gotham", size: 16)?.withWeight(.light) ?? UIFont.systemFont(ofSize: 16, weight: .light)
+        /** This text style is only used for audit pages of the design system. */
+        static let .specsxl = UIFont(name: "Gotham", size: 16)?.withWeight(.semibold) ?? UIFont.systemFont(ofSize: 16, weight: .semibold)
+        /** This text style is only used for audit pages of the design system. */
+        static let .specsxxl = UIFont(name: "Gotham", size: 16)?.withWeight(.semibold) ?? UIFont.systemFont(ofSize: 16, weight: .semibold)
     }
 }