@openkfw/design-tokens 0.4.0 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +0 -14
  2. package/output/figma/kfw-design-tokens.light.json +2 -2
  3. package/output/json/kfw-design-tokens.light.json +3 -3
  4. package/output/penpot/kfw-design-tokens.light.json +2 -2
  5. package/output/web_stable_10px/css/kfw-design-tokens.light.css +17 -17
  6. package/output/web_stable_10px/js/kfw-design-tokens.light.d.ts +1 -1
  7. package/output/web_stable_10px/js/kfw-design-tokens.light.js +17 -17
  8. package/output/web_stable_10px/scss/kfw-design-tokens.light.scss +17 -17
  9. package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css +17 -17
  10. package/output/web_thirdparty_16px/js/kfw-design-tokens.light.d.ts +1 -1
  11. package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js +17 -17
  12. package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss +17 -17
  13. package/package.json +6 -6
  14. package/tokens/gen-tokens.dark.json5 +1 -1
  15. package/tokens/tokens.json +1 -1
package/README.md CHANGED
@@ -67,17 +67,3 @@ Otherwise you can use the static `px` values provided in the design tokens.
67
67
 
68
68
  In Tailwind CSS v3, you can define breakpoints directly in your `tailwind.config.js` using JavaScript.
69
69
  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.
70
-
71
- ### How to use KfW Design Tokens with AI?
72
-
73
- You can integrate `KfW Design Tokens` with AI tools like [Google Stitch](https://stitch.withgoogle.com/)
74
- by providing prompts that include specific token values. This helps generate designs aligned with KfW's branding, including colors, typography, and spacing.
75
-
76
- Example prompt:
77
-
78
- ```
79
- Create a modern website design that aligns with the KfW brand provided by KfW Design Tokens:
80
-
81
- https://github.com/openkfw/design-tokens/blob/main/output/web_stable_10px/css/kfw-design-tokens.light.css
82
- (Copy the CSS from the link above and paste it here)
83
- ```
package/output/figma/kfw-design-tokens.light.json CHANGED
@@ -132,7 +132,7 @@
132
132
  },
