Colors Brand Primary F0563A Persimmon 3A414C Cobalt Secondary Brand 333943 Coal 697582 Shale 8090A2 Slate C4CDD6 Alloy E1E6EB Platinum EFF3F5 Silver EDF3F9 Horizon FFFFFF White Interaction 0088A9 Ocean 006F8A Teal D4EBF2 Sky 4F5D75 Granite Messaging 35AD96 Success 41B5DC Info FFA23F Warning D24A35 Error 1
Interaction colors Brand Primary F0563A Persimmon 3A414C Cobalt D63625 BC2111 212730 0D1116 Interaction 0088A9 Ocean 006F8A Teal D4EBF2 Sky 4F5D75 Granite 00738E 005B70 B0D9E6 354259 005C75 004456 92C8DA 212C3F Messaging 35AD96 Success 41B5DC Info FFA23F Warning D24A35 Error 22917E 2B9DC1 E58628 B73721 127769 188AA8 CC7712 9E2810 2
Fonts FONT EXAMPLE Gotham Rounded Gotham Rounded Book ABCDEFGHIJKLMNOPQRSTUVWXYZ The header font is Gotham Rounded and the body font is. abcdefghijklmnopqrstuvwxyz Header font stack Gotham Rounded, San Francisco, Segoe UI, Helvetica Neue, Gotham Rounded Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ Arial, sans-serif; abcdefghijklmnopqrstuvwxyz Body font stack, San Francisco, Segoe UI, Helvetica Neue, Arial, sans-serif; Monospace stack Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ Menlo, Monaco, monospaced abcdefghijklmnopqrstuvwxyz Regular Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Semibold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Monospaced Menlo ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Monaco ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 3
Application typography TYPE H1 FONT Gotham Rounded Book EXAMPLE The quick brown fox jumps over the lazy dog. SIZE 2.429em LINE HEIGHT 2.857em Default for application based UIs. The smaller size is more practical for heavy data content and complex interfaces. 1.0em (14px) Base Font 1.286em (18px) Line Height H2 Gotham Rounded Book The quick brown fox jumps over the lazy dog. 1.929em 2.357em H3 Gotham Rounded Medium The quick brown fox jumps over the lazy dog. 1.500em 1.857em H4 Gotham Rounded Medium The quick brown fox jumps over the lazy dog. 1.214em 1.57 H5 Gotham Rounded Medium The quick brown fox jumps over the lazy dog. 1.07 1.500em H6 Gotham Rounded Bold THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. 0.786em 1.214em 4
Application typography continued TYPE FONT EXAMPLE SIZE LINE HEIGHT ADDITIONAL Paragraph, vitae accumsan sem placerat et. Etiam tincidunt augue leo, id egestas urna suscipit vestibulum. Quisque condimentum tortor ac massa volutpat, non porttitor nibh pharetra. Aliquam pellentesque, felis sit amet elementum ornare, ex ex ullamcorper orci, vitae laoreet ex risus imperdiet orci. Etiam ac est pellentesque, dignissim ipsum quis, posuere velit. Integer orci dui, suscipit vel posuere non, volutpat ut erat. Mauris eget elit eu lectus viverra malesuada id vel enim. Integer libero purus, porta sed sodales sit amet. 1.0em=14px 1.429em Small Print 0.786em Emphasis Semibold 1.429em Italic Italic 1.429em Insertion 1.429em BG #EDF3F9 BG height: 1.286em Padding: R/L 0.714em Strike-thru 1.429em Deleted 1.429em Highlight 1.429em BG #F0553A BG height: 1.286em Padding: R/L 0.714em Blockquote Light, consectetur adipiscing elit. Proin dignissim magna odio, vitae accumsan sem placerat et. Etiam tincidunt augue leo, id egestas urna suscipit vestibulum. 1.429em 1.857em 5
Application typography continued Definition List Default Horizontal Bottom Padding 1.286em Bottom padding 1.286em Label right padding 0.57 LOREM IPSUM Sem placerat et lorem ipsum dolor sit amet consectetur adipiscing elit VITAE ACCUMSAN Sem placerat et lorem ipsum dolor sit amet consectetur adipiscing elit LOREM IPSUM Dolor sit amet consectetur adipiscing elit adipiscing elit proin LOREM Placerat ACCUMSAN Consectetur IPSUM Adipiscing LOREM IPSUM VITAE ACCUMSAN IPSUM Sem placerat et lorem ipsum dolor sit amet consectetur adipiscing elit Sem placerat et lorem ipsum dolor sit amet consectetur adipiscing elit Dolor sit amet consectetur adipiscing elit adipiscing elit proin LOREM ACCUMSAN IPSUM Placerat Consectetur Adipiscing Lists Ordered Unordered Unstyled Line-Height: 1.714em Left Indent 1.429em left padding 0.857em Left Indent 1.143em disc 4x4 solid #8090A2 circle 4x4 1px border inside #8090A2 Left Indent 1.429em 1. 2. 3. Proin dignissim magna odio a. b. c. Proin dignissim magna odio I. II. III. Proin dignissim magna odio Proin dignissim magna odio Vitae accumsan sem placerat Proin dignissim magna odio Proin dignissim magna odio Vitae accumsan sem placerat Proin dignissim magna odio 6
Application typography example Jesse Cimpress JS Lorem ipsum ac sisus rhoncus augue ultrices ullamcorper. Tempus ac Fusce ultricies metus Lorem ipsum laoreet, maximus dictum tincidunt vestibulum at id eleifend luctus amet, Nunc massa tincidunt. Sapien eget inceptos sollicitudin placerat massa lobortis Quisque felis. Amet sollicitudin dui sociosqu amet, sed, a ultrices tincidunt. Per sed ac volutpat, lorem. Vel ornare ante. Donec dolor. In erat. Amet, nibh. Velit Morbi nec. Sapien eget inceptos sollicitudin placerat massa lobortis Quisque felis. Amet sollicitudin dui sociosqu amet, sed, a ultrices tincidunt. Per sed ac volutpat, lorem. Vel ornare ante. Donec dolor. In erat. Amet, nibh. Velit Morbi nec. Lorem ipsum iaculis lectus non Fusce ullamcorper Congue risus nisi lacus a donec ornare metus Taciti urna vulputate risus Quisque quis Lorem ipsum aliquet Lorem ipsum a vestibulum finibus efficitur, ac condimentum consectetur vel efficitur, quam vel felis quis, mi. Pharetra efficitur Nam eget leo, sociosqu tempus, felis. Viverra. Morbi ultrices Lorem ipsum litora a tempor ultricies vitae sed erat auctor interdum, at neque non condimentum imperdiet sollicitudin ultrices Morbi ultrices lorem, tortor lacus ligula. Lacus. Ipsum tincidunt Lorem ipsum aliquet lacinia ut tortor ac Morbi sem pulvinar sapien in massa neque aliquet. Large 7
Marketing typography TYPE FONT EXAMPLE SIZE LINE HEIGHT H1 Running Gotham Rounded Book The quick brown fox jumps over the lazy dog. 3.438em 3.813em Intended for marketing-forward UI s where content is minimal but needs to be impactful. Line height and overall font scale has been increased. 1.0 em (16px) Base font 1.500em (24px) Line Height H2 Running Gotham Rounded Book The quick brown fox jumps over 2.438em 2.813em the lazy dog. H3 Running Gotham Rounded Medium The quick brown fox jumps over the lazy dog. 1.688em 2.063em H4 Running Gotham Rounded Medium The quick brown fox jumps over the lazy dog. 1.375em 1.688em H5 Running Gotham Rounded Medium The quick brown fox jumps over the lazy dog. 1.250em 1.625em H6 Running Gotham Rounded Bold THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. 0.938em 1.500em 8
Marketing typography continued TYPE FONT EXAMPLE SIZE LINE HEIGHT Additional, vitae Running Paragraph 1.500em accumsan sem placerat et. Etiam tincidunt augue leo, id egestas urna suscipit vestibulum. Quisque condimentum tortor ac massa volutpat, non porttitor nibh pharetra. Aliquam pellentesque, felis sit amet elementum ornare, ex ex ullamcorper orci, vitae laoreet ex risus imperdiet orci. Small Print 0.813em Emphasis Semibold 1.500em Italic Italic 1.500em Insertion 1.500em BG #EDF3F9 BG height: 1.500em Padding: R/L 0.625em Strike-thru 1.500em Deleted 1.500em Highlight 1.500em BG #F0553A BG height: Padding: R/L 0.625em Blockquote Light, consectetur adipiscing elit. Proin dignissim magna odio, vitae accumsan sem placerat et. Etiam tincidunt augue leo, 1.375em 2.000em Border-left 3px solid Border-color #F0553A Border padding right 1.429em id egestas urna suscipit vestibulum. 9
Marketing typography continued Label / Description Normal Horizontal Label right padding 0.750em Bottom padding 1.500em Label right padding 0.750em Bottom padding 1.500em LOREM IPSUM Sem placerat et lorem ipsum dolor sit amet consectetur adipiscing elit LOREM Placerat LOREM IPSUM Sem placerat et lorem ipsum dolor sit amet consectetur adipiscing elit LOREM ACCUMSAN Placerat Consectetur VITAE ACCUMSAN Sem placerat et lorem ipsum dolor sit amet ACCUMSAN Consectetur VITAE ACCUMSAN Sem placerat et lorem ipsum dolor sit amet consectetur adipiscing elit IPSUM Adipiscing consectetur adipiscing elit IPSUM Dolor sit amet consectetur adipiscing elit LOREM IPSUM IPSUM adipiscing elit proin Dolor sit amet consectetur adipiscing elit Adipiscing adipiscing elit proin Lists Ordered Unordered Unstyled Line-Height: 2.125em Line-height: 2.125em Left Indent 1.250em disc 6x6 solid #8090A2 circle 6x6 1px border inside #8090A2 Line-height: 2.125em Left Indent 1.500em 1. 2. 3. Proin dignissim magna odio a. b. c. Proin dignissim magna odio I. II. III. Proin dignissim magna odio Proin dignissim magna odio Vitae accumsan sem placerat et Proin dignissim magna odio Proin dignissim magna odio Vitae accumsan sem placerat et Proin dignissim magna odio 10
Marketing typography example Jesse Cimpress JS Lorem ipsum ac sisus rhoncus augue ultrices ullamcorper. Tempus ac Fusce ultricies metus Lorem ipsum laoreet, maximus dictum tincidunt vestibulum at id eleifend luctus amet, Nunc massa tincidunt. Sapien eget inceptos sollicitudin placerat massa lobortis Quisque felis. Amet sollicitudin dui sociosqu amet, sed, a ultrices tincidunt. Per sed ac volutpat, lorem. Vel ornare ante. Donec dolor. In erat. Amet, nibh. Velit Morbi nec. Lorem ipsum iaculis lectus non Fusce ullamcorper Congue risus nisi lacus a donec ornare metus Taciti urna vulputate risus Quisque quis Vestibulum finibus efficitur Lorem ipsum a vestibulum finibus efficitur, ac condimentum consectetur vel efficitur, quam vel felis quis, mi. Pharetra efficitur Nam eget leo, sociosqu tempus, felis. Viverra. Morbi ultrices lorem Lorem ipsum litora a tempor ultricies vitae sed erat auctor interdum, at neque non condimentum imperdiet sollicitudin ultrices Morbi ultrices lorem, tortor lacus ligula. Lacus. Lorem ipsum tincidunt Lorem ipsum aliquet lacinia ut tortor ac Morbi sem pulvinar sapien in massa neque aliquet. Call to action 11
s Primary Secondary Tertiary Primary buttons are used for singular and prioritized call to actions Use in tandem with a primary call to button Use with primary and secondary call to actions Default Hover Press Disabled Default Hover Press Disabled Default Hover Press Disabled Marketing styles Icon Styles Sizing Use in conjunction with marketing typography Icon placement is available on left & right Available for all button styles Small Medium Large group light group dark Group sizing Inline text editing Editing tools Image sharpening 3D preview Inline text editing Editing tools Image sharpening 3D preview Left Middle Right Inline text editing Editing tools Image sharpening 3D preview Inline text editing Editing tools Image sharpening 3D preview Left Middle Right Hover Hover Inline text editing Editing tools Image sharpening 3D preview Inline text editing Editing tools Image sharpening 3D preview Left Middle Right Selected Selected 12
Links & status indicators Default default state hover state visited state disabled state Status indicator Contextual variations Counters Post DELETE DELETE GET GET Cras justo odio 14 In progress TRACE TRACE HEAD HEAD Dapibus ac facilisis in 1 Delayed OPTIONS OPTIONS POST POST Error CONNECT CONNECT PUT GET PUT Vestibulum at eros 24 Cancelled PATCH PATCH NEW NEW Lorem ipsum commodo In nunc 24 DEFAULT DEFAULT INFO INFO Lorem ipsum nibh 24 13
s s Split button dropdown Sizing States Default Default Hover Hover Press Press Title * Required 14
Forms Default inputs Icon w/ inputs Inputs w/ button Inputs w/ button examples Default Primary button Hover Secondary button Active Tertiary button Populated w/ icon left Required * * * w/ icon right Required active * * * Required populated * * * Error Label Default inputs w/ messaging Error required * * * Hint Default w/ message Warning Lorem ipsum neque vitae facilisis at vitae sed massa eu metus aliquet facilisis. Hint Default w/ extended message Success Lorem ipsum neque vitae facilisis. At vitae Sed massa eu faucibus donec sapien lectus Required w/ success * * * Interdum vel cras inceptos id tortor condimentum augue sit eu consectetur Developers Console 15
Form example Register now State / Province * Ext Telephone * 1234 Register Large 16
Alerts Lorem ipsum orci aptent felis augue mauris. Rhoncus velit risus metus, efficitur quam. Ad eget. Success Lorem ipsum ullamcorper. In neque tincidunt neque, augue, odio in a ac a vel. Info Lorem ipsum vitae ipsum ultrices. Lacus vitae arcu vitae. Lectus quis, urna Cras ornare Vestibulum. Warning Lorem ipsum tincidunt tincidunt. Non euismod. Imperdiet iaculis. Eleifend quis, justo, dolor. Non accumsan sed. Error Snackbars Toasts Lorem ipsum fringilla orci In aptent consectetur felis felis. augue mauris. Rhoncus velit risus metus, efficitur quam. Ad eget. Lorem ipsum fringilla In consectetur felis. Lorem ipsum fringilla In consectetur felis. Lorem ipsum ullamcorper. In neque tincidunt neque, augue, odio in a ac a vel. Lorem ipsum fringilla In consectetur felis. Lorem ipsum fringilla In consectetur felis. Lorem ipsum vitae ipsum ultrices. Lacus vitae arcu vitae. Lectus quis, urna Cras ornare Vestibulum. Lorem ipsum Proin Suspendisse a ultricies Mauris vitae. At eu vitae Donec eleifend tempor sit a ac pharetra turpis congue. Lorem ipsum tincidunt tincidunt. Non euismod. Imperdiet iaculis. Eleifend quis, justo, dolor. Non accumsan sed. Lorem ipsum tincidunt tincidunt. Non euismod. Imperdiet iaculis. Eleifend quis, justo, dolor. Non accumsan sed. Lorem ipsum Proin Suspendisse a ultricies Mauris vitae. At eu vitae Donec eleifend tempor sit a ac pharetra turpis congue. Lorem ipsum Proin Suspendisse a ultricies Mauris vitae. At eu vitae Donec eleifend tempor sit a ac pharetra turpis congue. 17
Tooltips Default tooltip TOOLTIP TITLE TOOLTIP TITLE TOOLTIP TITLE TOOLTIP TITLE A vitae magna neque a massa facilisis. Viverra ornare ut odio Imperdiet vehicula. Eu lectus vulputate ex, viverra. Faucibus nisi. Per rhoncus eu. Vestibulum ac, elit. Consequat Aliquam adipiscing odio dui at nibh dolor Light tooltip TOOLTIP TITLE TOOLTIP TITLE TOOLTIP TITLE TOOLTIP TITLE Imperdiet vehicula. Eu lectus vulputate ex, viverra. Eu lectus vulputate ex, viverra. Consequat Aliquam adipiscing odio dui at nibh dolor Class non. A vitae magna neque a massa facilisis. Viverra ornare ut odio ac, ac viverra. 18
Checkboxes & radio buttons Checkbox Radio Default Default Hover Hover Selected Selected Mixed Inactive Inactive Inactive selected Inactive selected Horizontial rule Vertical rule 19
List Group and Tabs Default List Group Default Tabs List group item 1 List group item 2 Tab default Tab Link 1 Tab Link 2 Tab Link 3 Tab Link 4 List group item 3 Selected List group item 4 Hover List group item 5 Inactive Tab hover Tab Link 1 Tab Link 2 Tab Link 3 Tab Link 4 Tab active Tab Link 1 Tab Link 2 Tab Link 3 Tab Link 4 overflow default Tab Link 1 Tab Link 2 Tab Link 3 Tab Link 4 More Overflow active Tab Link 1 Tab Link 2 Tab Link 3 Tab Link 4 More link link link link 20
Pills Vertical Horizontial Pill link 1 Pill default Pill link 1 Pill link 2 Pill link 3 Pill link 4 Pill link 2 Pill link 3 Selected Pill hover Pill link 1 Pill link 2 Pill link 3 Pill link 4 Pill link 4 Hover Pill link 5 Inactive Pill selected Pill link 1 Pill link 2 Pill link 3 Pill link 4 21