KfW Design Tokens

⚠️ Important Usage Notice
KfW Design Tokens, along with all related documentation, components, support, and assets (e.g., fonts, icons, images), are intended for internal use only. Although the source code for KfW Design Tokens is available under the MPL 2.0 License, this open-source release is provided solely as a showcase. KfW fully reserves all rights to the KfW brand. The use of the KfW brand and design is subject to strict restrictions, even when built into code that we provide. If you have any questions or need assistance, please reach out to our "Design System & Tokens Community" in the internal Webex channel or use the official KfW Brand-Guide. The use of the protected trademark "KfW" is generally not permitted. If logo usage is necessary, the logo must be requested and approved in advance by KfW via [email protected].

KfW Design Tokens is the source of truth for designing KfW-branded digital products. By default, it's built to align with our corporate brand and design but allows for customization to fit your particular product. The tokens follow a template that complies with the W3C DTCG format.

Note: The Design Tokens are still in the pilot phase. This means that they are currently being tested and evaluated for functionality and usability. Feedback from users during this phase is crucial for making improvements and ensuring that the tokens meet the needs of all stakeholders before a full stable release.

🚀 Installation

Install via npm:

npm install -D @openkfw/design-tokens

Import tokens from the output directory, for example:

@import url("@openkfw/design-tokens/output/css/kfw-design-tokens.light.css");

Or use the prebuilt demo (CSS boilerplate) stylesheet:

/* Make sure to import fonts.css yourself before */
@import url("@openkfw/design-tokens/demo/dist/css/style.min.css");

❤️ Contributing

Considering supporting with your contribution? Whether you like to contribute new patterns, fix a bug, spotted a typo or have ideas for improvement - we'd love to hear from you. Our commitment to open source encourages contributions from everyone.

📒 License

Copyright (c) 2025 KfW Bankengruppe

The source code in this repository is licensed under the Mozilla Public License 2.0 (MPL-2.0). All KfW brand assets, including logos, icons, images, fonts, and design documentation, are excluded and remain the property of KfW Bankengruppe. These materials may not be used, copied, or redistributed without prior written permission.

Excluded brand-related materials include:

• trademarks, wordmarks, logos
• icons, images, fonts, and other design assets
• brand and design documentation
• all files under /demo directory

See the full MPL-2.0 license in LICENSE.

💁 FAQ

How to use fluid typography with design tokens?

Fluid typography allows font sizes to scale dynamically based on the viewport size, creating a responsive and adaptable user experience. KfW Design Tokens include predefined fluid typography settings that you can directly use in your projects.

For example, you can apply the following CSS variables with clamp:

h1 {
  font-size: clamp(var(--kfw-fontsize-heading-1-min), var(--kfw-fontsize-heading-1-val), var(--kfw-fontsize-heading-1-max));
}

This ensures that the h1 font size adjusts fluidly between the minimum and maximum values defined in the design tokens, depending on the viewport width — the minimum value on mobile, scaling up to the maximum value on desktop.

How to use breakpoint design tokens with @media and CSS?

Currently, CSS variables cannot be used directly in media query declarations. However, the W3C is working on the Custom Media Specification. As a workaround, you can extract your variables into @custom-media rules and generate your CSS using the PostCSS plugin postcss-custom-media. A sample integration can be found in the /demo directory. Otherwise you can use the static px values provided in the design tokens.

How to use breakpoint design tokens with @media in Tailwind CSS?

In Tailwind CSS v3, define breakpoints in your tailwind.config.js using JavaScript.
In Tailwind CSS v4, you can either:

• Use the SCSS preprocessor and reference breakpoint variables, or
• Use the CSS version with the postcss-custom-media workaround described above.