Created
July 21, 2025 11:47
-
-
Save artursopelnik/9dd0b2e5fc405aff53ece32cbe46f653 to your computer and use it in GitHub Desktop.
KfW Designtokens (Penpot) 21.07.2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "Base": { | |
| "Color": { | |
| "Black": { | |
| "$value": "#000000", | |
| "$type": "color" | |
| }, | |
| "White": { | |
| "90": { | |
| "$value": "#ffffffe6", | |
| "$type": "color" | |
| }, | |
| "95": { | |
| "$value": "#fffffff2", | |
| "$type": "color" | |
| }, | |
| "Default": { | |
| "$value": "#ffffff", | |
| "$type": "color" | |
| } | |
| }, | |
| "Blue": { | |
| "100": { | |
| "$value": "#e9f5fb", | |
| "$type": "color" | |
| }, | |
| "400": { | |
| "$value": "#54b3e2", | |
| "$type": "color" | |
| }, | |
| "500": { | |
| "$value": "#007abc", | |
| "$type": "color" | |
| }, | |
| "600": { | |
| "$value": "#005a8c", | |
| "$type": "color" | |
| }, | |
| "700": { | |
| "$value": "#00446e", | |
| "$type": "color" | |
| }, | |
| "800": { | |
| "$value": "#00375b", | |
| "$type": "color" | |
| } | |
| }, | |
| "Green": { | |
| "100": { | |
| "$value": "#ecfded", | |
| "$type": "color" | |
| }, | |
| "300": { | |
| "$value": "#b7f9aa", | |
| "$type": "color" | |
| }, | |
| "400": { | |
| "$value": "#94eb90", | |
| "$type": "color" | |
| }, | |
| "700": { | |
| "$value": "#398357", | |
| "$type": "color" | |
| } | |
| }, | |
| "Gray": { | |
| "50": { | |
| "$value": "#f6f7f8", | |
| "$type": "color" | |
| }, | |
| "100": { | |
| "$value": "#eef0f2", | |
| "$type": "color" | |
| }, | |
| "200": { | |
| "$value": "#d8dfe3", | |
| "$type": "color" | |
| }, | |
| "300": { | |
| "$value": "#a1adb5", | |
| "$type": "color" | |
| }, | |
| "400": { | |
| "$value": "#6d767d", | |
| "$type": "color" | |
| }, | |
| "500": { | |
| "10": { | |
| "$value": "#41484c1a", | |
| "$type": "color" | |
| }, | |
| "30": { | |
| "$value": "#41484c4d", | |
| "$type": "color" | |
| }, | |
| "90": { | |
| "$value": "#41484ce6", | |
| "$type": "color" | |
| }, | |
| "Default": { | |
| "$value": "#41484c", | |
| "$type": "color" | |
| } | |
| }, | |
| "600": { | |
| "$value": "#2d3134", | |
| "$type": "color" | |
| } | |
| }, | |
| "Violet": { | |
| "100": { | |
| "$value": "#ecedfa", | |
| "$type": "color" | |
| }, | |
| "200": { | |
| "$value": "#d0d2f3", | |
| "$type": "color" | |
| }, | |
| "300": { | |
| "$value": "#b6b8eb", | |
| "$type": "color" | |
| }, | |
| "400": { | |
| "$value": "#9598e0", | |
| "$type": "color" | |
| }, | |
| "500": { | |
| "$value": "#686fc8", | |
| "$type": "color" | |
| }, | |
| "600": { | |
| "$value": "#57579c", | |
| "$type": "color" | |
| } | |
| }, | |
| "Red": { | |
| "100": { | |
| "$value": "#ffe9e5", | |
| "$type": "color" | |
| }, | |
| "200": { | |
| "$value": "#ffc7bf", | |
| "$type": "color" | |
| }, | |
| "300": { | |
| "$value": "#fca69c", | |
| "$type": "color" | |
| }, | |
| "400": { | |
| "$value": "#c80538", | |
| "$type": "color" | |
| }, | |
| "500": { | |
| "$value": "#ba5a56", | |
| "$type": "color" | |
| }, | |
| "600": { | |
| "$value": "#934846", | |
| "$type": "color" | |
| } | |
| }, | |
| "Yellow": { | |
| "500": { | |
| "$value": "#eac80b", | |
| "$type": "color" | |
| } | |
| } | |
| }, | |
| "Fontfamily": { | |
| "Sans": { | |
| "$value": "'KfW Centro Sans', Arial, Helvetica Neue, Helvetica, sans-serif", | |
| "$type": "fontFamilies" | |
| }, | |
| "Mono": { | |
| "$value": "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace", | |
| "$type": "fontFamilies" | |
| } | |
| }, | |
| "Space": { | |
| "Static": { | |
| "50": { | |
| "$value": "5px", | |
| "$type": "spacing" | |
| }, | |
| "100": { | |
| "$value": "10px", | |
| "$type": "spacing" | |
| }, | |
| "150": { | |
| "$value": "15px", | |
| "$type": "spacing" | |
| }, | |
| "200": { | |
| "$value": "20px", | |
| "$type": "spacing" | |
| }, | |
| "250": { | |
| "$value": "25px", | |
| "$type": "spacing" | |
| }, | |
| "300": { | |
| "$value": "30px", | |
| "$type": "spacing" | |
| }, | |
| "350": { | |
| "$value": "35px", | |
| "$type": "spacing" | |
| }, | |
| "400": { | |
| "$value": "40px", | |
| "$type": "spacing" | |
| }, | |
| "500": { | |
| "$value": "50px", | |
| "$type": "spacing" | |
| }, | |
| "600": { | |
| "$value": "60px", | |
| "$type": "spacing" | |
| } | |
| } | |
| }, | |
| "Fontsize": { | |
| "Static": { | |
| "Sm": { | |
| "$value": "14px", | |
| "$type": "fontSizes" | |
| }, | |
| "Md": { | |
| "$value": "16px", | |
| "$type": "fontSizes" | |
| }, | |
| "Lg": { | |
| "$value": "18px", | |
| "$type": "fontSizes" | |
| }, | |
| "Xl": { | |
| "$value": "20px", | |
| "$type": "fontSizes" | |
| }, | |
| "2xl": { | |
| "$value": "22px", | |
| "$type": "fontSizes" | |
| }, | |
| "3xl": { | |
| "$value": "24px", | |
| "$type": "fontSizes" | |
| }, | |
| "4xl": { | |
| "$value": "26px", | |
| "$type": "fontSizes" | |
| }, | |
| "5xl": { | |
| "$value": "28px", | |
| "$type": "fontSizes" | |
| }, | |
| "6xl": { | |
| "$value": "30px", | |
| "$type": "fontSizes" | |
| }, | |
| "7xl": { | |
| "$value": "32px", | |
| "$type": "fontSizes" | |
| }, | |
| "8xl": { | |
| "$value": "36px", | |
| "$type": "fontSizes" | |
| } | |
| } | |
| }, | |
| "Lineheight": { | |
| "2xs": { | |
| "$value": "120%", | |
| "$type": "lineHeights" | |
| }, | |
| "Xs": { | |
| "$value": "130%", | |
| "$type": "lineHeights" | |
| }, | |
| "Sm": { | |
| "$value": "133.3%", | |
| "$type": "lineHeights" | |
| }, | |
| "Md": { | |
| "$value": "140%", | |
| "$type": "lineHeights" | |
| }, | |
| "Lg": { | |
| "$value": "150%", | |
| "$type": "lineHeights" | |
| } | |
| }, | |
| "Borderradius": { | |
| "Sm": { | |
| "$value": "2px", | |
| "$type": "borderRadius" | |
| }, | |
| "Md": { | |
| "$value": "4px", | |
| "$type": "borderRadius" | |
| }, | |
| "Lg": { | |
| "$value": "20px", | |
| "$type": "borderRadius" | |
| }, | |
| "Full": { | |
| "$value": "9999px", | |
| "$type": "borderRadius" | |
| } | |
| }, | |
| "Borderwidth": { | |
| "None": { | |
| "$value": "0px", | |
| "$type": "dimension" | |
| }, | |
| "Md": { | |
| "$value": "1px", | |
| "$type": "dimension" | |
| }, | |
| "Lg": { | |
| "$value": "2px", | |
| "$type": "dimension" | |
| } | |
| }, | |
| "Fontweight": { | |
| "Regular": { | |
| "$value": 400, | |
| "$type": "fontWeights" | |
| }, | |
| "Medium": { | |
| "$value": 500, | |
| "$type": "fontWeights" | |
| } | |
| }, | |
| "Letterspacing": { | |
| "Tight": { | |
| "$value": "-0.5px", | |
| "$type": "dimension" | |
| }, | |
| "Normal": { | |
| "$value": "0px", | |
| "$type": "dimension" | |
| }, | |
| "Wide": { | |
| "$value": "0.5px", | |
| "$type": "dimension" | |
| }, | |
| "Wider": { | |
| "$value": "1px", | |
| "$type": "dimension" | |
| } | |
| }, | |
| "Layout": { | |
| "Breakpoint": { | |
| "Xs": { | |
| "$value": "320px", | |
| "$type": "dimension" | |
| }, | |
| "Sm": { | |
| "$value": "600px", | |
| "$type": "dimension" | |
| }, | |
| "Md": { | |
| "$value": "840px", | |
| "$type": "dimension" | |
| }, | |
| "Lg": { | |
| "$value": "960px", | |
| "$type": "dimension" | |
| }, | |
| "Xl": { | |
| "$value": "1280px", | |
| "$type": "dimension" | |
| } | |
| }, | |
| "Container": { | |
| "Sm": { | |
| "$value": "896px", | |
| "$type": "dimension" | |
| }, | |
| "Md": { | |
| "$value": "1080px", | |
| "$type": "dimension" | |
| }, | |
| "Lg": { | |
| "$value": "1280px", | |
| "$type": "dimension" | |
| } | |
| }, | |
| "Safezone": { | |
| "Static": { | |
| "Md": { | |
| "$value": "20px", | |
| "$type": "dimension" | |
| }, | |
| "Lg": { | |
| "$value": "40px", | |
| "$type": "dimension" | |
| } | |
| } | |
| }, | |
| "Gridcolumn": { | |
| "1": { | |
| "$value": 1, | |
| "$type": "number" | |
| }, | |
| "2": { | |
| "$value": 2, | |
| "$type": "number" | |
| }, | |
| "3": { | |
| "$value": 3, | |
| "$type": "number" | |
| }, | |
| "4": { | |
| "$value": 4, | |
| "$type": "number" | |
| }, | |
| "6": { | |
| "$value": 6, | |
| "$type": "number" | |
| }, | |
| "8": { | |
| "$value": 8, | |
| "$type": "number" | |
| }, | |
| "12": { | |
| "$value": 12, | |
| "$type": "number" | |
| } | |
| }, | |
| "Gridgap": { | |
| "Static": { | |
| "Xs": { | |
| "$value": "12px", | |
| "$type": "dimension" | |
| }, | |
| "Sm": { | |
| "$value": "18px", | |
| "$type": "dimension" | |
| }, | |
| "Md": { | |
| "$value": "22px", | |
| "$type": "dimension" | |
| }, | |
| "Lg": { | |
| "$value": "26px", | |
| "$type": "dimension" | |
| }, | |
| "Xl": { | |
| "$value": "36px", | |
| "$type": "dimension" | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| "Semantic": { | |
| "Color": { | |
| "Primary": { | |
| "$value": "#005a8c", | |
| "$type": "color" | |
| }, | |
| "Primary-active": { | |
| "$value": "#00446e", | |
| "$type": "color" | |
| }, | |
| "Accent": { | |
| "$value": "#b7f9aa", | |
| "$type": "color" | |
| }, | |
| "Warning": { | |
| "$value": "#9598e0", | |
| "$type": "color" | |
| }, | |
| "Text": { | |
| "Default": { | |
| "$value": "#2d3134", | |
| "$type": "color" | |
| }, | |
| "Link": { | |
| "$value": "#005a8c", | |
| "$type": "color" | |
| }, | |
| "Link-hover": { | |
| "$value": "#00446e", | |
| "$type": "color" | |
| }, | |
| "On-primary": { | |
| "$value": "#ffffff", | |
| "$type": "color" | |
| }, | |
| "On-disabled": { | |
| "$value": "#ffffff", | |
| "$type": "color" | |
| }, | |
| "On-dark-bg": { | |
| "$value": "#ffffff", | |
| "$type": "color" | |
| }, | |
| "Danger": { | |
| "$value": "#c80538", | |
| "$type": "color" | |
| }, | |
| "Success": { | |
| "$value": "#398357", | |
| "$type": "color" | |
| } | |
| }, | |
| "Status": { | |
| "Red": { | |
| "$value": "#c80538", | |
| "$type": "color" | |
| }, | |
| "Green": { | |
| "$value": "#398357", | |
| "$type": "color" | |
| }, | |
| "Yellow": { | |
| "$value": "#eac80b", | |
| "$type": "color" | |
| } | |
| }, | |
| "Opaque": { | |
| "White": { | |
| "$value": "#ffffff", | |
| "$type": "color" | |
| }, | |
| "White-90": { | |
| "$value": "#ffffffe6", | |
| "$type": "color" | |
| }, | |
| "White-95": { | |
| "$value": "#fffffff2", | |
| "$type": "color" | |
| }, | |
| "Gray-500": { | |
| "$value": "#41484c", | |
| "$type": "color" | |
| }, | |
| "Gray-500-10": { | |
| "$value": "#41484c1a", | |
| "$type": "color" | |
| }, | |
| "Gray-500-30": { | |
| "$value": "#41484c4d", | |
| "$type": "color" | |
| }, | |
| "Gray-500-90": { | |
| "$value": "#41484ce6", | |
| "$type": "color" | |
| } | |
| }, | |
| "Background": { | |
| "Default": { | |
| "$value": "#ffffff", | |
| "$type": "color" | |
| }, | |
| "Subtle": { | |
| "$value": "#f6f7f8", | |
| "$type": "color" | |
| }, | |
| "Disabled": { | |
| "$value": "#a1adb5", | |
| "$type": "color" | |
| }, | |
| "Light-blue": { | |
| "$value": "#e9f5fb", | |
| "$type": "color" | |
| }, | |
| "Light-green": { | |
| "$value": "#ecfded", | |
| "$type": "color" | |
| }, | |
| "Dark-blue": { | |
| "$value": "#00375b", | |
| "$type": "color" | |
| }, | |
| "Dark-green": { | |
| "$value": "#398357", | |
| "$type": "color" | |
| } | |
| }, | |
| "Border": { | |
| "Default": { | |
| "$value": "#a1adb5", | |
| "$type": "color" | |
| } | |
| }, | |
| "Icon": { | |
| "Default": { | |
| "$value": "#005a8c", | |
| "$type": "color" | |
| }, | |
| "Secondary": { | |
| "$value": "#54b3e2", | |
| "$type": "color" | |
| }, | |
| "Disabled": { | |
| "$value": "#398357", | |
| "$type": "color" | |
| }, | |
| "Disabled-secondary": { | |
| "$value": "#94eb90", | |
| "$type": "color" | |
| } | |
| }, | |
| "Line": { | |
| "6": { | |
| "$value": "#00446e", | |
| "$type": "color" | |
| }, | |
| "7": { | |
| "$value": "#2d3134", | |
| "$type": "color" | |
| }, | |
| "8": { | |
| "$value": "#a1adb5", | |
| "$type": "color" | |
| }, | |
| "9": { | |
| "$value": "#005a8c", | |
| "$type": "color" | |
| }, | |
| "10": { | |
| "$value": "#2d3134", | |
| "$type": "color" | |
| }, | |
| "11": { | |
| "$value": "#b7f9aa", | |
| "$type": "color" | |
| }, | |
| "12": { | |
| "$value": "#a1adb5", | |
| "$type": "color" | |
| } | |
| }, | |
| "Product": { | |
| "Container": { | |
| "$value": "#f6f7f8", | |
| "$type": "color" | |
| }, | |
| "Benefit": { | |
| "$value": "#007abc", | |
| "$type": "color" | |
| }, | |
| "Credit": { | |
| "$value": "#398357", | |
| "$type": "color" | |
| }, | |
| "Cooperation": { | |
| "$value": "#686fc8", | |
| "$type": "color" | |
| }, | |
| "Credit-benefit": { | |
| "$value": "#41484c", | |
| "$type": "color" | |
| } | |
| } | |
| }, | |
| "Fontfamily": { | |
| "Default": { | |
| "$value": "'KfW Centro Sans', Arial, Helvetica Neue, Helvetica, sans-serif", | |
| "$type": "fontFamilies" | |
| }, | |
| "Code": { | |
| "$value": "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace", | |
| "$type": "fontFamilies" | |
| } | |
| }, | |
| "Space": { | |
| "Xsmall": { | |
| "$value": "10px", | |
| "$type": "spacing" | |
| }, | |
| "Small": { | |
| "$value": "20px", | |
| "$type": "spacing" | |
| }, | |
| "Medium": { | |
| "$value": "30px", | |
| "$type": "spacing" | |
| }, | |
| "Large": { | |
| "Min": { | |
| "$value": "35px", | |
| "$type": "spacing" | |
| }, | |
| "Max": { | |
| "$value": "40px", | |
| "$type": "spacing" | |
| }, | |
| "Val": { | |
| "$value": "33.333px", | |
| "$type": "spacing" | |
| } | |
| }, | |
| "Big": { | |
| "Min": { | |
| "$value": "50px", | |
| "$type": "spacing" | |
| }, | |
| "Max": { | |
| "$value": "60px", | |
| "$type": "spacing" | |
| }, | |
| "Val": { | |
| "$value": "46.666px", | |
| "$type": "spacing" | |
| } | |
| } | |
| }, | |
| "Fontspace": { | |
| "Default": { | |
| "$value": "20px", | |
| "$type": "dimension" | |
| }, | |
| "Introduction": { | |
| "$value": "20px", | |
| "$type": "dimension" | |
| }, | |
| "Small": { | |
| "$value": "5px", | |
| "$type": "dimension" | |
| }, | |
| "Heading-1": { | |
| "$value": "20px", | |
| "$type": "dimension" | |
| }, | |
| "Heading-2": { | |
| "$value": "20px", | |
| "$type": "dimension" | |
| }, | |
| "Heading-3": { | |
| "$value": "10px", | |
| "$type": "dimension" | |
| }, | |
| "Heading-4": { | |
| "$value": "10px", | |
| "$type": "dimension" | |
| }, | |
| "Heading-5": { | |
| "$value": "10px", | |
| "$type": "dimension" | |
| }, | |
| "Heading-6": { | |
| "$value": "20px", | |
| "$type": "dimension" | |
| } | |
| }, | |
| "Fontsize": { | |
| "Default": { | |
| "$value": "16px", | |
| "$type": "fontSizes" | |
| }, | |
| "Introduction": { | |
| "$value": "20px", | |
| "$type": "fontSizes" | |
| }, | |
| "Small": { | |
| "$value": "14px", | |
| "$type": "fontSizes" | |
| }, | |
| "Heading-1": { | |
| "Min": { | |
| "$value": "30px", | |
| "$type": "fontSizes" | |
| }, | |
| "Max": { | |
| "$value": "36px", | |
| "$type": "fontSizes" | |
| }, | |
| "Val": { | |
| "$value": "28px", | |
| "$type": "fontSizes" | |
| } | |
| }, | |
| "Heading-2": { | |
| "Min": { | |
| "$value": "28px", | |
| "$type": "fontSizes" | |
| }, | |
| "Max": { | |
| "$value": "32px", | |
| "$type": "fontSizes" | |
| }, | |
| "Val": { | |
| "$value": "26.666px", | |
| "$type": "fontSizes" | |
| } | |
| }, | |
| "Heading-3": { | |
| "Min": { | |
| "$value": "24px", | |
| "$type": "fontSizes" | |
| }, | |
| "Max": { | |
| "$value": "26px", | |
| "$type": "fontSizes" | |
| }, | |
| "Val": { | |
| "$value": "23.333px", | |
| "$type": "fontSizes" | |
| } | |
| }, | |
| "Heading-4": { | |
| "Min": { | |
| "$value": "20px", | |
| "$type": "fontSizes" | |
| }, | |
| "Max": { | |
| "$value": "22px", | |
| "$type": "fontSizes" | |
| }, | |
| "Val": { | |
| "$value": "19.333px", | |
| "$type": "fontSizes" | |
| } | |
| }, | |
| "Heading-5": { | |
| "$value": "18px", | |
| "$type": "fontSizes" | |
| }, | |
| "Heading-6": { | |
| "$value": "16px", | |
| "$type": "fontSizes" | |
| } | |
| }, | |
| "Lineheight": { | |
| "Default": { | |
| "$value": "140%", | |
| "$type": "lineHeights" | |
| }, | |
| "List": { | |
| "$value": "150%", | |
| "$type": "lineHeights" | |
| }, | |
| "Heading": { | |
| "$value": "130%", | |
| "$type": "lineHeights" | |
| }, | |
| "Heading-5": { | |
| "$value": "133.3%", | |
| "$type": "lineHeights" | |
| } | |
| }, | |
| "Borderradius": { | |
| "$value": "4px", | |
| "$type": "borderRadius" | |
| }, | |
| "Focusring": { | |
| "Outline": { | |
| "$value": { | |
| "color": "#00446e", | |
| "width": "2px", | |
| "style": "dashed" | |
| }, | |
| "$type": "border" | |
| }, | |
| "Outline-offset": { | |
| "$value": "2px", | |
| "$type": "dimension" | |
| } | |
| }, | |
| "Fontweight": { | |
| "Default": { | |
| "$value": 400, | |
| "$type": "fontWeights" | |
| }, | |
| "Heading": { | |
| "$value": 500, | |
| "$type": "fontWeights" | |
| } | |
| }, | |
| "Breakpoint": { | |
| "Mobile": { | |
| "$value": "600px", | |
| "$type": "dimension" | |
| }, | |
| "Tablet": { | |
| "$value": "840px", | |
| "$type": "dimension" | |
| }, | |
| "Desktop": { | |
| "$value": "960px", | |
| "$type": "dimension" | |
| } | |
| }, | |
| "Contentwrapper": { | |
| "Narrow": { | |
| "$value": "896px", | |
| "$type": "dimension" | |
| }, | |
| "Basic": { | |
| "$value": "1080px", | |
| "$type": "dimension" | |
| }, | |
| "Extended": { | |
| "$value": "1280px", | |
| "$type": "dimension" | |
| } | |
| }, | |
| "Safezone": { | |
| "Min": { | |
| "$value": "20px" | |
| }, | |
| "Max": { | |
| "$value": "40px" | |
| }, | |
| "Val": { | |
| "$value": "-13.333px" | |
| } | |
| } | |
| }, | |
| "$metadata": { | |
| "tokenSetOrder": [ | |
| "Base", | |
| "Semantic" | |
| ] | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment