@openkfw/design-tokens 0.4.1 → 0.4.3

package/README.md

@@ -67,17 +67,3 @@ Otherwise you can use the static `px` values provided in the design tokens.
 
 In Tailwind CSS v3, you can define breakpoints directly in your `tailwind.config.js` using JavaScript.  
 In Tailwind CSS v4, you can either use the <a href="https://v3.tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus">SCSS preprocessor</a> with variables for breakpoints, or use the standard CSS version with the workaround described above.
-
-### How to use KfW Design Tokens with AI?
-
-You can integrate `KfW Design Tokens` with AI tools like [Google Stitch](https://stitch.withgoogle.com/)
-by providing prompts that include specific token values. This helps generate designs aligned with KfW's branding, including colors, typography, and spacing.
-
-Example prompt:
-
-```
-Create a modern website design that aligns with the KfW brand provided by KfW Design Tokens:
-
-https://github.com/openkfw/design-tokens/blob/main/output/web_stable_10px/css/kfw-design-tokens.light.css
-(Copy the CSS from the link above and paste it here)
-```

package/output/figma/kfw-design-tokens.light.json

@@ -603,14 +603,14 @@
         "$value": "20px",
         "$type": "fontSizes"
       },
-      "Small": {
-        "$value": "14px",
-        "$type": "fontSizes"
-      },
       "Large": {
         "$value": "18px",
         "$type": "fontSizes"
       },
+      "Small": {
+        "$value": "14px",
+        "$type": "fontSizes"
+      },
       "Heading-1": {
         "Mobile": {
           "$value": "30px",
@@ -679,8 +679,18 @@
       }
     },
     "Borderradius": {
-      "$value": "4px",
-      "$type": "borderRadius"
+      "Default": {
+        "$value": "4px",
+        "$type": "borderRadius"
+      },
+      "Large": {
+        "$value": "20px",
+        "$type": "borderRadius"
+      },
+      "Small": {
+        "$value": "2px",
+        "$type": "borderRadius"
+      }
     },
     "Borderwidth": {
       "Default": {

package/output/json/kfw-design-tokens.light.json

@@ -6521,48 +6521,48 @@
           "introduction"
         ]
       },
