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

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.

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 ? ! @ # & * • ( ) [] {}

Type Scale

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

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

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

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

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

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.

p, 17px / 1 rem, 1.75 LH

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

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

John Doe Tweet

Color Palette

Buttons

DM Mono 400, uppercase; 0.8 rem

Default Button ID: button000000

Default Button ID: button666666

Default Button ID: button999999

Default Button ID: button666666

Info Button ID: button

Success Button ID: button

Warning Button ID: button

Danger Button ID: button