@marioschmidt/design-system-tokens 1.0.78 → 1.1.0

package/dist/scss/brands/sportbild/semantic/typography/typography-md.scss

@@ -1,11 +1,11 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.0.78
+// BILD Design System Tokens v1.1.0
 // Generated by Style Dictionary v4.2.0
 //
 // Brand: Sportbild | Context: Breakpoint: md
 //
-// Copyright (c) 2025 Axel Springer Deutschland GmbH
+// Copyright (c) 2026 Axel Springer Deutschland GmbH
 // Proprietary and confidential. All rights reserved.
 //
 // Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -15,27 +15,30 @@
 
 /** 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 */
 $display-1: (
-  font-family: AntennaCond,
-  font-weight: 800,
+  font-family: AntennaExtraCond,
+  font-weight: 900,
   font-size: 68px,
   line-height: 72px,
   letter-spacing: -1px,
+  font-style: italic,
 );
 /** 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 */
 $display-2: (
-  font-family: AntennaCond,
-  font-weight: 800,
+  font-family: AntennaExtraCond,
+  font-weight: 900,
   font-size: 40px,
   line-height: 42px,
   letter-spacing: -1px,
+  font-style: italic,
 );
 /** 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 */
 $display-3: (
-  font-family: AntennaCond,
-  font-weight: 800,
+  font-family: AntennaExtraCond,
+  font-weight: 900,
   font-size: 30px,
   line-height: 32px,
   letter-spacing: -1px,
+  font-style: italic,
 );
 
 
