Design token diff
Showing changes between two snapshots of typeform.com
Colors
+16 added−6 removed18 unchangedTypography
+21 added−12 removed2 unchanged+Tobias, Times New Roman, sans-serif|2.25rem|400Tobias 2
+"Twklausanne 400", Arial, sans-serif|1rem|400Twklausanne 400
+Tobias, Times New Roman, sans-serif|2rem|400Tobias 3
+Tobias, Times New Roman, sans-serif|.9375rem|400Tobias 4
+Tobias, Times New Roman, sans-serif|1.125rem|400Tobias 5
+Tobias, Times New Roman, sans-serif|5.75rem|400Tobias 6
+"Twklausanne 350", Arial, sans-serif|1.5rem|400
Spacing
+15 added−3 removed17 unchanged+.35remSpace .35rem
+0.375remSpace 0.375rem
+.375remSpace .375rem
+6pxSpace 6px
+8px8px
+12px12px
+16px16px
+
Border Radius
+7 added−15 removed9 unchanged+5rem 5rem 0px 0pxRadius 5rem 5rem 0px 0px
+0px 0px 5rem 5remRadius 0px 0px 5rem 5rem
+5remRadius 5rem
+calc(.75rem * 1.33)Radius calc .75rem 1.33
+.25remRadius .25rem
+calc(.25rem * 1.66)Radius calc .25rem 1.66
+calc(
1.5rem * 1.5
)Radius calc 1.5rem 1.5
Shadows
+4 added−8 removed8 unchanged+inset 0 0 0 1px #2a222bShadow 1
+inset 0 -.1875rem 0 0 #e5e1e5Shadow 6
+inset 0 -.1875rem 0 0 #2a222bShadow 7
+0 0 0 .125rem #faf9fbShadow 9
−inset 0 0 0 1px var(--tokens--button--secondary-border)Shadow 1
−inset 0 -.1875rem 0 0 var(--_colour-primitives---primitives--neutral--200)Shadow 6
−inset 0 -.1875rem 0 0 var(--_colour-primitives---primitives--neutral--1000)
Twklausanne 350
+"Twklausanne 350", Arial, sans-serif|2.125rem|400Twklausanne 350 2
+Tobias, Times New Roman, sans-serif|3rem|400Tobias 7
+Tobias, Times New Roman, sans-serif|4rem|400Tobias 8
+"Twklausanne 700", Arial, sans-serif|.875rem|400Twklausanne 700 2
+"Twklausanne 350", Arial, sans-serif|1.875rem|400Twklausanne 350 3
+"Twklausanne 350", Arial, sans-serif|3rem|400Twklausanne 350 4
+"Twklausanne 400"|16px|400Twklausanne 400 16px / 400
+"Twklausanne 500", Arial, sans-serif|16px|400Twklausanne 500 16px / 400
+"Twklausanne 400"|14px|400Twklausanne 400 14px / 400
+"Twklausanne 400"|20px|400Twklausanne 400 20px / 400
+"Twklausanne 400"|16px|700Twklausanne 400 16px / 700
+"Twklausanne 600", Arial, sans-serif|14px|400Twklausanne 600 14px / 400
+"Twklausanne 400"|36px|400Twklausanne 400 36px / 400
+Tobias|56px|400Tobias 56px / 400
−/ 123% -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif|13px|500Cc Target Header
−var(--_typography---paragraph-md-font)|1rem|400Body
−var(--_typography---paragraph-md-font)|var(--_typography---paragraph-md-size)|400Page Sub Heading
−var(--_typography---heading-two-font)|var(--_typography---heading-two-size)|400U Heading Lg
−var(--_typography---eyebrow-font)|var(--_typography---eyebrow-size)|400U Text Eyebrow
−var(--_typography---action-text-md-font)|var(--_typography---action-text-sm-size)|400Text Button
−var(--_typography---heading-one-font)|var(--_typography---heading-one-size)|400Page Heading U
−var(--_typography---heading-display-font)|var(--_typography---heading-display-size)|400Page Heading U 2
−var(--_typography---heading-four-font)|var(--_typography---heading-four-size)|400U Heading Sm
−var(--_typography---heading-six-font)|var(--_typography---heading-six-size)|400U Heading Xxs
−var(--_typography---heading-three-font)|var(--_typography---heading-three-size)|400U Heading Md
−var(--_typography---heading-three-font)|var(--_typography---heading-four-size)|400Section Heading U
20px
20px
−var(--_size-and-spacing---tokens--corner-radius--md)Radius var size and spacing tokens corner radius md
−var(--_size-and-spacing---tokens--corner-radius--xl) var(--_size-and-spacing---tokens--corner-radius--xl) 0px 0pxRadius var size and spacing tokens corner radius xl var size and spacing tokens corner radius xl 0px 0px
−0px 0px var(--_size-and-spacing---tokens--corner-radius--xl) var(--_size-and-spacing---tokens--corner-radius--xl)Radius 0px 0px var size and spacing tokens corner radius xl var size and spacing tokens corner radius xl
−var(--_size-and-spacing---tokens--corner-radius--xl)Radius var size and spacing tokens corner radius xl
−calc(var(--_size-and-spacing---tokens--corner-radius--sm) * 1.33)Radius calc var size and spacing tokens corner radius sm 1.33
−var(--_size-and-spacing---tokens--corner-radius--xs)Radius var size and spacing tokens corner radius xs
−calc(var(--_size-and-spacing---tokens--corner-radius--xs) * 1.66)Radius calc var size and spacing tokens corner radius xs 1.66
−calc(var(--_size-and-spacing---tokens--corner-radius--md) * 1.5)Radius calc var size and spacing tokens corner radius md 1.5
−var(--_size-and-spacing---tokens--corner-radius--sm)Radius var size and spacing tokens corner radius sm
−calc(var(--tokens--corner-radius--md)*1.33)Radius calc var tokens corner radius md 1.33
−var(--_size-and-spacing---tokens--corner-radius--full)Radius var size and spacing tokens corner radius full
−var(--_size-and-spacing---primitives--spacers--050)Radius var size and spacing primitives spacers 050
−var(--_size-and-spacing---primitives--spacers--100)Radius var size and spacing primitives spacers 100
Shadow 7
−0 0 0 .125rem var(--_colour-primitives---primitives--neutral--25)Shadow 9
−0 4px 4px #0000000dShadow 13
−0 0 0 3px var(--_colour-primitives---primitives--yellow--300)Shadow 14
−0 0 0 3px var(--_colour-primitives---primitives--lavender--300)Shadow 15
−0 0 0 3px var(--_colour-primitives---primitives--purple--300)Shadow 16