Home / Browse / notion.so / Diff Design token diff Showing changes between two snapshots of notion.so
Colors +28 added −5 removed 20 unchanged
Typography +23 added −7 removed 1 unchanged + NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|16px|400 NotionInter 16px / 400
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|24px|500 NotionInter 24px / 500
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|14px|500 NotionInter 14px / 500
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|16px|500 NotionInter 16px / 500
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|14px|400 NotionInter 14px / 400
Spacing +21 added −9 removed 11 unchanged + 0px 8px 0px 8px
+ 0.5rem Space 0.5rem
+ .5rem Space .5rem
+ .5em Space .5em
+ .6rem Space .6rem
+ .625em Space .625em
+ 3.2px 3.2px
+
Border Radius +10 added −18 removed 6 unchanged + 0.3125rem Radius 0.3125rem
+ 0.25rem Radius 0.25rem
+ 1rem Radius 1rem
+ 0.5rem Radius 0.5rem
+ 624.9375rem Radius 624.9375rem
+ 0.375rem Radius 0.375rem
+ inherit Radius inherit
Shadows +9 added −13 removed 3 unchanged + 0 0 0 2px #000,0 0 0 4px #fff Shadow 1
+ 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
+ 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 #0000000d Shadow 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 #fff9
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|40px|400 NotionInter 40px / 400
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|16px|600 NotionInter 16px / 600
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|20px|400 NotionInter 20px / 400
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|16px|700 NotionInter 16px / 700
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|48px|400 NotionInter 48px / 400
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|22px|700 NotionInter 22px / 700
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|20px|600 NotionInter 20px / 600
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|54px|700 NotionInter 54px / 700
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|12px|500 NotionInter 12px / 500
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|12px|400 NotionInter 12px / 400
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|42px|700 NotionInter 42px / 700
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|22px|400 NotionInter 22px / 400
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|0px|400 NotionInter 0px / 400
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|26px|700 NotionInter 26px / 700
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|15px|400 NotionInter 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|400 Lyon Text 32px / 400
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|14px|600 NotionInter 14px / 600
+ NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|64px|700 NotionInter 64px / 700
− var(--font-family-sans)|16px|400 Body
− var(--typography-sans-350-semibold-font)|var(--header-cta-font-size)|400 BentoHeader HeadingLinkIcon 4h9hJ
− Lyon-Text, Georgia, ui-serif, serif|17px|400 TextBlock TextBlockFamilySerif XbFJ7
− var(--font-family-sans)|var(--font-size-100)|var(--font-weight-medium) ContentfulRichText Code RWBxk
− var(--rich-text-font-config-font-family)|var(--rich-text-font-config-font-size)|400 ContentfulRichText Paragraph HjRE
− var(--typography-sans-350-semibold-font))|var(--arrow-font-size)|400 Bento BentoArrow XFyfN
− var(--font-family-emoji)|15px|400 Gallery Emoji U7yXA
7px
Space 7px
− calc(-1*var(--icon-button-top-edge-margin, 0px) Space calc 1 var icon button top edge margin 0px
− calc(-1*var(--icon-button-right-edge-margin, 0px) Space calc 1 var icon button right edge margin 0px
− calc(-1*var(--icon-button-bottom-edge-margin, 0px) Space calc 1 var icon button bottom edge margin 0px
− calc(-1*var(--icon-button-left-edge-margin, 0px) Space calc 1 var icon button left edge margin 0px
− 0.0078125rem Space 0.0078125rem
+
0.75rem
Radius 0.75rem
− var(--border-radius-300) Radius var border radius 300
− var(--border-button-radius) Radius var border button radius
− var(--border-radius-200) Radius var border radius 200
− var(--border-radius-900) Radius var border radius 900
− var(--border-radius-500) Radius var border radius 500
− var(--graphic-border-radius) Radius var graphic border radius
− var(--graphic-border-radius-sm,var(--graphic-border-radius)) Radius var graphic border radius sm var graphic border radius
− var(--graphic-border-radius-md,var(--graphic-border-radius-sm,var(--graphic-border-radius))) Radius var graphic border radius md var graphic border radius sm var graphic border radius
− var(--graphic-border-radius-lg,var(--graphic-border-radius-md,var(--graphic-border-radius-sm,var(--graphic-border-radius)))) Radius var graphic border radius lg var graphic border radius md var graphic border radius sm var graphic border radius
− var(--graphic-border-radius-xl,var(--graphic-border-radius-lg,var(--graphic-border-radius-md,var(--graphic-border-radius-sm,var(--graphic-border-radius))))) Radius var graphic border radius xl var graphic border radius lg var graphic border radius md var graphic border radius sm var graphic border radius
− var(--graphic-border-radius-xxl,var(--graphic-border-radius-xl,var(--graphic-border-radius-lg,var(--graphic-border-radius-md,var(--graphic-border-radius-sm,var(--graphic-border-radius)))))) Radius var graphic border radius xxl var graphic border radius xl var graphic border radius lg var graphic border radius md var graphic border radius sm var graphic border radius
− var(--border-radius-round) Radius var border radius round
− var(--border-radius-600) Radius var border radius 600
− var(--border-radius-400) Radius var border radius 400
− var(--border-radius-700) Radius var border radius 700
− 1.15%/2.3% Radius 1.15% 2.3%
Shadow 9
+ 0 2px 7px #0003 Shadow 11
+ 0 1px 4px #0000004d Shadow 12
− 0 0 0 2px var(--color-black),0 0 0 4px var(--color-white) Shadow 1
− 0 1px var(--color-border-base) Shadow 3
− var(--dropdown-shadow) Shadow 4
− var(--shadow-level-300) Shadow 5
− var(--shadow-level-100) Shadow 8
− var(--shadow-level-200) Shadow 9
− 0 2px 8px #00000014 Shadow 10
− var(--shadow-level-200),0 0 0 2px var(--color-black),0 0 0 4px var(--color-white) Shadow 11
− 0 -1px 0 #37352f17 Shadow 12
− inset -1px 0 0 0 #00000005 Shadow 13
− inset 0 0 0 1px #0f0f0f1a Shadow 14
− 0 2px 4px #0f0f0f1a Shadow 15
− 0 0 0 1px #0f0f0f1a,0 2px 4px #0f0f0f1a Shadow 16