Luftaufnahme der Zentrale der KfW Bankengruppe in Frankfurt am Main
Welcome to KfW!

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.

Color

Functional colors

Interaction state

Text

Background

Opaque

State

Status

Line

Product

Icon

Base colors

White

Black

Blue

Green

Gray

Yellow

Red

Violet

Transparent

Typography

Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget efficitur feugiat. Vivamus porta nunc a erat mattis, mattis feugiat turpis pretium. Quisque sed tristique felis. Aliquam lobortis vitae nibh nec rhoncus.

Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget efficitur feugiat. Vivamus porta nunc a erat mattis, mattis feugiat turpis pretium. Quisque sed tristique felis.

"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
- Phasellus eget lacinia

Lists

BP, BP2

Bullet list

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
  • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
  • Lorem ipsum dolor sit amet.
LIST_0

Default

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
LIST_1

Numbered list

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
  3. Lorem ipsum dolor sit amet
    1. Lorem ipsum dolor sit amet
    2. Lorem ipsum dolor sit amet
    3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  4. Lorem ipsum dolor sit amet.
LIST_2

Alphabetical list

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
  3. Lorem ipsum dolor sit amet
    1. Lorem ipsum dolor sit amet
    2. Lorem ipsum dolor sit amet
    3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  4. Lorem ipsum dolor sit amet.
LIST_3

Checklist

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
  • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  • Lorem ipsum dolor sit amet.
LIST_4

Alphabetical caps list

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
  4. Lorem ipsum dolor sit amet
    1. Lorem ipsum dolor sit amet
    2. Lorem ipsum dolor sit amet
    3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  5. Lorem ipsum dolor sit amet.
LIST_5

Checklist big

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
LIST_6

Icon list

  • Lorem ipsum door sit amet
  • Lorem ipsum door sit amet
  • Lorem ipsum door sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
  • Lorem ipsum door sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
  • Lorem ipsum door sit amet

Inline text elements

Link

Small Link

Large Link

Bold

Italic

Underline

Deleted

Inserted

Strikethrough

Small

Text Sub

Text Sup

Abbr.

Kbd

Highlighted


Tagline

Headline 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloribus, fuga natus nesciunt nisi odit, possimus repudiandae saepe tempora totam voluptatem voluptates. Accusantium ducimus error hic officiis omnis reiciendis, veritatis.

Headline 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dolore eligendi, explicabo, iure magnam molestiae natus non placeat possimus quaerat, quam quia quo quod quos rerum saepe sequi tempora vero.

Headline 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dolore eligendi, explicabo, iure magnam molestiae natus non placeat possimus quaerat, quam quia quo quod quos rerum saepe sequi tempora vero.

Headline 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dolore eligendi, explicabo, iure magnam molestiae natus non placeat possimus quaerat, quam quia quo quod quos rerum saepe sequi tempora vero.

Headline 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dolore eligendi, explicabo, iure magnam molestiae natus non placeat possimus quaerat, quam quia quo quod quos rerum saepe sequi tempora vero.

Headline 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dolore eligendi, explicabo, iure magnam molestiae natus non placeat possimus quaerat, quam quia quo quod quos rerum saepe sequi tempora vero.

Luftaufnahme der Zentrale der KfW Bankengruppe in Frankfurt am Main
Image from unsplash.com

Buttons

Secondary Button

Tertiary Button

Variant Negative

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis cum harum, impedit molestiae non nulla similique At enim exercitationem, explicabo labore magnam modi quod, repellat reprehenderit sed sunt totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Primary Button

Secondary Button

Tertiary Button

Form elements

Curabitur consequat lacus at lacus porta finibus.
Your Files File Size Action
Uploading.jpeg 1.35 MB
Successfully_Uploaded.jpeg 765.82 KB
The upload of the file has failed.
Successfully_Uploaded-final-final2.jpeg 765.82 KB
Please fill out this field.
Radio buttons
Please fill out this field.
Checkboxes
Please fill out this field.

Table

# Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell
4 Cell Cell Cell Cell Cell Cell Cell
5 Cell Cell Cell Cell Cell Cell Cell