Design token diff
Showing changes between two snapshots of youtube.com
Colors
+9 added−12 removed25 unchangedTypography
+7 added−14 removed9 unchanged+Oswald, Roboto|28px|400Oswald
+YouTube Sans, Roboto, sans-serif|12rem|700Youtube Sans 10
+YouTube Sans, Roboto, sans-serif|9.6rem|700Youtube Sans 11
+YouTube Sans, Roboto, sans-serif|8.4rem|700Youtube Sans 12
+YouTube Sans, Roboto, sans-serif|7.2rem|700Youtube Sans 13
+YouTube Sans, Roboto, sans-serif|2.8rem|700Youtube Sans 14
+YouTube Sans, Roboto, sans-serif|2.6rem|700
Spacing
+12 added−12 removed20 unchanged+.3333333333emSpace .3333333333em
+.57emSpace .57em
+.7emSpace .7em
+5pxSpace 5px
+6.5pxSpace 6.5px
+7pxSpace 7px
+8.5pxSpace 8.5px
+
Border Radius
+1 added−1 removed15 unchanged+28pxRadius 28px
−inheritRadius inherit
Shadows
+5 added−5 removed7 unchanged+0 4px 16px rgba(0,0,0,.2)Shadow 1
+0 0 7px 2px #0f0f0fShadow 4
+inset 0 0 0 2px #0f0f0fShadow 9
+0 2px 8px rgba(0,0,0,.08)Shadow 10
+0 2px 16px rgba(0,0,0,.08)Shadow 11
−rgba(0,0,0,.2) 0 4px 16pxShadow 1
−0 0 7px 2px var(--t1405e70a39276293)Shadow 4
Youtube Sans 15
−"Oswald", "Roboto"|28px|400YtwFactoidRendererValueRedesign
−var(--font-family), "Arial", sans-serif|var(--headline-s-size-narrow)|var(--headline-weight-default)Header Yt Creator
−var(--font-family), "Arial", sans-serif|var(--body-m-size)|var(--body-weight-default)Goal Subheader Info
−var(--font-family), "Arial", sans-serif|var(--body-l-size)|var(--body-weight-default)Goal Description Yt
−var(--font-family), "Arial", sans-serif|var(--body-l-size)|var(--body-weight-heavy)Current Goal Number
−var(--font-family), "Arial", sans-serif|var(--body-s-size)|var(--body-weight-default)Message Title Yt
−var(--display-font-family), var(--font-family), sans-serif|12rem|var(--display-weight-heavy)Yt Sans 120
−Roboto, Arial, sans-serif|10px|400Roboto 10px / 400
−Roboto, Arial, sans-serif|14px|500Roboto 14px / 500
−Roboto, Noto, sans-serif|14px|400Roboto 14px / 400
−Arial|13.3333px|400Arial 13.3333px / 400
−Roboto, Arial, sans-serif|0px|400Roboto 0px / 400
−Roboto, Arial, sans-serif|14px|400Roboto 14px / 400
−Roboto, Arial, sans-serif|16px|400Roboto 16px / 400
9px
Space 9px
−var(--yt-feed-filter-chip-bar-margin,-24px)Space var yt feed filter chip bar margin 24px
−calc(-15px - var(--calculated-paper-slider-height)Space calc 15px var calculated paper slider height
−var(--paper-slider-markers-margin-left,-1px)Space var paper slider markers margin left 1px
−calc(var(--ytd-decorated-comment-background-offset-bottom,0px)Space calc var ytd decorated comment background offset bottom 0px
−calc(var(--ytd-decorated-comment-background-offset-top,0px)Space calc var ytd decorated comment background offset top 0px
−calc(var(--ytd-decorated-comment-background-offset-left,0px)Space calc var ytd decorated comment background offset left 0px
−var(--yt-string-icon-padding,4px)Space var yt string icon padding 4px
−var(--yt-button-icon-padding,4px)Space var yt button icon padding 4px
−var(--ytd-subscribe-button-margin,4px)Space var ytd subscribe button margin 4px
−var(--ytd-commentbox-textarea-margin-bottom,4px)Space var ytd commentbox textarea margin bottom 4px
−var(--ytd-comment-input-textarea-margin-bottom,4px)Space var ytd comment input textarea margin bottom 4px
−inset 0 0 0 2px var(--tffc2fd3a644f6275)Shadow 10
−0 4px 4px rgba(0,0,0,0.25),0 0 8px rgba(0,0,0,0.25)Shadow 11
−1px 4px 16px -8px rgba(0,0,0,0.25)Shadow 12