design-tokens.tokens.json

{"sizes":{"32":{"description":"32.72px spacer component","value":32.72,"type":"dimension","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"size"}}},"40":{"description":null,"value":40,"type":"dimension","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"size"}}},"60":{"description":null,"value":60,"type":"dimension","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"size"}}},"80":{"description":null,"value":80,"type":"dimension","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"size"}}},"plain token":{"description":null,"value":200,"type":"dimension","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"size"}}},"token in frame":{"description":null,"value":200,"type":"dimension","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"size"}}},"token in group":{"description":null,"value":200,"type":"dimension","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"size"}}},"in variant 60":{"description":null,"value":60,"type":"dimension","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"size"}}},"in variant 90":{"description":null,"value":90,"type":"dimension","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"size"}}},"in variant 120":{"description":null,"value":120,"type":"dimension","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"size"}}},"frame":{"description":null,"value":32,"type":"dimension","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"size"}}},"rect":{"description":null,"value":32,"type":"dimension","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"size"}}},"shape in component":{"description":"Should use 32px not 20 from inside shape","value":32,"type":"dimension","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"size"}}}},"breakpoints":{"lg":{"description":null,"value":1280,"type":"dimension","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"breakpoint"}}},"sm":{"description":null,"value":768,"type":"dimension","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"breakpoint"}}},"md":{"description":null,"value":1024,"type":"dimension","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"breakpoint"}}}},"spacing":{"10":{"description":null,"type":"custom-spacing","value":{"top":10,"bottom":10,"left":10,"right":10},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"spacing"}}},"mixed":{"description":null,"type":"custom-spacing","value":{"top":10,"bottom":30,"left":20,"right":20},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"spacing"}}},"top":{"description":null,"type":"custom-spacing","value":{"top":10,"bottom":0,"left":0,"right":0},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"spacing"}}}},"borders":{"single":{"description":null,"type":"custom-stroke","value":{"align":"inside","dashPattern":[0,0],"lineCap":"none","lineJoin":"miter","miterLimit":4,"weight":5,"color":"#000000ff"},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"border"}}},"dashed outside":{"description":null,"type":"custom-stroke","value":{"align":"outside","dashPattern":[5,5,3,3],"lineCap":"none","lineJoin":"miter","miterLimit":4,"weight":5,"color":"#000000ff"},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"border"}}},"single (style)":{"description":null,"type":"custom-stroke","value":{"align":"inside","dashPattern":[0,0],"lineCap":"none","lineJoin":"miter","miterLimit":4,"weight":5,"color":"#044affff"},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"border"}}},"unsupported":{"multiple borders":{"description":null,"type":"custom-stroke","value":{"align":"inside","dashPattern":[5,10],"lineCap":"none","lineJoin":"miter","miterLimit":4,"weight":5,"color":"#ffe600ff"},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"border"}}}}},"radius":{"5":{"description":null,"type":"custom-radius","value":{"smoothing":0,"topLeft":5,"topRight":5,"bottomLeft":5,"bottomRight":5},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"radius"}}}},"radii":{"smoothing":{"description":null,"type":"custom-radius","value":{"smoothing":0.75,"topLeft":10,"topRight":10,"bottomLeft":10,"bottomRight":10},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"radius"}}},"mixed":{"description":null,"type":"custom-radius","value":{"smoothing":0,"topLeft":5.5,"topRight":10,"bottomLeft":20,"bottomRight":15},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"radius"}}}},"motion":{"move in":{"description":null,"type":"custom-transition","value":{"transitionType":"move_in","duration":0.5,"direction":"left","easingType":"cubicBezier","easingFunction":{"x1":0.41999998688697815,"x2":1,"y1":0,"y2":1}},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"motion"}}},"dissolve":{"description":null,"type":"custom-transition","value":{"transitionType":"dissolve","duration":0.45,"easingType":"cubicBezier","easingFunction":{"x1":0.6968395709991455,"x2":0.06683959811925888,"y1":0.052326660603284836,"y2":0.9323266744613647}},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"motion"}}},"smart":{"description":null,"type":"custom-transition","value":{"transitionType":"smart_animate","duration":0.5,"easingType":"cubicBezier","easingFunction":{"x1":0,"x2":1,"y1":0,"y2":1}},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"motion"}}},"push":{"description":null,"type":"custom-transition","value":{"transitionType":"push","duration":0.5,"direction":"left","easingType":"cubicBezier","easingFunction":{"x1":0.30000001192092896,"x2":0.699999988079071,"y1":-0.05000000074505806,"y2":-0.5}},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"motion"}}},"bouncy":{"description":null,"type":"custom-transition","value":{"transitionType":"push","duration":0.958,"direction":"left","easingType":"spring","easingFunction":{"mass":1,"stiffness":600,"damping":15}},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"motion"}}},"custom spring":{"description":null,"type":"custom-transition","value":{"transitionType":"push","duration":0.744,"direction":"left","easingType":"spring","easingFunction":{"mass":1,"stiffness":300,"damping":20}},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"motion"}}}},"opacities":{"0.25":{"description":null,"value":0.25,"type":"custom-opacity","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"opacity"}}}},"opacity":{"full":{"description":null,"value":1,"type":"custom-opacity","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"opacity"}}},"half":{"description":null,"value":0.5,"type":"custom-opacity","extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"opacity"}}}},"gradient":{"gradient":{"single with multiple color stops":{"description":"Four color stops from yellow to red","type":"custom-gradient","value":{"gradientType":"radial","rotation":180,"stops":[{"position":0,"color":"#ffb800ff"},{"position":0.34,"color":"#ff8a00ff"},{"position":0.65,"color":"#ff2e00ff"},{"position":1,"color":"#ff0000ff"}]},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:86b7ea8e4f88825c7ab660ae5f7cbbadfe6eb72f,","exportKey":"gradient"}}},"multiplegrad":{"0":{"type":"custom-gradient","value":{"gradientType":"linear","rotation":180,"stops":[{"position":0,"color":"#ffb800ff"},{"position":1,"color":"#ffb80000"}]}},"1":{"type":"custom-gradient","value":{"gradientType":"radial","rotation":180,"stops":[{"position":0,"color":"#ffffffff"},{"position":1,"color":"#ffffff00"}]}},"2":{"type":"custom-gradient","value":{"gradientType":"angular","rotation":180,"stops":[{"position":0,"color":"#cf3030ff"},{"position":1,"color":"#ffffff00"}]}},"3":{"type":"custom-gradient","value":{"gradientType":"diamond","rotation":180,"stops":[{"position":0,"color":"#4a4fccff"},{"position":0.23,"color":"#ffffff00"}]}},"description":"","extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:8ecc948b0d4487a6c702db3a947317e19be8fe7c,","exportKey":"gradient"}}}}},"color":{"colors":{"semi red":{"description":"A red with a 50% opacity","type":"color","value":"#ff5f0480","blendMode":"normal","extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:73ee61b85a05b803a735041e06d604cf5b5e396c,","exportKey":"color"}}},"multiple fills":{"0":{"type":"color","value":"#40ffbaff","blendMode":"normal"},"1":{"type":"color","value":"#0000001a","blendMode":"normal"},"description":"","extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:4a3029d323d8fb0c05dee39a983dafea20d7221e,","exportKey":"color"}}},"single blue":{"description":"","type":"color","value":"#044affff","blendMode":"normal","extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:41c3b1bbb20c349db5198426c9f21eee91270703,","exportKey":"color"}}},"ref blue":{"description":"Some other description","type":"color","value":"{color.colors.single blue}","blendMode":"normal","extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:a466a5c4f753617558885425bf0c42b7a53fcda4,","exportKey":"color","alias":"color.colors.single blue"}}},"empty":{"description":"","type":"color","value":"#00000000","blendMode":"normal","extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:5e1d174ea8c7f59af7d8eeb52856a48cfe285856,","exportKey":"color"}}},"special characters":{"😅":{"description":"Emoji","type":"color","value":"#40df50ff","blendMode":"normal","extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:0eca3633c52956ddb97940c7445007a90b937be1,","exportKey":"color"}}},"änderung":{"description":"","type":"color","value":"#3456afff","blendMode":"normal","extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:79e9a7afce7078dc29994d2791959ebf9f45efa5,","exportKey":"color"}}}}}},"grid":{"multiple":{"0":{"type":"custom-grid","value":{"pattern":"columns","sectionSize":1,"gutterSize":20,"alignment":"max","count":7,"offset":3}},"1":{"type":"custom-grid","value":{"pattern":"columns","sectionSize":12,"gutterSize":20,"alignment":"center","count":6}},"2":{"type":"custom-grid","value":{"pattern":"columns","gutterSize":20,"alignment":"stretch","count":5,"offset":10}},"3":{"type":"custom-grid","value":{"pattern":"columns","sectionSize":34,"gutterSize":20,"alignment":"min","count":4,"offset":13}},"4":{"type":"custom-grid","value":{"pattern":"rows","sectionSize":8,"gutterSize":20,"alignment":"max","count":5,"offset":10}},"5":{"type":"custom-grid","value":{"pattern":"rows","sectionSize":8,"gutterSize":10,"alignment":"center","count":4}},"6":{"type":"custom-grid","value":{"pattern":"rows","sectionSize":8,"gutterSize":20,"alignment":"min","count":3,"offset":10}},"7":{"type":"custom-grid","value":{"pattern":"grid","sectionSize":8}},"description":"Grid / multiple description text","extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:9431d2997261a6e36216749d0d5927407d95c07f,","exportKey":"grid"}}},"single":{"description":null,"type":"custom-grid","value":{"pattern":"columns","sectionSize":11,"gutterSize":20,"alignment":"center","count":5},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:8892f13476c0db3092e552a57f31a286640fc9d5,","exportKey":"grid"}}}},"font":{"body":{"h3":{"description":"Comment for text style","type":"custom-fontStyle","value":{"fontSize":20,"textDecoration":"none","fontFamily":"Akzidenz-Grotesk Pro","fontWeight":700,"fontStyle":"normal","fontStretch":"condensed","letterSpacing":0.4,"lineHeight":32,"paragraphIndent":5,"paragraphSpacing":8,"textCase":"uppercase"},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:a63c53704c21e63e557974232108ecd0ef16f3e2,","exportKey":"font"}}},"h4 strike through":{"description":"With stylisitc options","type":"custom-fontStyle","value":{"fontSize":16,"textDecoration":"line-through","fontFamily":"Roboto","fontWeight":500,"fontStyle":"italic","fontStretch":"normal","letterSpacing":0,"lineHeight":19.2,"paragraphIndent":0,"paragraphSpacing":0,"textCase":"none"},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:c9389cf45c1db49fd46f961809ca352488397f7d,","exportKey":"font"}}},"italic":{"type":"custom-fontStyle","value":{"fontSize":12,"textDecoration":"none","fontFamily":"Roboto","fontWeight":400,"fontStyle":"italic","fontStretch":"normal","letterSpacing":0,"lineHeight":14,"paragraphIndent":0,"paragraphSpacing":0,"textCase":"none"},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:9928779749ba4b821d81880d1e41ccefd2b76951,","exportKey":"font"}}},"extra bold condensed italic":{"type":"custom-fontStyle","value":{"fontSize":12,"textDecoration":"none","fontFamily":"Akzidenz-Grotesk Pro","fontWeight":800,"fontStyle":"italic","fontStretch":"condensed","letterSpacing":0,"lineHeight":14.4,"paragraphIndent":0,"paragraphSpacing":0,"textCase":"none"},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:2eab5c798e7b6de010927c757b69f3d605097439,","exportKey":"font"}}},"medium extended italic":{"type":"custom-fontStyle","value":{"fontSize":20,"textDecoration":"none","fontFamily":"Akzidenz-Grotesk Pro","fontWeight":500,"fontStyle":"italic","fontStretch":"expanded","letterSpacing":0,"lineHeight":24,"paragraphIndent":0,"paragraphSpacing":0,"textCase":"none"},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:65286eb024a509b4cfaef329affbae773fb73a5e,","exportKey":"font"}}},"super":{"type":"custom-fontStyle","value":{"fontSize":22,"textDecoration":"none","fontFamily":"Akzidenz-Grotesk Pro","fontWeight":900,"fontStyle":"normal","fontStretch":"normal","letterSpacing":0,"lineHeight":26.4,"paragraphIndent":0,"paragraphSpacing":0,"textCase":"none"},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:32eb85f3238ccaa59c15d6de911c57afa96ba58a,","exportKey":"font"}}}}},"effect":{"drop shadow (single)":{"description":"Drop shadow single description","type":"custom-shadow","value":{"shadowType":"dropShadow","radius":4,"color":"#00000040","offsetX":0,"offsetY":4,"spread":0},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:cef90a92a0f669207251e8e2da214b6393abc44c,","exportKey":"effect"}}},"inner shadow (multiple)":{"0":{"type":"custom-shadow","value":{"shadowType":"innerShadow","radius":4,"color":"#00000040","offsetX":0,"offsetY":4,"spread":0}},"1":{"type":"custom-shadow","value":{"shadowType":"innerShadow","radius":1,"color":"#000000ff","offsetX":10,"offsetY":100,"spread":0.5}},"2":{"type":"custom-shadow","value":{"shadowType":"innerShadow","radius":3,"color":"#00000040","offsetX":-4,"offsetY":2,"spread":11}},"description":null,"extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:23c7adc38dc6cf8e157c05f8885409d3e1cf4de2,","exportKey":"effect"}}},"layer blur":{"description":null,"extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:8a600422767982ef9e712451bb9f60a9d2c0e04f,","exportKey":"effect"}}},"background blur":{"description":null,"extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:d9246d6c5234e471b17585324379ec19abcf03f4,","exportKey":"effect"}}}},"typography":{"body":{"h3":{"description":"Comment for text style","fontSize":{"type":"dimension","value":20},"textDecoration":{"type":"string","value":"none"},"fontFamily":{"type":"string","value":"Akzidenz-Grotesk Pro"},"fontWeight":{"type":"number","value":700},"fontStyle":{"type":"string","value":"normal"},"fontStretch":{"type":"string","value":"condensed"},"letterSpacing":{"type":"dimension","value":0.4},"lineHeight":{"type":"dimension","value":32},"paragraphIndent":{"type":"dimension","value":5},"paragraphSpacing":{"type":"dimension","value":8},"textCase":{"type":"string","value":"uppercase"}},"h4 strike through":{"description":"With stylisitc options","fontSize":{"type":"dimension","value":16},"textDecoration":{"type":"string","value":"line-through"},"fontFamily":{"type":"string","value":"Roboto"},"fontWeight":{"type":"number","value":500},"fontStyle":{"type":"string","value":"italic"},"fontStretch":{"type":"string","value":"normal"},"letterSpacing":{"type":"dimension","value":0},"lineHeight":{"type":"dimension","value":19.2},"paragraphIndent":{"type":"dimension","value":0},"paragraphSpacing":{"type":"dimension","value":0},"textCase":{"type":"string","value":"none"}},"italic":{"fontSize":{"type":"dimension","value":12},"textDecoration":{"type":"string","value":"none"},"fontFamily":{"type":"string","value":"Roboto"},"fontWeight":{"type":"number","value":400},"fontStyle":{"type":"string","value":"italic"},"fontStretch":{"type":"string","value":"normal"},"letterSpacing":{"type":"dimension","value":0},"lineHeight":{"type":"dimension","value":14},"paragraphIndent":{"type":"dimension","value":0},"paragraphSpacing":{"type":"dimension","value":0},"textCase":{"type":"string","value":"none"}},"extra bold condensed italic":{"fontSize":{"type":"dimension","value":12},"textDecoration":{"type":"string","value":"none"},"fontFamily":{"type":"string","value":"Akzidenz-Grotesk Pro"},"fontWeight":{"type":"number","value":800},"fontStyle":{"type":"string","value":"italic"},"fontStretch":{"type":"string","value":"condensed"},"letterSpacing":{"type":"dimension","value":0},"lineHeight":{"type":"dimension","value":14.4},"paragraphIndent":{"type":"dimension","value":0},"paragraphSpacing":{"type":"dimension","value":0},"textCase":{"type":"string","value":"none"}},"medium extended italic":{"fontSize":{"type":"dimension","value":20},"textDecoration":{"type":"string","value":"none"},"fontFamily":{"type":"string","value":"Akzidenz-Grotesk Pro"},"fontWeight":{"type":"number","value":500},"fontStyle":{"type":"string","value":"italic"},"fontStretch":{"type":"string","value":"expanded"},"letterSpacing":{"type":"dimension","value":0},"lineHeight":{"type":"dimension","value":24},"paragraphIndent":{"type":"dimension","value":0},"paragraphSpacing":{"type":"dimension","value":0},"textCase":{"type":"string","value":"none"}},"super":{"fontSize":{"type":"dimension","value":22},"textDecoration":{"type":"string","value":"none"},"fontFamily":{"type":"string","value":"Akzidenz-Grotesk Pro"},"fontWeight":{"type":"number","value":900},"fontStyle":{"type":"string","value":"normal"},"fontStretch":{"type":"string","value":"normal"},"letterSpacing":{"type":"dimension","value":0},"lineHeight":{"type":"dimension","value":26.4},"paragraphIndent":{"type":"dimension","value":0},"paragraphSpacing":{"type":"dimension","value":0},"textCase":{"type":"string","value":"none"}}}}}