-      "small": {
-        "key": "{semantic.fontsize.small}",
+      "large": {
+        "key": "{semantic.fontsize.large}",
         "$value": {
           "unit": "px",
-          "value": 14
+          "value": 18
         },
         "filePath": "tokens/tokens.json",
         "isSource": true,
         "$type": "dimension",
         "original": {
-          "$value": "{base.fontsize.static.sm}",
+          "$value": "{base.fontsize.static.lg}",
           "$type": "dimension",
-          "key": "{semantic.fontsize.small}"
+          "key": "{semantic.fontsize.large}"
         },
-        "name": "small",
+        "name": "large",
         "attributes": {},
         "path": [
           "semantic",
           "fontsize",
-          "small"
+          "large"
         ]
       },
-      "large": {
-        "key": "{semantic.fontsize.large}",
+      "small": {
+        "key": "{semantic.fontsize.small}",
         "$value": {
           "unit": "px",
-          "value": 18
+          "value": 14
         },
         "filePath": "tokens/tokens.json",
         "isSource": true,
         "$type": "dimension",
         "original": {
-          "$value": "{base.fontsize.static.lg}",
+          "$value": "{base.fontsize.static.sm}",
           "$type": "dimension",
-          "key": "{semantic.fontsize.large}"
+          "key": "{semantic.fontsize.small}"
         },
-        "name": "large",
+        "name": "small",
         "attributes": {},
         "path": [
           "semantic",
           "fontsize",
-          "large"
+          "small"
         ]
       },
       "heading-1": {
@@ -6989,25 +6989,72 @@
       }
     },
     "borderradius": {
-      "key": "{semantic.borderradius}",
-      "$type": "dimension",
-      "$value": {
-        "unit": "px",
-        "value": 4
+      "default": {
+        "key": "{semantic.borderradius.default}",
+        "$value": {
+          "unit": "px",
+          "value": 4
+        },
+        "filePath": "tokens/tokens.json",
+        "isSource": true,
+        "$type": "dimension",
+        "original": {
+          "$value": "{base.borderradius.md}",
+          "$type": "dimension",
+          "key": "{semantic.borderradius.default}"
+        },
+        "name": "default",
+        "attributes": {},
+        "path": [
+          "semantic",
+          "borderradius",
+          "default"
+        ]
       },
-      "filePath": "tokens/tokens.json",
-      "isSource": true,
-      "original": {
+      "large": {
+        "key": "{semantic.borderradius.large}",
+        "$value": {
+          "unit": "px",
+          "value": 20
+        },
+        "filePath": "tokens/tokens.json",
+        "isSource": true,
         "$type": "dimension",
-        "$value": "{base.borderradius.md}",
-        "key": "{semantic.borderradius}"
+        "original": {
+          "$value": "{base.borderradius.lg}",
+          "$type": "dimension",
+          "key": "{semantic.borderradius.large}"
+        },
+        "name": "large",
+        "attributes": {},
+        "path": [
+          "semantic",
+          "borderradius",
+          "large"
+        ]
       },
-      "name": "borderradius",
-      "attributes": {},
-      "path": [
-        "semantic",
-        "borderradius"
-      ]
+      "small": {
+        "key": "{semantic.borderradius.small}",
+        "$value": {
+          "unit": "px",
+          "value": 2
+        },
+        "filePath": "tokens/tokens.json",
+        "isSource": true,
+        "$type": "dimension",
+        "original": {
+          "$value": "{base.borderradius.sm}",
+          "$type": "dimension",
+          "key": "{semantic.borderradius.small}"
+        },
+        "name": "small",
+        "attributes": {},
+        "path": [
+          "semantic",
+          "borderradius",
+          "small"
+        ]
+      }
     },
     "borderwidth": {
       "default": {

package/output/penpot/kfw-design-tokens.light.json

@@ -603,14 +603,14 @@
         "$value": "20px",
         "$type": "fontSizes"
       },
-      "Small": {
-        "$value": "14px",
-        "$type": "fontSizes"
-      },
       "Large": {
         "$value": "18px",
         "$type": "fontSizes"
       },
+      "Small": {
+        "$value": "14px",
+        "$type": "fontSizes"
+      },
       "Heading-1": {
         "Mobile": {
           "$value": "30px",
@@ -679,8 +679,18 @@
       }
     },
     "Borderradius": {
-      "$value": "4px",
-      "$type": "borderRadius"
+      "Default": {
+        "$value": "4px",
+        "$type": "borderRadius"
+      },
+      "Large": {
+        "$value": "20px",
+        "$type": "borderRadius"
+      },
+      "Small": {
+        "$value": "2px",
+        "$type": "borderRadius"
+      }
     },
     "Borderwidth": {
       "Default": {

package/output/web_stable_10px/css/kfw-design-tokens.light.css

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.4.1
+ * KfW Design Tokens v0.4.3
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */
@@ -117,24 +117,24 @@
   --kfw-base-lineheight-sm: 1.333;
   --kfw-base-lineheight-md: 1.4;
   --kfw-base-lineheight-lg: 1.5;
-  --kfw-base-borderradius-sm: 0.2rem;
+  --kfw-base-borderradius-sm: 2px;
   --kfw-base-borderradius-md: 0.4rem;
   --kfw-base-borderradius-lg: 2rem;
   --kfw-base-borderradius-full: 999.9rem;
   --kfw-base-borderwidth-none: 0;
   --kfw-base-borderwidth-md: 1px;
-  --kfw-base-borderwidth-lg: 0.2rem;
+  --kfw-base-borderwidth-lg: 2px;
   --kfw-base-fontweight-regular: 400;
   --kfw-base-fontweight-medium: 500;
   --kfw-base-letterspacing-tight: -0.5px;
   --kfw-base-letterspacing-normal: 0;
   --kfw-base-letterspacing-wide: 0.5px;
   --kfw-base-letterspacing-wider: 1px;
-  --kfw-base-layout-breakpoint-xs: 32rem;
-  --kfw-base-layout-breakpoint-sm: 60rem;
-  --kfw-base-layout-breakpoint-md: 84rem;
-  --kfw-base-layout-breakpoint-lg: 96rem;
-  --kfw-base-layout-breakpoint-xl: 128rem;
+  --kfw-base-layout-breakpoint-xs: 320px;
+  --kfw-base-layout-breakpoint-sm: 600px;
+  --kfw-base-layout-breakpoint-md: 840px;
+  --kfw-base-layout-breakpoint-lg: 960px;
+  --kfw-base-layout-breakpoint-xl: 1280px;
   --kfw-base-layout-container-sm: 89.6rem;
   --kfw-base-layout-container-md: 108rem;
   --kfw-base-layout-container-lg: 128rem;
@@ -225,8 +225,8 @@
   --kfw-fontspace-heading-6: 1rem;
   --kfw-fontsize: 1.6rem;
   --kfw-fontsize-introduction: 2rem;
-  --kfw-fontsize-small: 1.4rem;
   --kfw-fontsize-large: 1.8rem;
+  --kfw-fontsize-small: 1.4rem;
   --kfw-fontsize-heading-1-min: 3rem;
   --kfw-fontsize-heading-1-max: 3.6rem;
   --kfw-fontsize-heading-1-val: 0.882vi + 2.4706rem;
@@ -246,17 +246,19 @@
   --kfw-lineheight-heading: 1.3;
   --kfw-lineheight-heading-5: 1.333;
   --kfw-borderradius: 0.4rem;
+  --kfw-borderradius-large: 2rem;
+  --kfw-borderradius-small: 2px;
   --kfw-borderwidth: 1px;
-  --kfw-borderwidth-large: 0.2rem;
-  --kfw-focusring-outline-width: 0.2rem;
-  --kfw-focusring-outline-offset: 0.2rem;
+  --kfw-borderwidth-large: 2px;
+  --kfw-focusring-outline-width: 2px;
+  --kfw-focusring-outline-offset: 2px;
   --kfw-focusring-outline-style: dashed;
   --kfw-fontweight: 400;
   --kfw-fontweight-bold: 500;
-  --kfw-breakpoint-mobile: 60rem;
-  --kfw-breakpoint-tablet: 84rem;
-  --kfw-breakpoint-desktop: 96rem;
-  --kfw-breakpoint-desktop-large: 128rem;
+  --kfw-breakpoint-mobile: 600px;
+  --kfw-breakpoint-tablet: 840px;
+  --kfw-breakpoint-desktop: 960px;
+  --kfw-breakpoint-desktop-large: 1280px;
   --kfw-contentwrapper-narrow: 89.6rem;
   --kfw-contentwrapper-basic: 108rem;
   --kfw-contentwrapper-extended: 128rem;

package/output/web_stable_10px/js/kfw-design-tokens.light.d.ts

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.4.1
+ * KfW Design Tokens v0.4.3
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */
@@ -519,8 +519,8 @@ export const KfwFontspaceHeading5: string;
 export const KfwFontspaceHeading6: string;
 export const KfwFontsize: string;
 export const KfwFontsizeIntroduction: string;
-export const KfwFontsizeSmall: string;
 export const KfwFontsizeLarge: string;
+export const KfwFontsizeSmall: string;
 export const KfwFontsizeHeading1Min: string;
 export const KfwFontsizeHeading1Max: string;
 export const KfwFontsizeHeading1Val: string;
@@ -540,6 +540,8 @@ export const KfwLineheightList: number;
 export const KfwLineheightHeading: number;
 export const KfwLineheightHeading5: number;
 export const KfwBorderradius: string;
+export const KfwBorderradiusLarge: string;
+export const KfwBorderradiusSmall: string;
 export const KfwBorderwidth: string;
 export const KfwBorderwidthLarge: string;
 export const KfwFocusringOutlineWidth: string;

package/output/web_stable_10px/js/kfw-design-tokens.light.js

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.4.1
+ * KfW Design Tokens v0.4.3
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */
@@ -233,24 +233,24 @@ export const KfwBaseLineheightXs = 1.3;
 export const KfwBaseLineheightSm = 1.333;
 export const KfwBaseLineheightMd = 1.4;
 export const KfwBaseLineheightLg = 1.5;
-export const KfwBaseBorderradiusSm = "0.2rem";
+export const KfwBaseBorderradiusSm = "2px";
 export const KfwBaseBorderradiusMd = "0.4rem";
 export const KfwBaseBorderradiusLg = "2rem";
 export const KfwBaseBorderradiusFull = "999.9rem";
 export const KfwBaseBorderwidthNone = "0";
 export const KfwBaseBorderwidthMd = "1px";
-export const KfwBaseBorderwidthLg = "0.2rem";
+export const KfwBaseBorderwidthLg = "2px";
 export const KfwBaseFontweightRegular = 400;
 export const KfwBaseFontweightMedium = 500;
 export const KfwBaseLetterspacingTight = "-0.5px";
 export const KfwBaseLetterspacingNormal = "0";
 export const KfwBaseLetterspacingWide = "0.5px";
 export const KfwBaseLetterspacingWider = "1px";
-export const KfwBaseLayoutBreakpointXs = "32rem";
-export const KfwBaseLayoutBreakpointSm = "60rem";
-export const KfwBaseLayoutBreakpointMd = "84rem";
-export const KfwBaseLayoutBreakpointLg = "96rem";
-export const KfwBaseLayoutBreakpointXl = "128rem";
+export const KfwBaseLayoutBreakpointXs = "320px";
+export const KfwBaseLayoutBreakpointSm = "600px";
+export const KfwBaseLayoutBreakpointMd = "840px";
+export const KfwBaseLayoutBreakpointLg = "960px";
+export const KfwBaseLayoutBreakpointXl = "1280px";
 export const KfwBaseLayoutContainerSm = "89.6rem";
 export const KfwBaseLayoutContainerMd = "108rem";
 export const KfwBaseLayoutContainerLg = "128rem";
@@ -520,8 +520,8 @@ export const KfwFontspaceHeading5 = "1rem";
 export const KfwFontspaceHeading6 = "1rem";
 export const KfwFontsize = "1.6rem";
 export const KfwFontsizeIntroduction = "2rem";
-export const KfwFontsizeSmall = "1.4rem";
 export const KfwFontsizeLarge = "1.8rem";
+export const KfwFontsizeSmall = "1.4rem";
 export const KfwFontsizeHeading1Min = "3rem";
 export const KfwFontsizeHeading1Max = "3.6rem";
 export const KfwFontsizeHeading1Val = "2.4706rem";
@@ -541,17 +541,19 @@ export const KfwLineheightList = 1.5;
 export const KfwLineheightHeading = 1.3;
 export const KfwLineheightHeading5 = 1.333;
 export const KfwBorderradius = "0.4rem";
+export const KfwBorderradiusLarge = "2rem";
+export const KfwBorderradiusSmall = "2px";
 export const KfwBorderwidth = "1px";
-export const KfwBorderwidthLarge = "0.2rem";
-export const KfwFocusringOutlineWidth = "0.2rem";
-export const KfwFocusringOutlineOffset = "0.2rem";
+export const KfwBorderwidthLarge = "2px";
+export const KfwFocusringOutlineWidth = "2px";
+export const KfwFocusringOutlineOffset = "2px";
 export const KfwFocusringOutlineStyle = "dashed";
 export const KfwFontweight = 400;
 export const KfwFontweightBold = 500;
-export const KfwBreakpointMobile = "60rem";
-export const KfwBreakpointTablet = "84rem";
-export const KfwBreakpointDesktop = "96rem";
-export const KfwBreakpointDesktopLarge = "128rem";
+export const KfwBreakpointMobile = "600px";
+export const KfwBreakpointTablet = "840px";
+export const KfwBreakpointDesktop = "960px";
+export const KfwBreakpointDesktopLarge = "1280px";
 export const KfwContentwrapperNarrow = "89.6rem";
 export const KfwContentwrapperBasic = "108rem";
 export const KfwContentwrapperExtended = "128rem";

package/output/web_stable_10px/scss/kfw-design-tokens.light.scss

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.4.1
+// KfW Design Tokens v0.4.3
 // Copyright 2025
 // Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
 
@@ -113,24 +113,24 @@ $kfw-base-lineheight-xs: 1.3;
 $kfw-base-lineheight-sm: 1.333;
 $kfw-base-lineheight-md: 1.4;
 $kfw-base-lineheight-lg: 1.5;
-$kfw-base-borderradius-sm: 0.2rem;
+$kfw-base-borderradius-sm: 2px;
 $kfw-base-borderradius-md: 0.4rem;
 $kfw-base-borderradius-lg: 2rem;
 $kfw-base-borderradius-full: 999.9rem;
 $kfw-base-borderwidth-none: 0;
 $kfw-base-borderwidth-md: 1px;
-$kfw-base-borderwidth-lg: 0.2rem;
+$kfw-base-borderwidth-lg: 2px;
 $kfw-base-fontweight-regular: 400;
 $kfw-base-fontweight-medium: 500;
 $kfw-base-letterspacing-tight: -0.5px;
 $kfw-base-letterspacing-normal: 0;
 $kfw-base-letterspacing-wide: 0.5px;
 $kfw-base-letterspacing-wider: 1px;
-$kfw-base-layout-breakpoint-xs: 32rem;
-$kfw-base-layout-breakpoint-sm: 60rem;
-$kfw-base-layout-breakpoint-md: 84rem;
-$kfw-base-layout-breakpoint-lg: 96rem;
-$kfw-base-layout-breakpoint-xl: 128rem;
+$kfw-base-layout-breakpoint-xs: 320px;
+$kfw-base-layout-breakpoint-sm: 600px;
+$kfw-base-layout-breakpoint-md: 840px;
+$kfw-base-layout-breakpoint-lg: 960px;
+$kfw-base-layout-breakpoint-xl: 1280px;
 $kfw-base-layout-container-sm: 89.6rem;
 $kfw-base-layout-container-md: 108rem;
 $kfw-base-layout-container-lg: 128rem;
@@ -221,8 +221,8 @@ $kfw-fontspace-heading-5: 1rem;
 $kfw-fontspace-heading-6: 1rem;
 $kfw-fontsize: 1.6rem;
 $kfw-fontsize-introduction: 2rem;
-$kfw-fontsize-small: 1.4rem;
 $kfw-fontsize-large: 1.8rem;
+$kfw-fontsize-small: 1.4rem;
 $kfw-fontsize-heading-1-min: 3rem;
 $kfw-fontsize-heading-1-max: 3.6rem;
 $kfw-fontsize-heading-1-val: 0.882vi + 2.4706rem;
@@ -242,17 +242,19 @@ $kfw-lineheight-list: 1.5;
 $kfw-lineheight-heading: 1.3;
 $kfw-lineheight-heading-5: 1.333;
 $kfw-borderradius: 0.4rem;
+$kfw-borderradius-large: 2rem;
+$kfw-borderradius-small: 2px;
 $kfw-borderwidth: 1px;
-$kfw-borderwidth-large: 0.2rem;
-$kfw-focusring-outline-width: 0.2rem;
-$kfw-focusring-outline-offset: 0.2rem;
+$kfw-borderwidth-large: 2px;
+$kfw-focusring-outline-width: 2px;
+$kfw-focusring-outline-offset: 2px;
 $kfw-focusring-outline-style: dashed;
 $kfw-fontweight: 400;
 $kfw-fontweight-bold: 500;
-$kfw-breakpoint-mobile: 60rem;
-$kfw-breakpoint-tablet: 84rem;
-$kfw-breakpoint-desktop: 96rem;
-$kfw-breakpoint-desktop-large: 128rem;
+$kfw-breakpoint-mobile: 600px;
+$kfw-breakpoint-tablet: 840px;
+$kfw-breakpoint-desktop: 960px;
+$kfw-breakpoint-desktop-large: 1280px;
 $kfw-contentwrapper-narrow: 89.6rem;
 $kfw-contentwrapper-basic: 108rem;
 $kfw-contentwrapper-extended: 128rem;

package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.4.1
+ * KfW Design Tokens v0.4.3
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */
@@ -117,24 +117,24 @@
   --kfw-base-lineheight-sm: 1.333;
   --kfw-base-lineheight-md: 1.4;
   --kfw-base-lineheight-lg: 1.5;
-  --kfw-base-borderradius-sm: 0.125rem;
+  --kfw-base-borderradius-sm: 2px;
   --kfw-base-borderradius-md: 0.25rem;
   --kfw-base-borderradius-lg: 1.25rem;
   --kfw-base-borderradius-full: 624.9375rem;
   --kfw-base-borderwidth-none: 0;
   --kfw-base-borderwidth-md: 1px;
-  --kfw-base-borderwidth-lg: 0.125rem;
+  --kfw-base-borderwidth-lg: 2px;
   --kfw-base-fontweight-regular: 400;
   --kfw-base-fontweight-medium: 500;
   --kfw-base-letterspacing-tight: -0.5px;
   --kfw-base-letterspacing-normal: 0;
   --kfw-base-letterspacing-wide: 0.5px;
   --kfw-base-letterspacing-wider: 1px;
-  --kfw-base-layout-breakpoint-xs: 20rem;
-  --kfw-base-layout-breakpoint-sm: 37.5rem;
-  --kfw-base-layout-breakpoint-md: 52.5rem;
-  --kfw-base-layout-breakpoint-lg: 60rem;
-  --kfw-base-layout-breakpoint-xl: 80rem;
+  --kfw-base-layout-breakpoint-xs: 320px;
+  --kfw-base-layout-breakpoint-sm: 600px;
+  --kfw-base-layout-breakpoint-md: 840px;
+  --kfw-base-layout-breakpoint-lg: 960px;
+  --kfw-base-layout-breakpoint-xl: 1280px;
   --kfw-base-layout-container-sm: 56rem;
   --kfw-base-layout-container-md: 67.5rem;
   --kfw-base-layout-container-lg: 80rem;
@@ -225,8 +225,8 @@
   --kfw-fontspace-heading-6: 0.625rem;
   --kfw-fontsize: 1rem;
   --kfw-fontsize-introduction: 1.25rem;
-  --kfw-fontsize-small: 0.875rem;
   --kfw-fontsize-large: 1.125rem;
+  --kfw-fontsize-small: 0.875rem;
   --kfw-fontsize-heading-1-min: 1.875rem;
   --kfw-fontsize-heading-1-max: 2.25rem;
   --kfw-fontsize-heading-1-val: 0.882vi + 1.544125rem;
@@ -246,17 +246,19 @@
   --kfw-lineheight-heading: 1.3;
   --kfw-lineheight-heading-5: 1.333;
   --kfw-borderradius: 0.25rem;
+  --kfw-borderradius-large: 1.25rem;
+  --kfw-borderradius-small: 2px;
   --kfw-borderwidth: 1px;
-  --kfw-borderwidth-large: 0.125rem;
-  --kfw-focusring-outline-width: 0.125rem;
-  --kfw-focusring-outline-offset: 0.125rem;
+  --kfw-borderwidth-large: 2px;
+  --kfw-focusring-outline-width: 2px;
+  --kfw-focusring-outline-offset: 2px;
   --kfw-focusring-outline-style: dashed;
   --kfw-fontweight: 400;
   --kfw-fontweight-bold: 500;
-  --kfw-breakpoint-mobile: 37.5rem;
-  --kfw-breakpoint-tablet: 52.5rem;
-  --kfw-breakpoint-desktop: 60rem;
-  --kfw-breakpoint-desktop-large: 80rem;
+  --kfw-breakpoint-mobile: 600px;
+  --kfw-breakpoint-tablet: 840px;
+  --kfw-breakpoint-desktop: 960px;
+  --kfw-breakpoint-desktop-large: 1280px;
   --kfw-contentwrapper-narrow: 56rem;
   --kfw-contentwrapper-basic: 67.5rem;
   --kfw-contentwrapper-extended: 80rem;

package/output/web_thirdparty_16px/js/kfw-design-tokens.light.d.ts

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.4.1
+ * KfW Design Tokens v0.4.3
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */
@@ -519,8 +519,8 @@ export const KfwFontspaceHeading5: string;
 export const KfwFontspaceHeading6: string;
 export const KfwFontsize: string;
 export const KfwFontsizeIntroduction: string;
-export const KfwFontsizeSmall: string;
 export const KfwFontsizeLarge: string;
+export const KfwFontsizeSmall: string;
 export const KfwFontsizeHeading1Min: string;
 export const KfwFontsizeHeading1Max: string;
 export const KfwFontsizeHeading1Val: string;
@@ -540,6 +540,8 @@ export const KfwLineheightList: number;
 export const KfwLineheightHeading: number;
 export const KfwLineheightHeading5: number;
 export const KfwBorderradius: string;
+export const KfwBorderradiusLarge: string;
+export const KfwBorderradiusSmall: string;
 export const KfwBorderwidth: string;
 export const KfwBorderwidthLarge: string;
 export const KfwFocusringOutlineWidth: string;

package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.4.1
+ * KfW Design Tokens v0.4.3
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */
@@ -233,24 +233,24 @@ export const KfwBaseLineheightXs = 1.3;
 export const KfwBaseLineheightSm = 1.333;
 export const KfwBaseLineheightMd = 1.4;
 export const KfwBaseLineheightLg = 1.5;
-export const KfwBaseBorderradiusSm = "0.125rem";
+export const KfwBaseBorderradiusSm = "2px";
 export const KfwBaseBorderradiusMd = "0.25rem";
 export const KfwBaseBorderradiusLg = "1.25rem";
 export const KfwBaseBorderradiusFull = "624.9375rem";
 export const KfwBaseBorderwidthNone = "0";
 export const KfwBaseBorderwidthMd = "1px";
-export const KfwBaseBorderwidthLg = "0.125rem";
+export const KfwBaseBorderwidthLg = "2px";
 export const KfwBaseFontweightRegular = 400;
 export const KfwBaseFontweightMedium = 500;
 export const KfwBaseLetterspacingTight = "-0.5px";
 export const KfwBaseLetterspacingNormal = "0";
 export const KfwBaseLetterspacingWide = "0.5px";
 export const KfwBaseLetterspacingWider = "1px";
-export const KfwBaseLayoutBreakpointXs = "20rem";
-export const KfwBaseLayoutBreakpointSm = "37.5rem";
-export const KfwBaseLayoutBreakpointMd = "52.5rem";
-export const KfwBaseLayoutBreakpointLg = "60rem";
-export const KfwBaseLayoutBreakpointXl = "80rem";
+export const KfwBaseLayoutBreakpointXs = "320px";
+export const KfwBaseLayoutBreakpointSm = "600px";
+export const KfwBaseLayoutBreakpointMd = "840px";
+export const KfwBaseLayoutBreakpointLg = "960px";
+export const KfwBaseLayoutBreakpointXl = "1280px";
 export const KfwBaseLayoutContainerSm = "56rem";
 export const KfwBaseLayoutContainerMd = "67.5rem";
 export const KfwBaseLayoutContainerLg = "80rem";
@@ -520,8 +520,8 @@ export const KfwFontspaceHeading5 = "0.625rem";
 export const KfwFontspaceHeading6 = "0.625rem";
 export const KfwFontsize = "1rem";
 export const KfwFontsizeIntroduction = "1.25rem";
-export const KfwFontsizeSmall = "0.875rem";
 export const KfwFontsizeLarge = "1.125rem";
+export const KfwFontsizeSmall = "0.875rem";
 export const KfwFontsizeHeading1Min = "1.875rem";
 export const KfwFontsizeHeading1Max = "2.25rem";
 export const KfwFontsizeHeading1Val = "1.544125rem";
@@ -541,17 +541,19 @@ export const KfwLineheightList = 1.5;
 export const KfwLineheightHeading = 1.3;
 export const KfwLineheightHeading5 = 1.333;
 export const KfwBorderradius = "0.25rem";
+export const KfwBorderradiusLarge = "1.25rem";
+export const KfwBorderradiusSmall = "2px";
 export const KfwBorderwidth = "1px";
-export const KfwBorderwidthLarge = "0.125rem";
-export const KfwFocusringOutlineWidth = "0.125rem";
-export const KfwFocusringOutlineOffset = "0.125rem";
+export const KfwBorderwidthLarge = "2px";
+export const KfwFocusringOutlineWidth = "2px";
+export const KfwFocusringOutlineOffset = "2px";
 export const KfwFocusringOutlineStyle = "dashed";
 export const KfwFontweight = 400;
 export const KfwFontweightBold = 500;
-export const KfwBreakpointMobile = "37.5rem";
-export const KfwBreakpointTablet = "52.5rem";
-export const KfwBreakpointDesktop = "60rem";
-export const KfwBreakpointDesktopLarge = "80rem";
+export const KfwBreakpointMobile = "600px";
+export const KfwBreakpointTablet = "840px";
+export const KfwBreakpointDesktop = "960px";
+export const KfwBreakpointDesktopLarge = "1280px";
 export const KfwContentwrapperNarrow = "56rem";
 export const KfwContentwrapperBasic = "67.5rem";
 export const KfwContentwrapperExtended = "80rem";

package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.4.1
+// KfW Design Tokens v0.4.3
 // Copyright 2025
 // Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
 
@@ -113,24 +113,24 @@ $kfw-base-lineheight-xs: 1.3;
 $kfw-base-lineheight-sm: 1.333;
 $kfw-base-lineheight-md: 1.4;
 $kfw-base-lineheight-lg: 1.5;
-$kfw-base-borderradius-sm: 0.125rem;
+$kfw-base-borderradius-sm: 2px;
 $kfw-base-borderradius-md: 0.25rem;
 $kfw-base-borderradius-lg: 1.25rem;
 $kfw-base-borderradius-full: 624.9375rem;
 $kfw-base-borderwidth-none: 0;
 $kfw-base-borderwidth-md: 1px;
-$kfw-base-borderwidth-lg: 0.125rem;
+$kfw-base-borderwidth-lg: 2px;
 $kfw-base-fontweight-regular: 400;
 $kfw-base-fontweight-medium: 500;
 $kfw-base-letterspacing-tight: -0.5px;
 $kfw-base-letterspacing-normal: 0;
 $kfw-base-letterspacing-wide: 0.5px;
 $kfw-base-letterspacing-wider: 1px;
-$kfw-base-layout-breakpoint-xs: 20rem;
-$kfw-base-layout-breakpoint-sm: 37.5rem;
-$kfw-base-layout-breakpoint-md: 52.5rem;
-$kfw-base-layout-breakpoint-lg: 60rem;
-$kfw-base-layout-breakpoint-xl: 80rem;
+$kfw-base-layout-breakpoint-xs: 320px;
+$kfw-base-layout-breakpoint-sm: 600px;
+$kfw-base-layout-breakpoint-md: 840px;
+$kfw-base-layout-breakpoint-lg: 960px;
+$kfw-base-layout-breakpoint-xl: 1280px;
 $kfw-base-layout-container-sm: 56rem;
 $kfw-base-layout-container-md: 67.5rem;
 $kfw-base-layout-container-lg: 80rem;
@@ -221,8 +221,8 @@ $kfw-fontspace-heading-5: 0.625rem;
 $kfw-fontspace-heading-6: 0.625rem;
 $kfw-fontsize: 1rem;
 $kfw-fontsize-introduction: 1.25rem;
-$kfw-fontsize-small: 0.875rem;
 $kfw-fontsize-large: 1.125rem;
+$kfw-fontsize-small: 0.875rem;
 $kfw-fontsize-heading-1-min: 1.875rem;
 $kfw-fontsize-heading-1-max: 2.25rem;
 $kfw-fontsize-heading-1-val: 0.882vi + 1.544125rem;
@@ -242,17 +242,19 @@ $kfw-lineheight-list: 1.5;
 $kfw-lineheight-heading: 1.3;
 $kfw-lineheight-heading-5: 1.333;
 $kfw-borderradius: 0.25rem;
+$kfw-borderradius-large: 1.25rem;
+$kfw-borderradius-small: 2px;
 $kfw-borderwidth: 1px;
-$kfw-borderwidth-large: 0.125rem;
-$kfw-focusring-outline-width: 0.125rem;
-$kfw-focusring-outline-offset: 0.125rem;
+$kfw-borderwidth-large: 2px;
+$kfw-focusring-outline-width: 2px;
+$kfw-focusring-outline-offset: 2px;
 $kfw-focusring-outline-style: dashed;
 $kfw-fontweight: 400;
 $kfw-fontweight-bold: 500;
-$kfw-breakpoint-mobile: 37.5rem;
-$kfw-breakpoint-tablet: 52.5rem;
-$kfw-breakpoint-desktop: 60rem;
-$kfw-breakpoint-desktop-large: 80rem;
+$kfw-breakpoint-mobile: 600px;
+$kfw-breakpoint-tablet: 840px;
+$kfw-breakpoint-desktop: 960px;
+$kfw-breakpoint-desktop-large: 1280px;
 $kfw-contentwrapper-narrow: 56rem;
 $kfw-contentwrapper-basic: 67.5rem;
 $kfw-contentwrapper-extended: 80rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openkfw/design-tokens",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "The source of truth for KfW-branded digital products.",
   "files": [
     "output",
@@ -35,13 +35,13 @@
     "node": ">= 22.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.36.0",
+    "@eslint/js": "^9.37.0",
     "@tsconfig/node22": "^22.0.2",
     "@types/lodash": "^4.17.20",
     "@types/node": "^22.18.8",
     "concurrently": "^9.2.1",
     "deep-get-set-ts": "^1.1.2",
-    "eslint": "^9.36.0",
+    "eslint": "^9.37.0",
     "json5": "^2.2.3",
     "jsoneditor-cli": "^1.1.0",
     "lodash": "4.17.21",

package/tokens/gen-tokens.dark.json5

@@ -1327,12 +1327,12 @@
       introduction: {
         $value: "{base.fontsize.static.xl}",
       },
-      small: {
-        $value: "{base.fontsize.static.sm}",
-      },
       large: {
         $value: "{base.fontsize.static.lg}",
       },
+      small: {
+        $value: "{base.fontsize.static.sm}",
+      },
       "heading-1": {
         min: {
           $value: "{base.fontsize.fluid.6xl.min}",
@@ -1401,7 +1401,15 @@
     },
     borderradius: {
       $type: "dimension",
-      $value: "{base.borderradius.md}",
+      default: {
+        $value: "{base.borderradius.md}",
+      },
+      large: {
+        $value: "{base.borderradius.lg}",
+      },
+      small: {
+        $value: "{base.borderradius.sm}",
+      },
     },
     borderwidth: {
       $type: "dimension",

package/tokens/tokens.json

@@ -376,8 +376,8 @@
       "$type": "dimension",
       "default": { "$value": "{base.fontsize.static.md}" },
       "introduction": { "$value": "{base.fontsize.static.xl}" },
-      "small": { "$value": "{base.fontsize.static.sm}" },
       "large": { "$value": "{base.fontsize.static.lg}" },
+      "small": { "$value": "{base.fontsize.static.sm}" },
       "heading-1": {
         "min": { "$value": "{base.fontsize.fluid.6xl.min}" },
         "max": { "$value": "{base.fontsize.fluid.6xl.max}" },
@@ -410,7 +410,9 @@
     },
     "borderradius": {
       "$type": "dimension",
-      "$value": "{base.borderradius.md}"
+      "default": { "$value": "{base.borderradius.md}" },
+      "large": { "$value": "{base.borderradius.lg}" },
+      "small": { "$value": "{base.borderradius.sm}" }
     },
     "borderwidth": {
       "$type": "dimension",