Design token diff
Showing changes between two snapshots of notion.so
+43 added−69 removedpw@1.58.2
Colors
+13 added−36 removed28 unchangedTypography
+6 added−9 removed15 unchanged+SF Pro, system-ui, sans-serif|12px|var(--font-weight-medium)Sf Pro
+Lyon-Text, Georgia, ui-serif, serif|17px|400Lyon-text
+NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|72px|500NotionInter 72px / 500
+"Lyon Text", Georgia, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Songti TC", "Songti SC", SimSun, "Nanum Myeongjo", NanumMyeongjo, Batang, serif|18px|400Lyon Text 18px / 400
+"Lyon Text", Georgia, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Songti TC", "Songti SC", SimSun, "Nanum Myeongjo", NanumMyeongjo, Batang, serif|16px|400Lyon Text 16px / 400
+NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|96px|600
Spacing
+6 added−6 removed26 unchanged+.125emSpace .125em
+.125remSpace .125rem
+6.5pxSpace 6.5px
+20px20px
+48px48px
+-1px-1px
−0.25remSpace 0.25rem
−
Border Radius
+9 added−9 removed7 unchanged+.75remRadius .75rem
+.5remRadius .5rem
+624.938remRadius 624.938rem
+.3125remRadius .3125rem
+.375remRadius .375rem
+0 16px 16px 0Radius 0 16px 16px 0
+38pxRadius 38px
Shadows
+9 added−9 removed3 unchanged+0px .175px 1.041px 0px #00000003, 0px .8px 2.925px 0px #00000005, 0px 2.025px 7.847px 0px #00000007, 0px 4px 18px 0px #0000000a--tatami-shadow-200
+0 4px 18px #0000000a,0 2.025px 7.84688px #00000007,0 .8px 2.925px #00000005,0 .175px 1.04062px #00000003Shadow 2
+0px .7px 1.462px 0px #00000004, 0px 3px 9px 0px #00000008--tatami-shadow-100
+0 12px 32px #00000005,0 0 0 1px #0000000dShadow 4
+0 12px 32px #00000008,0 0 0 1px #00000014Shadow 5
+0px .667px 3.502px 0px #00000002, 0px 2.933px 7.252px 0px #00000004, 0px 7.2px 14.462px 0px #00000005, 0px 13.867px 28.348px 0px #00000006, 0px 23.333px 52.123px 0px #00000008, 0px 36px 89px 0px #0000000a--tatami-shadow-300
NotionInter 96px / 600
−NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|16px|600NotionInter 16px / 600
−NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|48px|400NotionInter 48px / 400
−NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|12px|400NotionInter 12px / 400
−NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|22px|400NotionInter 22px / 400
−NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|26px|700NotionInter 26px / 700
−NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|15px|400NotionInter 15px / 400
−"Lyon Text", Georgia, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Songti TC", "Songti SC", SimSun, "Nanum Myeongjo", NanumMyeongjo, Batang, serif|32px|400Lyon Text 32px / 400
−NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|14px|600NotionInter 14px / 600
−NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|64px|700NotionInter 64px / 700
.333em
Space .333em
+
58px
Radius 58px
+.375rem .375rem 0 0Radius .375rem .375rem 0 0
−0.3125remRadius 0.3125rem
−624.9375remRadius 624.9375rem
+0 4px 18px #0000000a,0 2.025px 7.84688px #00000007,0 .8px 2.925px #00000005,0 .175px 1.04062px #00000003,0 0 1px #fff9Shadow 8
+inset 0 0 0 .0625rem #ffffff80,0px .175px 1.041px 0px #00000003, 0px .8px 2.925px 0px #00000005, 0px 2.025px 7.847px 0px #00000007, 0px 4px 18px 0px #0000000aShadow 9
+0 4px 12px -2px #00000014,inset 0 0 0 1px #ffffff0dShadow 10
−0px 0.667px 3.502px #00000003,0px 2.933px 7.252px rgba(0,0,0,.016),0px 7.2px 14.462px #00000005,0px 13.867px 28.348px rgba(0,0,0,.024),0px 23.333px 52.123px #00000008,0px 36px 89px #0000000a--shadow-300
−0 4px 18px #0000000a,0 2.025px 7.84688px rgba(0,0,0,.027),0 .8px 2.925px #00000005,0 .175px 1.04062px rgba(0,0,0,.013)Shadow 4
−0 0 20px 5px #fff3Shadow 5
−0px 0.175px 1.041px rgba(0,0,0,.013),0px 0.8px 2.925px #00000005,0px 2.025px 7.847px rgba(0,0,0,.027),0px 4px 18px #0000000a--shadow-200
−0 1px 3px 0 #00000003,0 3px 7px 0 #00000005,0 7px 15px 0 #00000005,0 14px 28px 0 #0000000a,0 23px 52px 0 #0000000dShadow 7
−0px 0.7px 1.462px rgba(0,0,0,.015),0px 3px 9px #00000008--shadow-100
−0 4px 18px #0000000a,0 2.025px 7.84688px rgba(0,0,0,.027),0 .8px 2.925px #00000005,0 .175px 1.04062px rgba(0,0,0,.013),0 0 1px #fff9Shadow 9
−0 1px 4px #0000004dShadow 12