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":{"slide":{"description":null,"type":"custom-transition","value":{"transitionType":"smart_animate","duration":0.3,"easingType":"cubicBezier","easingFunction":{"x1":0,"x2":1,"y1":0,"y2":1}},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"exportKey":"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:0717b063f220ad7314ecd55040eace1bbff62205,","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:a61dfc0bce1e2ad33ad899091843aa36554e1a3f,","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:e0c203ec5e6bae4a3c286f89a84b5759a1606449,","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:9028fedeb4c34432c5cbe2764036d26028c27e85,","exportKey":"color"}}},"single blue":{"description":"","type":"color","value":"#044affff","blendMode":"normal","extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:59eab2325e17d14ad1119310c564f44a2c0b0d78,","exportKey":"color"}}},"ref blue":{"description":"Some other description","type":"color","value":"{color.colors.single blue}","blendMode":"normal","extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:e87d43c95355d9d04e878b05c8b600096f8357d8,","exportKey":"color","alias":"color.colors.single blue"}}},"empty":{"description":"","type":"color","value":"#00000000","blendMode":"normal","extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:3e58527d65c086392dd39897afe49c49f6164d3a,","exportKey":"color"}}},"special characters":{"😅":{"description":"Emoji","type":"color","value":"#40df50ff","blendMode":"normal","extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:8499cb1a9450d897626915c8c042151b47b03f16,","exportKey":"color"}}},"änderung":{"description":"","type":"color","value":"#3456afff","blendMode":"normal","extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:ac53cbace076a2cbfeb9e756e03ed2a40b015140,","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:e116165c531727dc01b134f4e8e1e568ee457dee,","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:ce0d39d78fdc79fce09ec72c2be791da629fd0e8,","exportKey":"grid"}}}},"font":{"body":{"variable font":{"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},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:6517cd2791f4df05a28533e0b86d09b025388101,","exportKey":"font"}}},"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:2b5dbce89e1e64e6a39c6564ad4abd3c1afa82f5,","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},"extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:df725d41fcd8e0b69329bf0215c432723580b8fd,","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:bb9be2bc0054e5e89cfc1e2c43628730a38c1e6c,","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:02505d88dbe4ce8f00fd1d0bb096bcfeb163b58b,","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:2292cad5657d178991cef67a315f46564a9f4ac6,","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:2e37db29464d640ee0e651e932c137e35654f230,","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:9f668d628e0e2a786e72133d7a033fe54c0abc6d,","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:868faf92e616a5bb444b80a49f2cadbd916d2749,","exportKey":"effect"}}},"layer blur":{"description":null,"extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:e9426cf0dfaa019a55b80e1b8770fe4947e00b7b,","exportKey":"effect"}}},"background blur":{"description":null,"extensions":{"org.lukasoppermann.figmaDesignTokens":{"styleId":"S:aad34df87e5020557c80f2071de39985dfc55f73,","exportKey":"effect"}}}},"typography":{"body":{"variable font":{"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"}},"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"}},"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"}}}}}