Design token diff

Showing changes between two snapshots of gemini.google.com

Before

Apr 7, 2026

View snapshot

After

May 7, 2026

View snapshot

Before

Apr 7, 2026

After

May 7, 2026

+59 added−55 removed

Colors

+13 added−12 removed21 unchanged

Typography

+24 added−24 removed

+Luminous Symbols|1rem|330Luminous Symbols

+Luminous Symbols|1.25rem|320Luminous Symbols 2

+Luminous Symbols|1.5rem|300Luminous Symbols 3

+Luminous Symbols|1.75rem|260Luminous Symbols 4

+Luminous Symbols|2rem|240Luminous Symbols 5

+Google Sans Flex, Google Sans, Roboto, Arial, sans-serif|4rem|400Google Sans Flex

+Google Sans Flex, Google Sans, Roboto, Arial, sans-serif|3.5rem|400Google Sans Flex 2

Spacing

+12 added−9 removed20 unchanged

+25pxSpace 25px

+30pxSpace 30px

+32px32px

+40px40px

+60px60px

+64px64px

+80px80px

Border Radius

+5 added−5 removed11 unchanged

+inheritRadius inherit

+28pxRadius 28px

+#202124Radius 202124

+#303030Radius 303030

+#fffRadius fff

−var(--gem-sys-shape--corner-extra-large-increased)Radius var gem sys shape corner extra large increased

−var(--gem-sys-shape--corner-full)Radius var gem sys shape corner full

Shadows

+5 added−5 removed7 unchanged

+0 0 0 0 --mat-sys-shadow,0 0 0 0 --mat-sys-shadow,0 0 0 0 --mat-sys-shadowShadow 8

+0 2px 1px -1px --mat-sys-shadow,0 1px 1px 0 --mat-sys-shadow,0 1px 3px 0 --mat-sys-shadowShadow 9

+0 3px 1px -2px --mat-sys-shadow,0 2px 2px 0 --mat-sys-shadow,0 1px 5px 0 --mat-sys-shadowShadow 10

+0 3px 3px -2px --mat-sys-shadow,0 3px 4px 0 --mat-sys-shadow,0 1px 8px 0 --mat-sys-shadowShadow 11

+0 2px 4px -1px --mat-sys-shadow,0 4px 5px 0 --mat-sys-shadow,0 1px 10px 0 --mat-sys-shadowShadow 12

−0 2px 8px -2px color(from var(--gem-sys-color--on-surface-variant) srgb r g b/.16)Shadow 8

Back to gemini.google.com archive

Google Sans Flex, Google Sans, Roboto, Arial, sans-serif|2.75rem|400

+Google Sans Flex, Google Sans, Roboto, Arial, sans-serif|2.25rem|400Google Sans Flex 4

+Google Sans Flex, Google Sans, Roboto, Arial, sans-serif|2rem|400Google Sans Flex 5

+Google Sans Flex, Google Sans, Roboto, Arial, sans-serif|1.75rem|400Google Sans Flex 6

+Google Sans Flex, Google Sans, Roboto, Arial, sans-serif|1.5rem|400Google Sans Flex 7

+Google Sans Flex, Google Sans, Roboto, Arial, sans-serif|1.375rem|400Google Sans Flex 8

+Google Sans Flex, Google Sans, Roboto, Arial, sans-serif|1.125rem|400Google Sans Flex 9

+Google Sans Flex, Google Sans, Roboto, Arial, sans-serif|1rem|500Google Sans Flex 10

+Google Sans Flex, Google Sans, Roboto, Arial, sans-serif|.875rem|500Google Sans Flex 11

+"Google Sans Flex", "Google Sans Text", "Google Sans", sans-serif|14px|500Google Sans Flex 14px / 500

+"Google Sans Flex", "Google Sans", "Helvetica Neue", sans-serif|14px|500Google Sans Flex 14px / 500

+"Google Sans Flex", "Google Sans", "Helvetica Neue", sans-serif|12px|400Google Sans Flex 12px / 400

+"Google Sans Flex", "Google Sans", "Helvetica Neue", sans-serif|14px|400Google Sans Flex 14px / 400

+"Google Sans Flex", "Google Sans", "Helvetica Neue", sans-serif|16px|400Google Sans Flex 16px / 400

+"Google Symbols"|20px|400Google Symbols 20px / 400

+"Google Sans Text", Roboto, Helvetica, Arial, sans-serif|13px|400Google Sans Text 13px / 400

+"Google Symbols"|24px|400Google Symbols 24px / 400

−"Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif|4rem|400Gmat Display 1

−"Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif|3.5rem|400Gmat Display 2

−"Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif|2.75rem|400Gmat Display 3

−"Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif|2.25rem|400Gmat Headline 1

−"Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif|2rem|400Gmat Headline 2

−"Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif|1.75rem|400Gmat Headline 3

−"Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif|1.5rem|400Gmat Headline 4

−"Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif|1.375rem|400Gmat Headline 5

−"Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif|1.125rem|400Gmat Headline 6

−"Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif|1rem|500Gmat Subhead 1

−"Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif|.875rem|500Gmat Subhead 2

−"Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif|.75rem|500Gmat Overline

−"Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif|1rem|400Gmat Body 1

−"Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif|.875rem|400Gmat Body 2

−"Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif|.75rem|400Gmat Caption

−"Google Sans Flex", "Google Sans", "Helvetica Neue", sans-serif|var(--gem-sys-typography-type-scale--body-l-font-size)|var(--gem-sys-typography-type-scale--body-l-font-weight)Gds Body L

−Roboto, RobotoDraft, Helvetica, Arial, sans-serif|16px|400Roboto 16px / 400

−"Google Sans", Roboto, Arial, sans-serif|14px|400Google Sans 14px / 400

−Arial|13.3333px|400Arial 13.3333px / 400

−"Google Sans Flex", "Google Sans Text", "Google Sans", Roboto, Arial, sans-serif|14px|500Google Sans Flex 14px / 500

−Arial|18px|400Arial 18px / 400

−"Google Sans", Roboto, Arial, sans-serif|12px|400Google Sans 12px / 400

−Times|16px|400Times 16px / 400

−"Google Sans", Roboto, Arial, sans-serif|14px|500Google Sans 14px / 500

−normal 8pxnormal 8px

−normal 12pxnormal 12px

−var(--mdc-shape-small,16px)Radius var mdc shape small 16px

−var(--gem-sys-shape--corner-large) var(--gem-sys-shape--corner-large) 0 0Radius var gem sys shape corner large var gem sys shape corner large 0 0

−var(--gem-sys-shape--corner-extra-large)Radius var gem sys shape corner extra large

−0 0 16px 0 color(from var(--gem-sys-color--on-surface) srgb r g b/.16),0 0 2px 0 color(from var(--gem-sys-color--on-surface) srgb r g b/.1)Shadow 9

−0 0 16px 0 color(from var(--gem-sys-color--on-surface) srgb r g b/.12),0 0 2px 0 color(from var(--gem-sys-color--on-surface) srgb r g b/.1)Shadow 10

−var(--mat-app-elevation-shadow-level-0,0 0 0 0 --mat-sys-shadow,0 0 0 0 --mat-sys-shadow,0 0 0 0 --mat-sys-shadow)Shadow 11

−var(--mat-app-elevation-shadow-level-1,0 2px 1px -1px --mat-sys-shadow,0 1px 1px 0 --mat-sys-shadow,0 1px 3px 0 --mat-sys-shadow)Shadow 12