@@ -309,6 +312,7 @@ $label-1: (
   font-size: 17px,
   line-height: 20.4px,
   letter-spacing: 0.25px,
+  font-style: italic,
 );
 /** 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. */
 $label-1-bold: (
@@ -317,14 +321,7 @@ $label-1-bold: (
   font-size: 17px,
   line-height: 20.4px,
   letter-spacing: 0.25px,
-);
-/** 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 */
-$label-1-bold-resp: (
-  font-family: AntennaExtraCond,
-  font-weight: 700,
-  font-size: 15px,
-  line-height: 18px,
-  letter-spacing: 0.25px,
+  font-style: italic,
 );
 /** 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. */
 $label-1-uppercase-bold: (
@@ -359,6 +356,7 @@ $label-2-bold: (
   font-size: 15px,
   line-height: 19.2px,
   letter-spacing: 0.25px,
+  font-style: italic,
 );
 /** 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. */
 $label-2-uppercase-bold: (
@@ -367,6 +365,7 @@ $label-2-uppercase-bold: (
   font-size: 15px,
   line-height: 19.2px,
   letter-spacing: 0.25px,
+  font-style: italic,
   text-transform: uppercase,
 );
 /** 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. */
@@ -393,6 +392,7 @@ $label-3-bold: (
   font-size: 12px,
   line-height: 14.4px,
   letter-spacing: 0.25px,
+  font-style: italic,
 );
 /** 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. */
 $label-3-uppercase-bold: (
@@ -401,6 +401,7 @@ $label-3-uppercase-bold: (
   font-size: 12px,
   line-height: 14.4px,
   letter-spacing: 0.5px,
+  font-style: italic,
   text-transform: uppercase,
 );
 

package/dist/scss/brands/sportbild/semantic/typography/typography-sm.scss

@@ -1,11 +1,11 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.0.78
+// BILD Design System Tokens v1.1.0
 // Generated by Style Dictionary v4.2.0
 //
 // Brand: Sportbild | Context: Breakpoint: sm
 //
-// Copyright (c) 2025 Axel Springer Deutschland GmbH
+// Copyright (c) 2026 Axel Springer Deutschland GmbH
 // Proprietary and confidential. All rights reserved.
 //
 // Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -15,27 +15,30 @@
 
 /** 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 */
 $display-1: (
-  font-family: AntennaCond,
-  font-weight: 800,
+  font-family: AntennaExtraCond,
+  font-weight: 900,
   font-size: 38px,
   line-height: 40px,
   letter-spacing: -0.5px,
+  font-style: italic,
 );
 /** 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 */
 $display-2: (
-  font-family: AntennaCond,
-  font-weight: 800,
+  font-family: AntennaExtraCond,
+  font-weight: 900,
   font-size: 34px,
   line-height: 36px,
   letter-spacing: -0.5px,
+  font-style: italic,
 );
 /** 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 */
 $display-3: (
-  font-family: AntennaCond,
-  font-weight: 800,
+  font-family: AntennaExtraCond,
+  font-weight: 900,
   font-size: 27px,
   line-height: 28px,
   letter-spacing: -0.5px,
+  font-style: italic,
 );
 
 
@@ -309,6 +312,7 @@ $label-1: (
   font-size: 17px,
   line-height: 20.4px,
   letter-spacing: 0.25px,
+  font-style: italic,
 );
 /** 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. */
 $label-1-bold: (
@@ -317,14 +321,7 @@ $label-1-bold: (
   font-size: 17px,
   line-height: 20.4px,
   letter-spacing: 0.25px,
-);
-/** 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 */
-$label-1-bold-resp: (
-  font-family: AntennaExtraCond,
-  font-weight: 700,
-  font-size: 10px,
-  line-height: 12px,
-  letter-spacing: 0.25px,
+  font-style: italic,
 );
 /** 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. */
 $label-1-uppercase-bold: (
@@ -359,6 +356,7 @@ $label-2-bold: (
   font-size: 15px,
   line-height: 19.2px,
   letter-spacing: 0.25px,
+  font-style: italic,
 );
 /** 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. */
 $label-2-uppercase-bold: (
@@ -367,6 +365,7 @@ $label-2-uppercase-bold: (
   font-size: 15px,
   line-height: 19.2px,
   letter-spacing: 0.25px,
+  font-style: italic,
   text-transform: uppercase,
 );
 /** 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. */
@@ -393,6 +392,7 @@ $label-3-bold: (
   font-size: 12px,
   line-height: 14.4px,
   letter-spacing: 0.25px,
+  font-style: italic,
 );
 /** 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. */
 $label-3-uppercase-bold: (
@@ -401,6 +401,7 @@ $label-3-uppercase-bold: (
   font-size: 12px,
   line-height: 14.4px,
   letter-spacing: 0.5px,
+  font-style: italic,
   text-transform: uppercase,
 );
 

package/dist/scss/brands/sportbild/semantic/typography/typography-xs.scss

@@ -1,11 +1,11 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.0.78
+// BILD Design System Tokens v1.1.0
 // Generated by Style Dictionary v4.2.0
 //
 // Brand: Sportbild | Context: Breakpoint: xs
 //
-// Copyright (c) 2025 Axel Springer Deutschland GmbH
+// Copyright (c) 2026 Axel Springer Deutschland GmbH
 // Proprietary and confidential. All rights reserved.
 //
 // Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -15,27 +15,30 @@
 
 /** 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 */
 $display-1: (
-  font-family: AntennaCond,
-  font-weight: 800,
+  font-family: AntennaExtraCond,
+  font-weight: 900,
   font-size: 38px,
   line-height: 40px,
   letter-spacing: -0.5px,
+  font-style: italic,
 );
 /** 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 */
 $display-2: (
-  font-family: AntennaCond,
-  font-weight: 800,
+  font-family: AntennaExtraCond,
+  font-weight: 900,
   font-size: 34px,
   line-height: 36px,
   letter-spacing: -0.5px,
+  font-style: italic,
 );
 /** 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 */
 $display-3: (
-  font-family: AntennaCond,
-  font-weight: 800,
+  font-family: AntennaExtraCond,
+  font-weight: 900,
   font-size: 27px,
   line-height: 28px,
   letter-spacing: -0.5px,
+  font-style: italic,
 );
 
 
@@ -309,6 +312,7 @@ $label-1: (
   font-size: 17px,
   line-height: 20.4px,
   letter-spacing: 0.25px,
+  font-style: italic,
 );
 /** 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. */
 $label-1-bold: (
@@ -317,14 +321,7 @@ $label-1-bold: (
   font-size: 17px,
   line-height: 20.4px,
   letter-spacing: 0.25px,
-);
-/** 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 */
-$label-1-bold-resp: (
-  font-family: AntennaExtraCond,
-  font-weight: 700,
-  font-size: 10px,
-  line-height: 12px,
-  letter-spacing: 0.25px,
+  font-style: italic,
 );
 /** 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. */
 $label-1-uppercase-bold: (
@@ -359,6 +356,7 @@ $label-2-bold: (
   font-size: 15px,
   line-height: 19.2px,
   letter-spacing: 0.25px,
+  font-style: italic,
 );
 /** 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. */
 $label-2-uppercase-bold: (
@@ -367,6 +365,7 @@ $label-2-uppercase-bold: (
   font-size: 15px,
   line-height: 19.2px,
   letter-spacing: 0.25px,
+  font-style: italic,
   text-transform: uppercase,
 );
 /** 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. */
@@ -393,6 +392,7 @@ $label-3-bold: (
   font-size: 12px,
   line-height: 14.4px,
   letter-spacing: 0.25px,
+  font-style: italic,
 );
 /** 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. */
 $label-3-uppercase-bold: (
@@ -401,6 +401,7 @@ $label-3-uppercase-bold: (
   font-size: 12px,
   line-height: 14.4px,
   letter-spacing: 0.5px,
+  font-style: italic,
   text-transform: uppercase,
 );
 

package/dist/scss/shared/colorprimitive.scss

@@ -1,9 +1,9 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.0.78
+// BILD Design System Tokens v1.1.0
 // Generated by Style Dictionary v4.2.0
 //
-// Copyright (c) 2025 Axel Springer Deutschland GmbH
+// Copyright (c) 2026 Axel Springer Deutschland GmbH
 // Proprietary and confidential. All rights reserved.
 //
 // Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -14,8 +14,15 @@
 // BILD - red
 // Tone 046
 $color-bild-red-50: #DD0000;
-$color-bild-red-35: #AF0002;
-$color-bild-red-53: #F52D2D;
+$color-bild-red-40: #C10000;
+$color-bild-red-60: #F75849;
+$color-bild-red-10: #410000;
+$color-bild-red-90: #FFDADA;
+$color-bild-red-20: #680000;
+$color-bild-red-30: #930000;
+$color-bild-red-80: #FFB2B2;
+$color-bild-red-95: #FFECEC;
+$color-bild-red-70: #FF8989;
 
 // BILD - purple
 // Tone: 020
@@ -23,7 +30,7 @@ $color-bild-purple-20: #551937;
 
 // BILD - alpha
 // Used on elevation effects.
-$alpha-red-50-a-80: rgba(221, 0, 0, 0.8);
+$color-bild-red-50-a-80: rgba(221, 0, 0, 0.8);
 
 
 // ============================================
@@ -31,64 +38,91 @@ $alpha-red-50-a-80: rgba(221, 0, 0, 0.8);
 // ============================================
 
 // Shared - neutral
-$color-neutral-15: #232629;
+$color-neutral-15: #222628;
 $color-neutral-100: #FFFFFF;
-$color-neutral-85: #CED4DA;
-$color-neutral-35: #4B525A;
+$color-neutral-80: #C4C9CF;
+$color-neutral-30: #40464D;
 $color-neutral-25: #343C41;
 $color-neutral-60: #8C9196;
-$color-neutral-96: #F2F4F5;
-$color-neutral-93: #E9ECEF;
-$color-neutral-73: #AEB4B9;
-$color-neutral-45: #666B70;
-$color-neutral-10: #1C1C1C;
-$color-neutral-20: #2C3138;
+$color-neutral-95: #F2F4F5;
+$color-neutral-90: #DDE1E2;
+$color-neutral-70: #A6ABB0;
+$color-neutral-40: #565A5F;
+$color-neutral-10: #191B1C;
+$color-neutral-20: #2C3133;
 $color-neutral-0: #000000;
+$color-neutral-50: #6E787C;
 
 // Shared - orange
 // Tone: 067
-$color-orange-67: #FD8227;
+$color-orange-70: #FD8227;
+$color-orange-30: #763301;
+$color-orange-40: #9E4401;
+$color-orange-50: #C65502;
+$color-orange-80: #FEB782;
+$color-orange-90: #FEDBC1;
+$color-orange-95: #FFEDDF;
+$color-orange-60: #EF6702;
+$color-orange-20: #522301;
+$color-orange-10: #2F1400;
 
 // Shared - green
 $color-green-70: #00C373;
-$color-green-63: #00AF67;
-$color-green-93: #CEF4E4;
+$color-green-90: #B9EFCD;
 $color-green-40: #006E3E;
-$color-green-56: #18995C;
+$color-green-60: #00AF67;
+$color-green-10: #052013;
+$color-green-30: #0D5232;
+$color-green-20: #093822;
+$color-green-50: #158751;
+$color-green-95: #DEF7E6;
+$color-green-80: #76DA9F;
 
 // Shared - yellow
 // Tone: 081
 $color-yellow-80: #FFBF00;
+$color-yellow-70: #D9A200;
+$color-yellow-90: #FFE082;
+$color-yellow-95: #FFF0C2;
+$color-yellow-10: #241B00;
+$color-yellow-20: #3D2E00;
+$color-yellow-30: #594300;
+$color-yellow-40: #785A00;
+$color-yellow-50: #967100;
+$color-yellow-60: #B88A00;
 
 // Shared - alpha
-// The 50% opacity on this color makes it equivalent to BILD093.
-$alpha-neutral-85-a-50: rgba(206, 212, 218, 0.5);
-$alpha-green-93-a-50: rgba(206, 244, 228, 0.5);
-$color-green-56-a-50: rgba(0, 155, 90, 0.5);
-$alpha-black-20: rgba(0, 0, 0, 0.2);
-$alpha-black-10: rgba(0, 0, 0, 0.1);
+$color-neutral-0-a-20: rgba(0, 0, 0, 0.2);
+$color-neutral-0-a-10: rgba(0, 0, 0, 0.1);
 // Used on elevation effects.
-$alpha-black-60: rgba(0, 0, 0, 0.6);
-$alpha-black-30: rgba(0, 0, 0, 0.3);
+$color-neutral-0-a-60: rgba(0, 0, 0, 0.6);
+$color-neutral-0-a-30: rgba(0, 0, 0, 0.3);
 // Used on elevation effects.
-$alpha-black-70: rgba(0, 0, 0, 0.7);
-$alpha-white-10: rgba(255, 255, 255, 0.1);
-$alpha-white-20: rgba(255, 255, 255, 0.2);
-$alpha-white-30: rgba(255, 255, 255, 0.3);
+$color-neutral-0-a-70: rgba(0, 0, 0, 0.7);
+$color-neutral-100-a-10: rgba(255, 255, 255, 0.1);
+$color-neutral-100-a-20: rgba(255, 255, 255, 0.2);
+$color-neutral-100-a-30: rgba(255, 255, 255, 0.3);
 // Used on elevation effects.
-$alpha-white-60: rgba(255, 255, 255, 0.6);
+$color-neutral-100-a-60: rgba(255, 255, 255, 0.6);
 // Used on elevation effects.
-$alpha-white-70: rgba(255, 255, 255, 0.7);
-$alpha-white-35: rgba(255, 255, 255, 0.35);
+$color-neutral-100-a-70: rgba(255, 255, 255, 0.7);
+$color-neutral-100-a-35: rgba(255, 255, 255, 0.35);
 // Used on elevation effects.
-$alpha-black-80: rgba(0, 0, 0, 0.8);
+$color-neutral-0-a-80: rgba(0, 0, 0, 0.8);
 // Used on elevation effects.
-$alpha-white-80: rgba(255, 255, 255, 0.8);
-$alpha-black-35: rgba(0, 0, 0, 0.35);
-$alpha-black-0: rgba(0, 0, 0, 0);
-$alpha-black-50: rgba(0, 0, 0, 0.5);
-$alpha-black-5: rgba(0, 0, 0, 0.05);
-$alpha-white-0: rgba(255, 255, 255, 0);
+$color-neutral-100-a-80: rgba(255, 255, 255, 0.8);
+$color-neutral-0-a-35: rgba(0, 0, 0, 0.35);
+$color-neutral-0-a-0: rgba(0, 0, 0, 0);
+$color-neutral-0-a-50: rgba(0, 0, 0, 0.5);
+$color-neutral-0-a-5: rgba(0, 0, 0, 0.05);
+$color-neutral-100-a-0: rgba(255, 255, 255, 0);
+// Used on elevation effects.
+$color-neutral-100-a-95: rgba(255, 255, 255, 0.95);
+$color-neutral-15-a-0: rgba(34, 38, 40, 0);
+$color-neutral-95-a-0: rgba(242, 244, 245, 0);
+$color-neutral-20-a-0: rgba(44, 49, 51, 0);
+$color-neutral-25-a-0: rgba(52, 60, 65, 0);
+$color-neutral-90-a-0: rgba(221, 225, 226, 0);
 
 
 // ============================================
@@ -111,23 +145,36 @@ $color-cobi-red-50: #DC231C;
 // ============================================
 
 // SportBILD - blue
-$color-spobi-blue-98: #F7F9FD;
-$color-spobi-blue-81: #BDCADB;
+$color-spobi-blue-95: #EFF1F5;
+$color-spobi-blue-80: #C3C9DB;
 // This variable in the current online CSS is called secondary-tenant-color
-$color-spobi-blue-29: #174482;
+$color-spobi-blue-30: #174482;
+// This variable in the current online CSS is called main-tenant-color for the spobi tenant.
+$color-spobi-blue-20: #0C2F61;
+$color-spobi-blue-10: #091C2E;
+$color-spobi-blue-40: #345EA0;
+$color-spobi-blue-50: #4676C3;
+$color-spobi-blue-70: #8FACDB;
+$color-spobi-blue-60: #6A91CF;
+$color-spobi-blue-90: #D6E1F2;
+$color-spobi-blue-15: #0B2647;
 // This variable in the current online CSS is called main-tenant-color for the spobi tenant.
-$color-spobi-blue-16: #0A2750;
-$color-spobi-blue-10: #081828;
-$color-spobi-blue-38: #315998;
+$color-spobi-blue-25: #113B72;
 
 // SportBILD - red
 $color-spobi-red-50: #E52528;
 
 // SportBILD - alpha
 // This primitive is used for creating the teaser title background gradient.
-$color-spobi-blue-16-a-0: rgba(10, 39, 80, 0);
+$color-spobi-blue-15-a-0: rgba(11, 38, 71, 0);
 // This primitive is used for creating the teaser title background gradient.
-$color-spobi-blue-16-a-70: rgba(10, 39, 80, 0.7);
+$color-spobi-blue-15-a-70: rgba(11, 38, 71, 0.7);
+$color-spobi-blue-95-a-0: rgba(239, 241, 245, 0);
+// This variable in the current online CSS is called main-tenant-color for the spobi tenant.
+$color-spobi-blue-20-a-0: rgba(12, 47, 97, 0);
+$color-spobi-blue-90-a-0: rgba(214, 225, 242, 0);
+// This variable in the current online CSS is called main-tenant-color for the spobi tenant.
+$color-spobi-blue-25-a-0: rgba(17, 59, 114, 0);
 
 
 // ============================================

package/dist/scss/shared/fontprimitive.scss

@@ -1,9 +1,9 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.0.78
+// BILD Design System Tokens v1.1.0
 // Generated by Style Dictionary v4.2.0
 //
-// Copyright (c) 2025 Axel Springer Deutschland GmbH
+// Copyright (c) 2026 Axel Springer Deutschland GmbH
 // Proprietary and confidential. All rights reserved.
 //
 // Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -87,4 +87,6 @@ $st-font-weight-extra-light: 200;
 $st-font-weight-thin: 100;
 $st-font-weight-bold-italic: 700;
 $st-font-weight-black-italic: 900;
+$st-font-weight-st-book-italic: 400;
+$st-font-weight-light-italic-st: 300;
 

package/dist/scss/shared/sizeprimitive.scss

@@ -1,9 +1,9 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.0.78
+// BILD Design System Tokens v1.1.0
 // Generated by Style Dictionary v4.2.0
 //
-// Copyright (c) 2025 Axel Springer Deutschland GmbH
+// Copyright (c) 2026 Axel Springer Deutschland GmbH
 // Proprietary and confidential. All rights reserved.
 //
 // Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -60,4 +60,5 @@ $size-18-p-5-x: 148px;
 $size-100-x: 800px;
 $size-0-x: 0px;
 $size-0-p-125-x: 1px;
+$size-5-p-5-x: 44px;
 

package/dist/scss/shared/spaceprimitive.scss

@@ -1,9 +1,9 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.0.78
+// BILD Design System Tokens v1.1.0
 // Generated by Style Dictionary v4.2.0
 //
-// Copyright (c) 2025 Axel Springer Deutschland GmbH
+// Copyright (c) 2026 Axel Springer Deutschland GmbH
 // Proprietary and confidential. All rights reserved.
 //
 // Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md

package/docs/android.md

@@ -127,6 +127,7 @@ All brands implement common interfaces for polymorphic access:
 | `DesignSizingScheme` | All sizing tokens | `BildSizingCompact`, `BildSizingMedium`, `BildSizingExpanded`, `SportbildSizing*`, `AdvertorialSizing*` |
 | `DesignTypographyScheme` | All text styles | `BildTypographyCompact`, `BildTypographyMedium`, `BildTypographyExpanded`, `SportbildTypography*`, `AdvertorialTypography*` |
 | `DesignEffectsScheme` | All shadow tokens | `EffectsLight`, `EffectsDark` (brand-independent, shared) |
+| `DesignDensityScheme` | Density spacing tokens (internal) | `DensityDefault`, `DensityDense`, `DensitySpacious` (brand-independent, shared) |
 
 ```kotlin
 // Polymorphic access - works with any brand
@@ -237,6 +238,11 @@ fun SemanticExample() {
     val cardShadow = DesignSystemTheme.effects.shadowSoftMd
     Box(modifier = Modifier.then(cardShadow.toModifier())) { ... }
 
+    // Density-Aware Spacing - auto-resolved by WindowSizeClass × Density
+    val respSpacing = DesignSystemTheme.stackSpaceRespMd   // Responsive: varies by WindowSizeClass
+    val constSpacing = DesignSystemTheme.stackSpaceConstLg // Constant: same across all WindowSizeClasses
+    Column(verticalArrangement = Arrangement.spacedBy(respSpacing)) { ... }
+
     // Query theme state
     val isDark = DesignSystemTheme.isDarkTheme
     val sizeClass = DesignSystemTheme.sizeClass
@@ -574,6 +580,23 @@ interface DesignEffectsScheme {
     val shadowHardLg: ShadowStyle
     val shadowHardXl: ShadowStyle
 }
+
+// Internal density scheme (brand-independent, not exposed to consumers)
+// Consumers should use BreakpointMode resolver properties instead
+@Stable
+interface DesignDensityScheme {
+    // Constant spacing (same across all WindowSizeClasses)
+    val densityStackSpaceConst3xs: Dp
+    val densityStackSpaceConst2xs: Dp
+    val densityStackSpaceConstXs: Dp
+    // ... 28 total density tokens
+    // Responsive spacing (varies by WindowSizeClass)
+    val densityXsStackSpaceRespMd: Dp
+    val densitySmStackSpaceRespMd: Dp
+    val densityMdStackSpaceRespMd: Dp
+    val densityLgStackSpaceRespMd: Dp
+    // ...
+}
 ```
 
 ### Composite Types
@@ -617,14 +640,35 @@ object DesignSystemTheme {
     val sizing: DesignSizingScheme         // Current sizing (polymorphic)
     val typography: DesignTypographyScheme // Current typography (polymorphic)
     val effects: DesignEffectsScheme       // Current effects (brand-independent)
-    val density: Density                   // Current density
+    val density: Density                   // Current density mode
     val sizeClass: WindowSizeClass         // Current size class
     val isDarkTheme: Boolean               // Is dark mode active?
     val colorBrand: ColorBrand             // Current color brand
     val contentBrand: ContentBrand         // Current content brand
+
+    // Density-Aware Spacing (Consumer API) - use these, NOT densitySpacing directly
+    // Responsive spacing: varies by WindowSizeClass × Density
+    val stackSpaceRespSm: Dp               // Resolves density token per WindowSizeClass
+    val stackSpaceRespMd: Dp
+    val stackSpaceRespLg: Dp
+    val stackSpaceRespXl: Dp
+    val stackSpaceResp2xl: Dp
+    // Constant spacing: same across all WindowSizeClasses, varies by Density only
+    val stackSpaceConst3xs: Dp
+    val stackSpaceConst2xs: Dp
+    val stackSpaceConstXs: Dp
+    val stackSpaceConstSm: Dp
+    val stackSpaceConstMd: Dp
+    val stackSpaceConstLg: Dp
+    val stackSpaceConstXl: Dp
+    val stackSpaceConst2xl: Dp
+
+    internal val densitySpacing: DesignDensityScheme  // Internal - not for direct use
 }
 ```
 
+> **Important - Single Entry Point Pattern:** Density-aware spacing tokens (`stackSpaceRespMd`, `stackSpaceConstLg`, etc.) are **NOT** part of `DesignSizingScheme`. They are only accessible via `DesignSystemTheme` resolvers, which perform the `WindowSizeClass × Density` matrix lookup internally. This ensures consistent density behavior across the application.
+
 ### Component Token Accessors
 
 ```kotlin