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 logo@kfw.de.

KfW Design Tokens is the source of truth for designing KfW-branded digital products.

The tokens follow the W3C DTCG format.

Table of Contents

• Getting Started
• FAQ
• Contributing
• License

🚀 Getting Started

For designers

• Download the prebuilt CSS or Figma/Penpot-compatible token files from the /output directory.
• Import them directly into your project or design tool. For Figma use Token Forge

For developers

1. Install the package

npm install -D @openkfw/design-tokens

2. Import tokens in your CSS

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

3. Use design tokens

.cta {
  background-color: var(--kfw-color-fn);
  font-size: var(--kfw-fontsize);
  border-radius: var(--kfw-borderradius-small);
  padding-block: var(--kfw-base-space-static-20); /* use base tokens (primitives) only for a new functional case */
}

4. Use the prebuilt demo (CSS boilerplate) (optional):

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

💁 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.

In certain situations, min and max values are not sufficient—for example, if you need fixed font sizes for mobile, tablet, and desktop (i.e., more than two breakpoints), or when using relative properties like word-spacing, letter-spacing or line-height that do not work well with clamp. In these cases, use traditional media queries:

h1 {
  font-size: var(--kfw-base-fontsize-sm);
  line-height: var(--kfw-lineheight);
}

@media (--kfw-breakpoint-tablet) {
  h1 {
    font-size: var(--kfw-base-fontsize-md);
  }
}

@media (--kfw-breakpoint-desktop) {
  h1 {
    font-size: var(--kfw-base-fontsize-lg);
  }
}

The fluid values are calculated using the Fluid Type Scale Calculator based on the KfW breakpoints.

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.

How to use design tokens in Figma?

Currently, Figma does not natively support importing W3C design tokens. Therefore, we export our design tokens into a Figma-compatible format, inspired by the approach used in the "Token Studio" plugin.

Although the Token Studio plugin offers various features, it is not required and some of its functionality comes with a cost. As an alternative, you can use the free plugin Token Forge, which allows you to easily import our design tokens in the Figma-compatible format and use them as Figma variables.

❤️ 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) 2026 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.