Design System
A Design System is a systematic approach to product development — complete with guidelines, principles, philosophies, and code.
Logo
Typefaces
DM Sans
DM Sans is a low-contrast geometric sans serif design, intended for use at smaller text sizes.
DM Sans supports a Latin Extended glyph set, enabling typesetting for English and other Western European languages. It was designed by Colophon Foundry (UK), that started from the Latin portion of ITF Poppins, by Jonny Pinhorn.
The DM Sans project was commissoned by Google from Colophon, an international and award-winning type foundry based in London (UK) and Los Angeles (US) who publish and distribute high-quality retail and custom typefaces for analog and digital media. To contribute, see DM fonts on Github.
Fonts & Weights
a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ? ! @ # & * • ( )
400, 17px, 1 rem
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 ? ! @ # & * • ( ) [] {}
400 Italic
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 ? ! @ # & * • ( ) [] {}
500
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 ? ! @ # & * • ( ) [] {}
700
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 ? ! @ # & * • ( ) [] {}
DM Mono
DM Mono is a three weight, three style family designed for DeepMind. DM Mono was loosely based off of DM Sans, with a reduction in contrast and less geometric proportions.
The type design and font development was commissioned from Colophon Foundry, with Creative Direction from the DeepMind team.
To contribute, see github.com/googlefonts/dm-mono.
Designed by Colophon Foundry, Jonny Pinhorn, Indian Type Foundry
a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ? ! @ # & * • ( )
300, 12px, 1.4 line height
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 ? ! @ # & * • ( ) [] {}
Major Third - 1.250 / Base: 17px (106.3%/1.063em)
3.815rem/64.85px - Fox jumps over dog
3.052rem/51.88px - Fox jumps over dog
2.441rem/41.50px - Fox jumps over dog
1.953rem/33.20px - Fox jumps over dog
1.563rem/26.56px - Fox jumps over dog
1.25rem/21.25px - Fox jumps over dog
1rem/17px - Fox jumps over dog
Styles
Uses
Example
Heading 1
Heading 1
Heading 1
Used for Block Titles, Page Headings, Blog Titles. Josefin Sans, size: 54px, color: #000000 (black), font weight: semi-bold 600, line height 1.4em, Letter space: 0px, text transform: none/normal/default
H2 Heading
H2 Heading
H2 Heading
Used for Block Titles, Page Headings, Blog Titles. Josefin Sans, size: 54px, color: #000000 (black), font weight: semi-bold 600, line height 1.4em, Letter space: 0px, text transform: none/normal/default
H3 Heading
H3 Heading
H3 Heading
Used for In-Page Sub Headings, Column Headings, Text Block Headings, Featured/Highlighted Text. Josefin Sans, size: 34px, color: #000000 (black), font weight: semi-bold 600, line height 1.4em, Letter space: 1px, text transform: uppercase
H4 Heading
H4 Heading
H4 Heading
Used for Hero text description, in-page highlighted paragraph. Any text that is highlighted for emphasis. Josefin Sans, size: 18px, color: #000000 (black) #c4b583 (gold) #23a455 (green), font weight: semi-bold 600, line height 1.4em, Letter space: 0px, text transform: none/default/normal
H5 Heading
H5 Heading
H5 Heading
Used for section headings to denote information subset. Josefin Sans, size: 16x, color: #000000 (black) #c4b583 (gold) #23a455 (green), font weight: semi-bold 600, line height 1.4em, Letter space: 2px, text transform: uppercase
H6 Heading
H6 Heading
H6 Heading
Used for image credits, usually with a short horizontal line aligned left. Josefin Sans, size: 14x, color: #000000 (black) #c4b583 (gold) #23a455 (green), font weight: semi-bold 600, line height 1.4em, Letter space: 0px, text transform: uppercase
p .text_large 1.25 rem, 1.75 LH
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis leo et est blandit, ac aliquet arcu congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Used for image credits, usually with a short horizontal line aligned left. Josefin Sans, size: 14x, color: #000000 (black) #c4b583 (gold) #23a455 (green), font weight: semi-bold 600, line height 1.4em, Letter space: 0px, text transform: uppercase
p, 17px / 1 rem, 1.75 LH
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis leo et est blandit, ac aliquet arcu congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Text hyperlink
Used for … Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis leo et est blandit, ac aliquet arcu congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
p .text_small, 0.8 rem, 1.6 LH
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis leo et est blandit, ac aliquet arcu congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Used for … Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis leo et est blandit, ac aliquet arcu congue.
Blockquote widget
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Color Palette
Buttons
DM Mono 400, uppercase; 0.8 rem
Success Button ID: button
Success Button ID: button
Success Button ID: button
Success Button ID: button
Warning Button ID: button
Warning Button ID: button
Warning Button ID: button
Warning Button ID: button
Danger Button ID: button
Danger Button ID: button
Danger Button ID: button
Danger Button ID: button