133
133
  "Fontfamily": {
134
134
  "Sans": {
135
- "$value": "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif",
135
+ "$value": "\"KfW Centro Sans\", Arial, \"Helvetica Neue\", Helvetica, sans-serif",
136
136
  "$type": "fontFamilies"
137
137
  },
138
138
  "Mono": {
@@ -506,7 +506,7 @@
506
506
  },
507
507
  "Fontfamily": {
508
508
  "Default": {
509
- "$value": "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif",
509
+ "$value": "\"KfW Centro Sans\", Arial, \"Helvetica Neue\", Helvetica, sans-serif",
510
510
  "$type": "fontFamilies"
511
511
  },
512
512
  "Code": {
package/output/json/kfw-design-tokens.light.json CHANGED
@@ -1185,12 +1185,12 @@
1185
1185
  "fontfamily": {
1186
1186
  "sans": {
1187
1187
  "key": "{base.fontfamily.sans}",
1188
- "$value": "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif",
1188
+ "$value": "\"KfW Centro Sans\", Arial, \"Helvetica Neue\", Helvetica, sans-serif",
1189
1189
  "filePath": "tokens/tokens.json",
1190
1190
  "isSource": true,
1191
1191
  "$type": "fontFamily",
1192
1192
  "original": {
1193
- "$value": "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif",
1193
+ "$value": "\"KfW Centro Sans\", Arial, \"Helvetica Neue\", Helvetica, sans-serif",
1194
1194
  "$type": "fontFamily",
1195
1195
  "key": "{base.fontfamily.sans}"
1196
1196
  },
@@ -5977,7 +5977,7 @@
5977
5977
  "fontfamily": {
5978
5978
  "default": {
5979
5979
  "key": "{semantic.fontfamily.default}",
5980
- "$value": "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif",
5980
+ "$value": "\"KfW Centro Sans\", Arial, \"Helvetica Neue\", Helvetica, sans-serif",
5981
5981
  "filePath": "tokens/tokens.json",
5982
5982
  "isSource": true,
5983
5983
  "$type": "fontFamily",
package/output/penpot/kfw-design-tokens.light.json CHANGED
@@ -132,7 +132,7 @@
132
132
  },
133
133
  "Fontfamily": {
134
134
  "Sans": {
135
- "$value": "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif",
135
+ "$value": "\"KfW Centro Sans\", Arial, \"Helvetica Neue\", Helvetica, sans-serif",
136
136
  "$type": "fontFamilies"
137
137
  },
138
138
  "Mono": {
@@ -506,7 +506,7 @@
506
506
  },
507
507
  "Fontfamily": {
508
508
  "Default": {
509
- "$value": "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif",
509
+ "$value": "\"KfW Centro Sans\", Arial, \"Helvetica Neue\", Helvetica, sans-serif",
510
510
  "$type": "fontFamilies"
511
511
  },
512
512
  "Code": {
package/output/web_stable_10px/css/kfw-design-tokens.light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.4.0
2
+ * KfW Design Tokens v0.4.1
3
3
  * Copyright 2025
4
4
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
  */
@@ -35,7 +35,7 @@
35
35
  --kfw-base-color-violet-500: #686fc8;
36
36
  --kfw-base-color-red-400: #c80538;
37
37
  --kfw-base-color-yellow-500: #eac80b;
38
- --kfw-base-fontfamily-sans: 'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
38
+ --kfw-base-fontfamily-sans: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
39
39
  --kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
40
40
  --kfw-base-space-static-5: 0.5rem;
41
41
  --kfw-base-space-static-10: 1rem;
@@ -117,24 +117,24 @@
117
117
  --kfw-base-lineheight-sm: 1.333;
118
118
  --kfw-base-lineheight-md: 1.4;
119
119
  --kfw-base-lineheight-lg: 1.5;
120
- --kfw-base-borderradius-sm: 0.2rem;
120
+ --kfw-base-borderradius-sm: 2px;
121
121
  --kfw-base-borderradius-md: 0.4rem;
122
122
  --kfw-base-borderradius-lg: 2rem;
123
123
  --kfw-base-borderradius-full: 999.9rem;
124
124
  --kfw-base-borderwidth-none: 0;
125
125
  --kfw-base-borderwidth-md: 1px;
126
- --kfw-base-borderwidth-lg: 0.2rem;
126
+ --kfw-base-borderwidth-lg: 2px;
127
127
  --kfw-base-fontweight-regular: 400;
128
128
  --kfw-base-fontweight-medium: 500;
129
129
  --kfw-base-letterspacing-tight: -0.5px;
130
130
  --kfw-base-letterspacing-normal: 0;
131
131
  --kfw-base-letterspacing-wide: 0.5px;
132
132
  --kfw-base-letterspacing-wider: 1px;
133
- --kfw-base-layout-breakpoint-xs: 32rem;
134
- --kfw-base-layout-breakpoint-sm: 60rem;
135
- --kfw-base-layout-breakpoint-md: 84rem;
136
- --kfw-base-layout-breakpoint-lg: 96rem;
137
- --kfw-base-layout-breakpoint-xl: 128rem;
133
+ --kfw-base-layout-breakpoint-xs: 320px;
134
+ --kfw-base-layout-breakpoint-sm: 600px;
135
+ --kfw-base-layout-breakpoint-md: 840px;
136
+ --kfw-base-layout-breakpoint-lg: 960px;
137
+ --kfw-base-layout-breakpoint-xl: 1280px;
138
138
  --kfw-base-layout-container-sm: 89.6rem;
139
139
  --kfw-base-layout-container-md: 108rem;
140
140
  --kfw-base-layout-container-lg: 128rem;
@@ -201,7 +201,7 @@
201
201
  --kfw-color-icon-secondary: #54b3e2;
202
202
  --kfw-color-icon-disabled: #398357;
203
203
  --kfw-color-icon-disabled-secondary: #94eb90;
204
- --kfw-fontfamily: 'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
204
+ --kfw-fontfamily: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
205
205
  --kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
206
206
  --kfw-space-xsmall: 1rem;
207
207
  --kfw-space-small: 2rem;
@@ -247,16 +247,16 @@
247
247
  --kfw-lineheight-heading-5: 1.333;
248
248
  --kfw-borderradius: 0.4rem;
249
249
  --kfw-borderwidth: 1px;
250
- --kfw-borderwidth-large: 0.2rem;
251
- --kfw-focusring-outline-width: 0.2rem;
252
- --kfw-focusring-outline-offset: 0.2rem;
250
+ --kfw-borderwidth-large: 2px;
251
+ --kfw-focusring-outline-width: 2px;
252
+ --kfw-focusring-outline-offset: 2px;
253
253
  --kfw-focusring-outline-style: dashed;
254
254
  --kfw-fontweight: 400;
255
255
  --kfw-fontweight-bold: 500;
256
- --kfw-breakpoint-mobile: 60rem;
257
- --kfw-breakpoint-tablet: 84rem;
258
- --kfw-breakpoint-desktop: 96rem;
259
- --kfw-breakpoint-desktop-large: 128rem;
256
+ --kfw-breakpoint-mobile: 600px;
257
+ --kfw-breakpoint-tablet: 840px;
258
+ --kfw-breakpoint-desktop: 960px;
259
+ --kfw-breakpoint-desktop-large: 1280px;
260
260
  --kfw-contentwrapper-narrow: 89.6rem;
261
261
  --kfw-contentwrapper-basic: 108rem;
262
262
  --kfw-contentwrapper-extended: 128rem;
package/output/web_stable_10px/js/kfw-design-tokens.light.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.4.0
2
+ * KfW Design Tokens v0.4.1
3
3
  * Copyright 2025
4
4
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
  */
package/output/web_stable_10px/js/kfw-design-tokens.light.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.4.0
2
+ * KfW Design Tokens v0.4.1
3
3
  * Copyright 2025
4
4
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
  */
@@ -150,7 +150,7 @@ export const KfwBaseColorYellow500 = {
150
150
  hex: "#eac80b",
151
151
  };
152
152
  export const KfwBaseFontfamilySans =
153
- "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif";
153
+ '"KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif';
154
154
  export const KfwBaseFontfamilyMono =
155
155
  "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
156
156
  export const KfwBaseSpaceStatic5 = "0.5rem";
@@ -233,24 +233,24 @@ export const KfwBaseLineheightXs = 1.3;
233
233
  export const KfwBaseLineheightSm = 1.333;
234
234
  export const KfwBaseLineheightMd = 1.4;
235
235
  export const KfwBaseLineheightLg = 1.5;
236
- export const KfwBaseBorderradiusSm = "0.2rem";
236
+ export const KfwBaseBorderradiusSm = "2px";
237
237
  export const KfwBaseBorderradiusMd = "0.4rem";
238
238
  export const KfwBaseBorderradiusLg = "2rem";
239
239
  export const KfwBaseBorderradiusFull = "999.9rem";
240
240
  export const KfwBaseBorderwidthNone = "0";
241
241
  export const KfwBaseBorderwidthMd = "1px";
242
- export const KfwBaseBorderwidthLg = "0.2rem";
242
+ export const KfwBaseBorderwidthLg = "2px";
243
243
  export const KfwBaseFontweightRegular = 400;
244
244
  export const KfwBaseFontweightMedium = 500;
245
245
  export const KfwBaseLetterspacingTight = "-0.5px";
246
246
  export const KfwBaseLetterspacingNormal = "0";
247
247
  export const KfwBaseLetterspacingWide = "0.5px";
248
248
  export const KfwBaseLetterspacingWider = "1px";
249
- export const KfwBaseLayoutBreakpointXs = "32rem";
250
- export const KfwBaseLayoutBreakpointSm = "60rem";
251
- export const KfwBaseLayoutBreakpointMd = "84rem";
252
- export const KfwBaseLayoutBreakpointLg = "96rem";
253
- export const KfwBaseLayoutBreakpointXl = "128rem";
249
+ export const KfwBaseLayoutBreakpointXs = "320px";
250
+ export const KfwBaseLayoutBreakpointSm = "600px";
251
+ export const KfwBaseLayoutBreakpointMd = "840px";
252
+ export const KfwBaseLayoutBreakpointLg = "960px";
253
+ export const KfwBaseLayoutBreakpointXl = "1280px";
254
254
  export const KfwBaseLayoutContainerSm = "89.6rem";
255
255
  export const KfwBaseLayoutContainerMd = "108rem";
256
256
  export const KfwBaseLayoutContainerLg = "128rem";
@@ -495,7 +495,7 @@ export const KfwColorIconDisabledSecondary = {
495
495
  hex: "#94eb90",
496
496
  };
497
497
  export const KfwFontfamily =
498
- "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif";
498
+ '"KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif';
499
499
  export const KfwFontfamilyCode =
500
500
  "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
501
501
  export const KfwSpaceXsmall = "1rem";
@@ -542,16 +542,16 @@ export const KfwLineheightHeading = 1.3;
542
542
  export const KfwLineheightHeading5 = 1.333;
543
543
  export const KfwBorderradius = "0.4rem";
544
544
  export const KfwBorderwidth = "1px";
545
- export const KfwBorderwidthLarge = "0.2rem";
546
- export const KfwFocusringOutlineWidth = "0.2rem";
547
- export const KfwFocusringOutlineOffset = "0.2rem";
545
+ export const KfwBorderwidthLarge = "2px";
546
+ export const KfwFocusringOutlineWidth = "2px";
547
+ export const KfwFocusringOutlineOffset = "2px";
548
548
  export const KfwFocusringOutlineStyle = "dashed";
549
549
  export const KfwFontweight = 400;
550
550
  export const KfwFontweightBold = 500;
551
- export const KfwBreakpointMobile = "60rem";
552
- export const KfwBreakpointTablet = "84rem";
553
- export const KfwBreakpointDesktop = "96rem";
554
- export const KfwBreakpointDesktopLarge = "128rem";
551
+ export const KfwBreakpointMobile = "600px";
552
+ export const KfwBreakpointTablet = "840px";
553
+ export const KfwBreakpointDesktop = "960px";
554
+ export const KfwBreakpointDesktopLarge = "1280px";
555
555
  export const KfwContentwrapperNarrow = "89.6rem";
556
556
  export const KfwContentwrapperBasic = "108rem";
557
557
  export const KfwContentwrapperExtended = "128rem";
package/output/web_stable_10px/scss/kfw-design-tokens.light.scss CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- // KfW Design Tokens v0.4.0
2
+ // KfW Design Tokens v0.4.1
3
3
  // Copyright 2025
4
4
  // Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
 
@@ -31,7 +31,7 @@ $kfw-base-color-violet-400: #9598e0;
31
31
  $kfw-base-color-violet-500: #686fc8;
32
32
  $kfw-base-color-red-400: #c80538;
33
33
  $kfw-base-color-yellow-500: #eac80b;
34
- $kfw-base-fontfamily-sans: 'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
34
+ $kfw-base-fontfamily-sans: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
35
35
  $kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
36
36
  $kfw-base-space-static-5: 0.5rem;
37
37
  $kfw-base-space-static-10: 1rem;
@@ -113,24 +113,24 @@ $kfw-base-lineheight-xs: 1.3;
113
113
  $kfw-base-lineheight-sm: 1.333;
114
114
  $kfw-base-lineheight-md: 1.4;
115
115
  $kfw-base-lineheight-lg: 1.5;
116
- $kfw-base-borderradius-sm: 0.2rem;
116
+ $kfw-base-borderradius-sm: 2px;
117
117
  $kfw-base-borderradius-md: 0.4rem;
118
118
  $kfw-base-borderradius-lg: 2rem;
119
119
  $kfw-base-borderradius-full: 999.9rem;
120
120
  $kfw-base-borderwidth-none: 0;
121
121
  $kfw-base-borderwidth-md: 1px;
122
- $kfw-base-borderwidth-lg: 0.2rem;
122
+ $kfw-base-borderwidth-lg: 2px;
123
123
  $kfw-base-fontweight-regular: 400;
124
124
  $kfw-base-fontweight-medium: 500;
125
125
  $kfw-base-letterspacing-tight: -0.5px;
126
126
  $kfw-base-letterspacing-normal: 0;
127
127
  $kfw-base-letterspacing-wide: 0.5px;
128
128
  $kfw-base-letterspacing-wider: 1px;
129
- $kfw-base-layout-breakpoint-xs: 32rem;
130
- $kfw-base-layout-breakpoint-sm: 60rem;
131
- $kfw-base-layout-breakpoint-md: 84rem;
132
- $kfw-base-layout-breakpoint-lg: 96rem;
133
- $kfw-base-layout-breakpoint-xl: 128rem;
129
+ $kfw-base-layout-breakpoint-xs: 320px;
130
+ $kfw-base-layout-breakpoint-sm: 600px;
131
+ $kfw-base-layout-breakpoint-md: 840px;
132
+ $kfw-base-layout-breakpoint-lg: 960px;
133
+ $kfw-base-layout-breakpoint-xl: 1280px;
134
134
  $kfw-base-layout-container-sm: 89.6rem;
135
135
  $kfw-base-layout-container-md: 108rem;
136
136
  $kfw-base-layout-container-lg: 128rem;
@@ -197,7 +197,7 @@ $kfw-color-icon: #005a8c;
197
197
  $kfw-color-icon-secondary: #54b3e2;
198
198
  $kfw-color-icon-disabled: #398357;
199
199
  $kfw-color-icon-disabled-secondary: #94eb90;
200
- $kfw-fontfamily: 'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
200
+ $kfw-fontfamily: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
201
201
  $kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
202
202
  $kfw-space-xsmall: 1rem;
203
203
  $kfw-space-small: 2rem;
@@ -243,16 +243,16 @@ $kfw-lineheight-heading: 1.3;
243
243
  $kfw-lineheight-heading-5: 1.333;
244
244
  $kfw-borderradius: 0.4rem;
245
245
  $kfw-borderwidth: 1px;
246
- $kfw-borderwidth-large: 0.2rem;
247
- $kfw-focusring-outline-width: 0.2rem;
248
- $kfw-focusring-outline-offset: 0.2rem;
246
+ $kfw-borderwidth-large: 2px;
247
+ $kfw-focusring-outline-width: 2px;
248
+ $kfw-focusring-outline-offset: 2px;
249
249
  $kfw-focusring-outline-style: dashed;
250
250
  $kfw-fontweight: 400;
251
251
  $kfw-fontweight-bold: 500;
252
- $kfw-breakpoint-mobile: 60rem;
253
- $kfw-breakpoint-tablet: 84rem;
254
- $kfw-breakpoint-desktop: 96rem;
255
- $kfw-breakpoint-desktop-large: 128rem;
252
+ $kfw-breakpoint-mobile: 600px;
253
+ $kfw-breakpoint-tablet: 840px;
254
+ $kfw-breakpoint-desktop: 960px;
255
+ $kfw-breakpoint-desktop-large: 1280px;
256
256
  $kfw-contentwrapper-narrow: 89.6rem;
257
257
  $kfw-contentwrapper-basic: 108rem;
258
258
  $kfw-contentwrapper-extended: 128rem;
package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.4.0
2
+ * KfW Design Tokens v0.4.1
3
3
  * Copyright 2025
4
4
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
  */
@@ -35,7 +35,7 @@
35
35
  --kfw-base-color-violet-500: #686fc8;
36
36
  --kfw-base-color-red-400: #c80538;
37
37
  --kfw-base-color-yellow-500: #eac80b;
38
- --kfw-base-fontfamily-sans: 'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
38
+ --kfw-base-fontfamily-sans: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
39
39
  --kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
40
40
  --kfw-base-space-static-5: 0.3125rem;
41
41
  --kfw-base-space-static-10: 0.625rem;
@@ -117,24 +117,24 @@
117
117
  --kfw-base-lineheight-sm: 1.333;
118
118
  --kfw-base-lineheight-md: 1.4;
119
119
  --kfw-base-lineheight-lg: 1.5;
120
- --kfw-base-borderradius-sm: 0.125rem;
120
+ --kfw-base-borderradius-sm: 2px;
121
121
  --kfw-base-borderradius-md: 0.25rem;
122
122
  --kfw-base-borderradius-lg: 1.25rem;
123
123
  --kfw-base-borderradius-full: 624.9375rem;
124
124
  --kfw-base-borderwidth-none: 0;
125
125
  --kfw-base-borderwidth-md: 1px;
126
- --kfw-base-borderwidth-lg: 0.125rem;
126
+ --kfw-base-borderwidth-lg: 2px;
127
127
  --kfw-base-fontweight-regular: 400;
128
128
  --kfw-base-fontweight-medium: 500;
129
129
  --kfw-base-letterspacing-tight: -0.5px;
130
130
  --kfw-base-letterspacing-normal: 0;
131
131
  --kfw-base-letterspacing-wide: 0.5px;
132
132
  --kfw-base-letterspacing-wider: 1px;
133
- --kfw-base-layout-breakpoint-xs: 20rem;
134
- --kfw-base-layout-breakpoint-sm: 37.5rem;
135
- --kfw-base-layout-breakpoint-md: 52.5rem;
136
- --kfw-base-layout-breakpoint-lg: 60rem;
137
- --kfw-base-layout-breakpoint-xl: 80rem;
133
+ --kfw-base-layout-breakpoint-xs: 320px;
134
+ --kfw-base-layout-breakpoint-sm: 600px;
135
+ --kfw-base-layout-breakpoint-md: 840px;
136
+ --kfw-base-layout-breakpoint-lg: 960px;
137
+ --kfw-base-layout-breakpoint-xl: 1280px;
138
138
  --kfw-base-layout-container-sm: 56rem;
139
139
  --kfw-base-layout-container-md: 67.5rem;
140
140
  --kfw-base-layout-container-lg: 80rem;
@@ -201,7 +201,7 @@
201
201
  --kfw-color-icon-secondary: #54b3e2;
202
202
  --kfw-color-icon-disabled: #398357;
203
203
  --kfw-color-icon-disabled-secondary: #94eb90;
204
- --kfw-fontfamily: 'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
204
+ --kfw-fontfamily: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
205
205
  --kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
206
206
  --kfw-space-xsmall: 0.625rem;
207
207
  --kfw-space-small: 1.25rem;
@@ -247,16 +247,16 @@
247
247
  --kfw-lineheight-heading-5: 1.333;
248
248
  --kfw-borderradius: 0.25rem;
249
249
  --kfw-borderwidth: 1px;
250
- --kfw-borderwidth-large: 0.125rem;
251
- --kfw-focusring-outline-width: 0.125rem;
252
- --kfw-focusring-outline-offset: 0.125rem;
250
+ --kfw-borderwidth-large: 2px;
251
+ --kfw-focusring-outline-width: 2px;
252
+ --kfw-focusring-outline-offset: 2px;
253
253
  --kfw-focusring-outline-style: dashed;
254
254
  --kfw-fontweight: 400;
255
255
  --kfw-fontweight-bold: 500;
256
- --kfw-breakpoint-mobile: 37.5rem;
257
- --kfw-breakpoint-tablet: 52.5rem;
258
- --kfw-breakpoint-desktop: 60rem;
259
- --kfw-breakpoint-desktop-large: 80rem;
256
+ --kfw-breakpoint-mobile: 600px;
257
+ --kfw-breakpoint-tablet: 840px;
258
+ --kfw-breakpoint-desktop: 960px;
259
+ --kfw-breakpoint-desktop-large: 1280px;
260
260
  --kfw-contentwrapper-narrow: 56rem;
261
261
  --kfw-contentwrapper-basic: 67.5rem;
262
262
  --kfw-contentwrapper-extended: 80rem;
package/output/web_thirdparty_16px/js/kfw-design-tokens.light.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.4.0
2
+ * KfW Design Tokens v0.4.1
3
3
  * Copyright 2025
4
4
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
  */
package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.4.0
2
+ * KfW Design Tokens v0.4.1
3
3
  * Copyright 2025
4
4
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
  */
@@ -150,7 +150,7 @@ export const KfwBaseColorYellow500 = {
150
150
  hex: "#eac80b",
151
151
  };
152
152
  export const KfwBaseFontfamilySans =
153
- "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif";
153
+ '"KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif';
154
154
  export const KfwBaseFontfamilyMono =
155
155
  "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
156
156
  export const KfwBaseSpaceStatic5 = "0.3125rem";
@@ -233,24 +233,24 @@ export const KfwBaseLineheightXs = 1.3;
233
233
  export const KfwBaseLineheightSm = 1.333;
234
234
  export const KfwBaseLineheightMd = 1.4;
235
235
  export const KfwBaseLineheightLg = 1.5;
236
- export const KfwBaseBorderradiusSm = "0.125rem";
236
+ export const KfwBaseBorderradiusSm = "2px";
237
237
  export const KfwBaseBorderradiusMd = "0.25rem";
238
238
  export const KfwBaseBorderradiusLg = "1.25rem";
239
239
  export const KfwBaseBorderradiusFull = "624.9375rem";
240
240
  export const KfwBaseBorderwidthNone = "0";
241
241
  export const KfwBaseBorderwidthMd = "1px";
242
- export const KfwBaseBorderwidthLg = "0.125rem";
242
+ export const KfwBaseBorderwidthLg = "2px";
243
243
  export const KfwBaseFontweightRegular = 400;
244
244
  export const KfwBaseFontweightMedium = 500;
245
245
  export const KfwBaseLetterspacingTight = "-0.5px";
246
246
  export const KfwBaseLetterspacingNormal = "0";
247
247
  export const KfwBaseLetterspacingWide = "0.5px";
248
248
  export const KfwBaseLetterspacingWider = "1px";
249
- export const KfwBaseLayoutBreakpointXs = "20rem";
250
- export const KfwBaseLayoutBreakpointSm = "37.5rem";
251
- export const KfwBaseLayoutBreakpointMd = "52.5rem";
252
- export const KfwBaseLayoutBreakpointLg = "60rem";
253
- export const KfwBaseLayoutBreakpointXl = "80rem";
249
+ export const KfwBaseLayoutBreakpointXs = "320px";
250
+ export const KfwBaseLayoutBreakpointSm = "600px";
251
+ export const KfwBaseLayoutBreakpointMd = "840px";
252
+ export const KfwBaseLayoutBreakpointLg = "960px";
253
+ export const KfwBaseLayoutBreakpointXl = "1280px";
254
254
  export const KfwBaseLayoutContainerSm = "56rem";
255
255
  export const KfwBaseLayoutContainerMd = "67.5rem";
256
256
  export const KfwBaseLayoutContainerLg = "80rem";
@@ -495,7 +495,7 @@ export const KfwColorIconDisabledSecondary = {
495
495
  hex: "#94eb90",
496
496
  };
497
497
  export const KfwFontfamily =
498
- "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif";
498
+ '"KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif';
499
499
  export const KfwFontfamilyCode =
500
500
  "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
501
501
  export const KfwSpaceXsmall = "0.625rem";
@@ -542,16 +542,16 @@ export const KfwLineheightHeading = 1.3;
542
542
  export const KfwLineheightHeading5 = 1.333;
543
543
  export const KfwBorderradius = "0.25rem";
544
544
  export const KfwBorderwidth = "1px";
545
- export const KfwBorderwidthLarge = "0.125rem";
546
- export const KfwFocusringOutlineWidth = "0.125rem";
547
- export const KfwFocusringOutlineOffset = "0.125rem";
545
+ export const KfwBorderwidthLarge = "2px";
546
+ export const KfwFocusringOutlineWidth = "2px";
547
+ export const KfwFocusringOutlineOffset = "2px";
548
548
  export const KfwFocusringOutlineStyle = "dashed";
549
549
  export const KfwFontweight = 400;
550
550
  export const KfwFontweightBold = 500;
551
- export const KfwBreakpointMobile = "37.5rem";
552
- export const KfwBreakpointTablet = "52.5rem";
553
- export const KfwBreakpointDesktop = "60rem";
554
- export const KfwBreakpointDesktopLarge = "80rem";
551
+ export const KfwBreakpointMobile = "600px";
552
+ export const KfwBreakpointTablet = "840px";
553
+ export const KfwBreakpointDesktop = "960px";
554
+ export const KfwBreakpointDesktopLarge = "1280px";
555
555
  export const KfwContentwrapperNarrow = "56rem";
556
556
  export const KfwContentwrapperBasic = "67.5rem";
557
557
  export const KfwContentwrapperExtended = "80rem";
package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- // KfW Design Tokens v0.4.0
2
+ // KfW Design Tokens v0.4.1
3
3
  // Copyright 2025
4
4
  // Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
 
@@ -31,7 +31,7 @@ $kfw-base-color-violet-400: #9598e0;
31
31
  $kfw-base-color-violet-500: #686fc8;
32
32
  $kfw-base-color-red-400: #c80538;
33
33
  $kfw-base-color-yellow-500: #eac80b;
34
- $kfw-base-fontfamily-sans: 'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
34
+ $kfw-base-fontfamily-sans: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
35
35
  $kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
36
36
  $kfw-base-space-static-5: 0.3125rem;
37
37
  $kfw-base-space-static-10: 0.625rem;
@@ -113,24 +113,24 @@ $kfw-base-lineheight-xs: 1.3;
113
113
  $kfw-base-lineheight-sm: 1.333;
114
114
  $kfw-base-lineheight-md: 1.4;
115
115
  $kfw-base-lineheight-lg: 1.5;
116
- $kfw-base-borderradius-sm: 0.125rem;
116
+ $kfw-base-borderradius-sm: 2px;
117
117
  $kfw-base-borderradius-md: 0.25rem;
118
118
  $kfw-base-borderradius-lg: 1.25rem;
119
119
  $kfw-base-borderradius-full: 624.9375rem;
120
120
  $kfw-base-borderwidth-none: 0;
121
121
  $kfw-base-borderwidth-md: 1px;
122
- $kfw-base-borderwidth-lg: 0.125rem;
122
+ $kfw-base-borderwidth-lg: 2px;
123
123
  $kfw-base-fontweight-regular: 400;
124
124
  $kfw-base-fontweight-medium: 500;
125
125
  $kfw-base-letterspacing-tight: -0.5px;
126
126
  $kfw-base-letterspacing-normal: 0;
127
127
  $kfw-base-letterspacing-wide: 0.5px;
128
128
  $kfw-base-letterspacing-wider: 1px;
129
- $kfw-base-layout-breakpoint-xs: 20rem;
130
- $kfw-base-layout-breakpoint-sm: 37.5rem;
131
- $kfw-base-layout-breakpoint-md: 52.5rem;
132
- $kfw-base-layout-breakpoint-lg: 60rem;
133
- $kfw-base-layout-breakpoint-xl: 80rem;
129
+ $kfw-base-layout-breakpoint-xs: 320px;
130
+ $kfw-base-layout-breakpoint-sm: 600px;
131
+ $kfw-base-layout-breakpoint-md: 840px;
132
+ $kfw-base-layout-breakpoint-lg: 960px;
133
+ $kfw-base-layout-breakpoint-xl: 1280px;
134
134
  $kfw-base-layout-container-sm: 56rem;
135
135
  $kfw-base-layout-container-md: 67.5rem;
136
136
  $kfw-base-layout-container-lg: 80rem;
@@ -197,7 +197,7 @@ $kfw-color-icon: #005a8c;
197
197
  $kfw-color-icon-secondary: #54b3e2;
198
198
  $kfw-color-icon-disabled: #398357;
199
199
  $kfw-color-icon-disabled-secondary: #94eb90;
200
- $kfw-fontfamily: 'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
200
+ $kfw-fontfamily: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
201
201
  $kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
202
202
  $kfw-space-xsmall: 0.625rem;
203
203
  $kfw-space-small: 1.25rem;
@@ -243,16 +243,16 @@ $kfw-lineheight-heading: 1.3;
243
243
  $kfw-lineheight-heading-5: 1.333;
244
244
  $kfw-borderradius: 0.25rem;
245
245
  $kfw-borderwidth: 1px;
246
- $kfw-borderwidth-large: 0.125rem;
247
- $kfw-focusring-outline-width: 0.125rem;
248
- $kfw-focusring-outline-offset: 0.125rem;
246
+ $kfw-borderwidth-large: 2px;
247
+ $kfw-focusring-outline-width: 2px;
248
+ $kfw-focusring-outline-offset: 2px;
249
249
  $kfw-focusring-outline-style: dashed;
250
250
  $kfw-fontweight: 400;
251
251
  $kfw-fontweight-bold: 500;
252
- $kfw-breakpoint-mobile: 37.5rem;
253
- $kfw-breakpoint-tablet: 52.5rem;
254
- $kfw-breakpoint-desktop: 60rem;
255
- $kfw-breakpoint-desktop-large: 80rem;
252
+ $kfw-breakpoint-mobile: 600px;
253
+ $kfw-breakpoint-tablet: 840px;
254
+ $kfw-breakpoint-desktop: 960px;
255
+ $kfw-breakpoint-desktop-large: 1280px;
256
256
  $kfw-contentwrapper-narrow: 56rem;
257
257
  $kfw-contentwrapper-basic: 67.5rem;
258
258
  $kfw-contentwrapper-extended: 80rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openkfw/design-tokens",
3
- "version": "0.4.0",
3
+ "version": "0.4.2",
4
4
  "description": "The source of truth for KfW-branded digital products.",
5
5
  "files": [
6
6
  "output",
@@ -35,20 +35,20 @@
35
35
  "node": ">= 22.0.0"
36
36
  },
37
37
  "devDependencies": {
38
- "@eslint/js": "^9.36.0",
38
+ "@eslint/js": "^9.37.0",
39
39
  "@tsconfig/node22": "^22.0.2",
40
40
  "@types/lodash": "^4.17.20",
41
- "@types/node": "^22.18.7",
41
+ "@types/node": "^22.18.8",
42
42
  "concurrently": "^9.2.1",
43
43
  "deep-get-set-ts": "^1.1.2",
44
- "eslint": "^9.36.0",
44
+ "eslint": "^9.37.0",
45
45
  "json5": "^2.2.3",
46
46
  "jsoneditor-cli": "^1.1.0",
47
47
  "lodash": "4.17.21",
48
48
  "prettier": "^3.6.2",
49
- "style-dictionary": "^5.0.4",
49
+ "style-dictionary": "^5.1.0",
50
50
  "tsx": "^4.20.6",
51
- "typescript": "^5.9.2",
51
+ "typescript": "^5.9.3",
52
52
  "typescript-eslint": "^8.45.0",
53
53
  "npm-check-updates": "^19.0.0"
54
54
  }
package/tokens/gen-tokens.dark.json5 CHANGED
@@ -340,7 +340,7 @@
340
340
  fontfamily: {
341
341
  $type: "fontFamily",
342
342
  sans: {
343
- $value: "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif",
343
+ $value: "\"KfW Centro Sans\", Arial, \"Helvetica Neue\", Helvetica, sans-serif",
344
344
  },
345
345
  mono: {
346
346
  $value: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
package/tokens/tokens.json CHANGED
@@ -50,7 +50,7 @@
50
50
  "fontfamily": {
51
51
  "$type": "fontFamily",
52
52
  "sans": {
53
- "$value": "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif"
53
+ "$value": "\"KfW Centro Sans\", Arial, \"Helvetica Neue\", Helvetica, sans-serif"
54
54
  },
55
55
  "mono": {
56
56
  "$value": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"