Firefox Brand – Mozilla Dot Design

<!doctype html>      <html lang="en">  <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title> Firefox Brand – Mozilla Dot Design </title> <link rel="shortcut icon" href="https://mozilla.design/wp-content/themes/mozilla.design.2021/assets/images/favicon-mozilla/favicon.ico" id="favicon" /> <meta name='robots' content='noindex,nofollow' /> <meta name='robots' content='noindex, nofollow' /> <meta name="blog-name" content="Mozilla Dot Design" />  <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Firefox Brand - Mozilla Dot Design" /> <meta property="og:url" content="https://blog.mozilla.org/design/firefox/" /> <meta property="og:site_name" content="Mozilla Dot Design" /> <meta property="article:modified_time" content="2022-04-19T12:03:54+00:00" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://mozilla.design/wp-content/themes/mozilla.design.2021/assets/images/OG_Firefox.png" /> <meta name="twitter:label1" content="Est. reading time" /> <meta name="twitter:data1" content="2 minutes" /> <script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://blog.mozilla.org/design/firefox/","url":"https://blog.mozilla.org/design/firefox/","name":"Firefox Brand - Mozilla Dot Design","isPartOf":{"@id":"https://mozilla.design/#website"},"datePublished":"2019-05-16T18:40:32+00:00","dateModified":"2022-04-19T12:03:54+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://blog.mozilla.org/design/firefox/"]}]},{"@type":"WebSite","@id":"https://mozilla.design/#website","url":"https://mozilla.design/","name":"Mozilla Dot Design","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://mozilla.design/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}</script>  <link rel='dns-prefetch' href='//blog.mozilla.org' /> <link rel='stylesheet' id='wp-block-library-css' href='https://mozilla.design/wp-includes/css/dist/block-library/style.min.css?ver=6.3.5' type='text/css' media='all' /> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> body{--wp--preset--color--black: #000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #fff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--heading: #212529;--wp--preset--color--light-yellow: #ffff98;--wp--preset--color--lemon-yellow: #fff44f;--wp--preset--color--light-blue: #00ddff;--wp--preset--color--neon-blue: #00ffff;--wp--preset--color--warm-red: #ff4f5e;--wp--preset--color--neon-green: #54ffbd;--wp--preset--color--dark-purple: #6e008b;--wp--preset--color--dark-green: #005E5E;--wp--preset--color--dark-blue: #00458b;--wp--preset--color--dark-grey: #959595;--wp--preset--color--light-grey: #e7e5e2;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--font-size--xs: 12px;--wp--preset--font-size--sm: 14px;--wp--preset--font-size--lg: 18px;--wp--preset--font-size--h-xxxs: 16px;--wp--preset--font-size--h-xxs: 20px;--wp--preset--font-size--h-xs: 24px;--wp--preset--font-size--h-sm: 32px;--wp--preset--font-size--h-md: 40px;--wp--preset--font-size--h-lg: 48px;--wp--preset--font-size--h-xl: 56px;--wp--preset--font-size--h-xxl: 64px;--wp--preset--font-size--h-mega: 152px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} .wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} .wp-block-pullquote{font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='style-css' href='https://mozilla.design/wp-content/themes/mozilla.design.2021/assets/css/style.css?ver=1686919482' type='text/css' media='screen' /> <link rel='stylesheet' id='server-css' href='https://mozilla.design/wp-content/themes/mozilla.design.2021/assets/css/server.css?ver=1686919482' type='text/css' media='screen' /> <script type='text/javascript' src='https://blog.mozilla.org/wp-content/mu-plugins/mozilla-custom/ga-snippet.js?ver=.4' id='ga-snippet-js'></script> <link rel="https://api.w.org/" href="https://mozilla.design/wp-json/" /><link rel="alternate" type="application/json" href="https://mozilla.design/wp-json/wp/v2/pages/240" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://mozilla.design/xmlrpc.php?rsd" /> <link rel='shortlink' href='https://mozilla.design/?p=240' /> <link rel="alternate" type="application/json+oembed" href="https://mozilla.design/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fmozilla.design%2Ffirefox%2F" /> <link rel="alternate" type="text/xml+oembed" href="https://mozilla.design/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fmozilla.design%2Ffirefox%2F&format=xml" /> <link rel="icon" href="https://mozilla.design/files/2019/06/moz-fav-bw-rgb.png" sizes="32x32" /> <link rel="icon" href="https://mozilla.design/files/2019/06/moz-fav-bw-rgb.png" sizes="192x192" /> <link rel="apple-touch-icon" href="https://mozilla.design/files/2019/06/moz-fav-bw-rgb.png" /> <meta name="msapplication-TileImage" content="https://mozilla.design/files/2019/06/moz-fav-bw-rgb.png" /> </head> <body class="page-template page-template-page-brand-landing page-template-page-brand-landing-php page page-id-240 page-parent nojs parent--firefox"> <header class="page-section page-section--site-header site-header" role="banner"> <div class="d-lg-block page-section page-section--quick-links quick-links" role="navigation"> <div class="container-fluid"> <div class="row d-flex"> <div class="col-lg-6 col-12"> <h2 class="title type--ff-h-lg"> <noscript> <img src="https://mozilla.design/files/2019/06/Fx-Wordmark.png" alt="Firefox" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/06/Fx-Wordmark.png" alt="Firefox" /> </h2> <div class="additional-assets d-flex flex-wrap"> <div class="additional-asset col-12"> <a href="https://github.com/chrismsimpson/Metropolis" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/06/Aa.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/06/Aa.png" data-srcset="" alt="" /> </div> Metropolis </div> <div class="filetype type--sm"> <i class="icon icon--link"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://github.com/rsms/inter" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/06/resources_inter.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/06/resources_inter.png" data-srcset="" alt="" /> </div> Inter </div> <div class="filetype type--sm"> <i class="icon icon--link"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://mozilla.design/files/2019/06/Firefox-Parent-Brand.zip" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/10/logo-firefox.svg" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/10/logo-firefox.svg" data-srcset="" alt="" /> </div> Firefox Parent Brand </div> <div class="filetype type--sm"> <i class="icon icon--download"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://mozilla.design/files/2019/06/Firefox-Logomark.zip" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/06/Glyph.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/06/Glyph.png" data-srcset="https://mozilla.design/files/2019/06/Glyph.png 244w, https://mozilla.design/files/2019/06/Glyph-150x150.png 150w" alt="" /> </div> Firefox Logomark </div> <div class="filetype type--sm"> <i class="icon icon--download"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://mozilla.design/files/2019/10/Firefox-Browser-Logo-Assets.zip" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/10/Fx-Browser-icon-fullColor-512.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/10/Fx-Browser-icon-fullColor-512.png" data-srcset="https://mozilla.design/files/2019/10/Fx-Browser-icon-fullColor-512.png 512w, https://mozilla.design/files/2019/10/Fx-Browser-icon-fullColor-512-150x150.png 150w, https://mozilla.design/files/2019/10/Fx-Browser-icon-fullColor-512-300x300.png 300w" alt="" /> </div> Firefox Browser </div> <div class="filetype type--sm"> <i class="icon icon--download"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://mozilla.design/files/2019/10/Firefox-Browser-Beta-Logo-Assets.zip" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/10/Fx-Browser-Beta-icon-fullColor-512.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/10/Fx-Browser-Beta-icon-fullColor-512.png" data-srcset="https://mozilla.design/files/2019/10/Fx-Browser-Beta-icon-fullColor-512.png 512w, https://mozilla.design/files/2019/10/Fx-Browser-Beta-icon-fullColor-512-150x150.png 150w, https://mozilla.design/files/2019/10/Fx-Browser-Beta-icon-fullColor-512-300x300.png 300w" alt="" /> </div> Firefox Beta </div> <div class="filetype type--sm"> <i class="icon icon--download"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://mozilla.design/files/2019/10/Firefox-Browser-Developer-Logo-Assets.zip" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/10/Fx-Browser-Developer-icon-fullColor-512.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/10/Fx-Browser-Developer-icon-fullColor-512.png" data-srcset="https://mozilla.design/files/2019/10/Fx-Browser-Developer-icon-fullColor-512.png 512w, https://mozilla.design/files/2019/10/Fx-Browser-Developer-icon-fullColor-512-150x150.png 150w, https://mozilla.design/files/2019/10/Fx-Browser-Developer-icon-fullColor-512-300x300.png 300w" alt="" /> </div> Firefox Developer Edition </div> <div class="filetype type--sm"> <i class="icon icon--download"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://mozilla.design/files/2019/06/Firefox-Reality.zip" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/10/Fx-Browser-Reality-icon-fullColor-512.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/10/Fx-Browser-Reality-icon-fullColor-512.png" data-srcset="https://mozilla.design/files/2019/10/Fx-Browser-Reality-icon-fullColor-512.png 512w, https://mozilla.design/files/2019/10/Fx-Browser-Reality-icon-fullColor-512-150x150.png 150w, https://mozilla.design/files/2019/10/Fx-Browser-Reality-icon-fullColor-512-300x300.png 300w" alt="" /> </div> Firefox Reality </div> <div class="filetype type--sm"> <i class="icon icon--download"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://mozilla.design/files/2019/10/Firefox-Browser-Nightly-Logo-Assets.zip" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/10/Fx-Browser-Nightly-icon-fullColor-512.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/10/Fx-Browser-Nightly-icon-fullColor-512.png" data-srcset="https://mozilla.design/files/2019/10/Fx-Browser-Nightly-icon-fullColor-512.png 512w, https://mozilla.design/files/2019/10/Fx-Browser-Nightly-icon-fullColor-512-150x150.png 150w, https://mozilla.design/files/2019/10/Fx-Browser-Nightly-icon-fullColor-512-300x300.png 300w" alt="" /> </div> Firefox Nightly </div> <div class="filetype type--sm"> <i class="icon icon--download"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://mozilla.design/files/2019/06/Firefox-Lockwise.zip" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/06/Logo.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/06/Logo.png" data-srcset="https://mozilla.design/files/2019/06/Logo.png 450w, https://mozilla.design/files/2019/06/Logo-150x150.png 150w, https://mozilla.design/files/2019/06/Logo-300x300.png 300w" alt="" /> </div> Firefox Lockwise </div> <div class="filetype type--sm"> <i class="icon icon--download"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://mozilla.design/files/2019/06/Firefox-Monitor.zip" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/06/Monitor_icon-939x1024.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/06/Monitor_icon-939x1024.png" data-srcset="https://mozilla.design/files/2019/06/Monitor_icon.png 1582w, https://mozilla.design/files/2019/06/Monitor_icon-275x300.png 275w, https://mozilla.design/files/2019/06/Monitor_icon-768x837.png 768w, https://mozilla.design/files/2019/06/Monitor_icon-939x1024.png 939w" alt="" /> </div> Firefox Monitor </div> <div class="filetype type--sm"> <i class="icon icon--download"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://mozilla.design/files/2019/06/Firefox-Send.zip" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/06/send_logo.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/06/send_logo.png" data-srcset="https://mozilla.design/files/2019/06/send_logo.png 498w, https://mozilla.design/files/2019/06/send_logo-300x295.png 300w" alt="" /> </div> Firefox Send </div> <div class="filetype type--sm"> <i class="icon icon--download"></i> </div> </a> </div> </div> </div> <div class="col-lg-6 col-12"> <h2 class="title type--ff-h-lg type--mz-h-lg"> <noscript> <img src="https://mozilla.design/files/2019/06/mozilla-logo-bw-rgb-1024x293.png" alt="Mozilla" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/06/mozilla-logo-bw-rgb-1024x293.png" alt="Mozilla" /> </h2> <div class="additional-assets d-flex flex-wrap"> <div class="additional-asset col-12"> <a href="https://github.com/rsms/inter" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/06/resources_inter.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/06/resources_inter.png" data-srcset="" alt="" /> </div> Inter </div> <div class="filetype type--sm"> <i class="icon icon--link"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://github.com/mozilla/zilla-slab" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/06/Resources-zilla.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/06/Resources-zilla.png" data-srcset="" alt="" /> </div> Zilla Slab </div> <div class="filetype type--sm"> <i class="icon icon--link"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://fonts.google.com/specimen/Zilla+Slab" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/06/Resources-zilla.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/06/Resources-zilla.png" data-srcset="" alt="" /> </div> Zilla Slab </div> <div class="filetype type--sm"> <i class="icon icon--link"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://design.firefox.com/photon/" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2022/04/photo-design-system.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2022/04/photo-design-system.png" data-srcset="" alt="" /> </div> Photo Design System </div> <div class="filetype type--sm"> <i class="icon icon--link"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://protocol.mozilla.org/" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2022/04/protocol-design-system.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2022/04/protocol-design-system.png" data-srcset="" alt="" /> </div> Protocol Design System </div> <div class="filetype type--sm"> <i class="icon icon--link"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://blog.mozilla.org/opendesign/" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon "> <noscript> <img src="https://mozilla.design/files/2022/04/mozilla-open-design.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2022/04/mozilla-open-design.png" data-srcset="https://mozilla.design/files/2022/04/mozilla-open-design.png 630w, https://mozilla.design/files/2022/04/mozilla-open-design-300x48.png 300w" alt="" /> </div> </div> <div class="filetype type--sm"> <i class="icon icon--link"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://mozilla.design/files/2019/06/Mozilla-logo-BW-RGB.zip" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/06/mozilla-logo-bw-rgb-1024x293.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/06/mozilla-logo-bw-rgb-1024x293.png" data-srcset="https://mozilla.design/files/2019/06/mozilla-logo-bw-rgb.png 2000w, https://mozilla.design/files/2019/06/mozilla-logo-bw-rgb-300x86.png 300w, https://mozilla.design/files/2019/06/mozilla-logo-bw-rgb-768x220.png 768w, https://mozilla.design/files/2019/06/mozilla-logo-bw-rgb-1024x293.png 1024w" alt="" /> </div> Mozilla Logo Black and White </div> <div class="filetype type--sm"> <i class="icon icon--download"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://mozilla.design/files/2019/06/Onecolorblack.zip" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/06/moz-logo-black.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/06/moz-logo-black.png" data-srcset="https://mozilla.design/files/2019/06/moz-logo-black.png 1000w, https://mozilla.design/files/2019/06/moz-logo-black-300x86.png 300w, https://mozilla.design/files/2019/06/moz-logo-black-768x220.png 768w" alt="" /> </div> Mozilla Logo Black </div> <div class="filetype type--sm"> <i class="icon icon--download"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://mozilla.design/files/2019/06/Onecolorwhite.zip" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/06/moz-logo-white.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/06/moz-logo-white.png" data-srcset="https://mozilla.design/files/2019/06/moz-logo-white.png 1000w, https://mozilla.design/files/2019/06/moz-logo-white-300x86.png 300w, https://mozilla.design/files/2019/06/moz-logo-white-768x220.png 768w" alt="" /> </div> Mozilla Logo White </div> <div class="filetype type--sm"> <i class="icon icon--download"></i> </div> </a> </div> <div class="additional-asset col-12"> <a href="https://mozilla.design/files/2019/06/MozillaSocialLogosandFavicons.zip" class="prevent d-flex align-items-center justify-space-between"> <div class="name type--sm"> <div class="icon with-separator"> <noscript> <img src="https://mozilla.design/files/2019/06/moz-fav-bw-rgb.png" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/06/moz-fav-bw-rgb.png" data-srcset="" alt="" /> </div> Mozilla Social Logos and Favicons </div> <div class="filetype type--sm"> <i class="icon icon--download"></i> </div> </a> </div> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="background ff-bg"> <div class="brand-interactive firefox-interactive"> <iframe scrolling='no' class="lazyload" title="Firefox Animation" data-src="https://mozilla.design/wp-content/themes/mozilla.design.2021/assets/interactives/firefox-anim/demo/index-no-text.html" style="border:0" frameboder="0" border="0" scrolling="no"></iframe> </div> </div> <div class="background mz-bg"> <div class="brand-interactive mozilla-interactive"> <noscript> <img src="https://mozilla.design/files/2019/06/Mozilla-Brand-Page-Header-1024x614.png" alt="Firefox Brand" /> </noscript> <img class="lazyload fallback" data-sizes="auto" data-src="https://mozilla.design/files/2019/06/Mozilla-Brand-Page-Header-1024x614.png" data-srcset="https://mozilla.design/files/2019/06/Mozilla-Brand-Page-Header.png 2500w, https://mozilla.design/files/2019/06/Mozilla-Brand-Page-Header-300x180.png 300w, https://mozilla.design/files/2019/06/Mozilla-Brand-Page-Header-768x461.png 768w, https://mozilla.design/files/2019/06/Mozilla-Brand-Page-Header-1024x614.png 1024w" alt="Firefox Brand" /> </div> </div> <div class="update-content"> <div class="row d-flex align-items-lg-center justify-content-between"> <div class="col-auto"> <h1 class="type--ff-h-xxxs type--ff-mb-h-xxs"><a href="https://mozilla.design" class="">mozilla dot design</a></h1> </div> <div class="col d-none d-lg-flex type--ff-h-xxxs justify-content-center"> <div class="desktop-nav"> <ul id="menu-primary-navigation" class="menu"><li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-240 current_page_item menu-item-250"><a href="https://mozilla.design/firefox/" aria-current="page">Firefox Brand</a></li> <li id="menu-item-256" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-256"><a href="https://mozilla.design/mozilla/">Mozilla Brand</a></li> <li id="menu-item-2216" class="quick-links-toggle menu-item menu-item-type-custom menu-item-object-custom menu-item-2216"><a href="#">Quick Links</a></li> </ul> </div> </div> <div class="col-auto text-right d-none d-lg-block"> <a href="#" class="type--ff-h-xxxs quick-links-toggle">Quick Links</a> </div> <div class="col-auto d-block d-lg-none"> <a href="#mobile-nav-toggle" class="mobile-nav-toggle"> <i class="icon icon--bars"><span class="sr-only">Toggle Menu</span></i> </a> </div> </div> </div> </div> <div class="mobile-sub-nav "> <div class="row mobile-interior-section-nav open"> <div class="col-12 type--h-xxs visible-links"> <ul class="section-nav-menu-links type--h-xxs"> <li><a class=""href="https://mozilla.design/firefox/#about"><span class="count">01</span><span class="link-title">About</span></a></li> <li><a class=""href="https://mozilla.design/firefox/#personality"><span class="count">02</span><span class="link-title">Personality</span></a></li> <li><a class=""href="https://mozilla.design/firefox/#logos-usage"><span class="count">03</span><span class="link-title">Logos & Usage</span></a></li> <li><a class=""href="https://mozilla.design/firefox/#color"><span class="count">04</span><span class="link-title">Color</span></a></li> <li><a class=""href="https://mozilla.design/firefox/#visuals"><span class="count">05</span><span class="link-title">Visuals</span></a></li> <li><a class=""href="https://mozilla.design/firefox/#typography"><span class="count">06</span><span class="link-title">Typography</span></a></li> </ul> </div> </div> </div> </div> <div class="mobile-nav type--ff-h-xxs"> <div class="container-fluid"> <div class="row"> <div class="col-12"> <ul id="menu-primary-navigation-1" class="menu"><li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-240 current_page_item menu-item-has-children menu-item-250"><a href="https://mozilla.design/firefox/" aria-current="page">Firefox Brand</a> <ul class="sub-menu"> <li id="menu-item-2218" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2218"><a href="https://mozilla.design/firefox/#about"><span>01</span>About</a></li> <li id="menu-item-529" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-529"><a href="https://mozilla.design/firefox/#personality"><span>02</span>Personality</a></li> <li id="menu-item-254" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-254"><a title=" " href="https://mozilla.design/firefox/#logos-usage"><span>03</span>Logos & Usage</a></li> <li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253"><a title=" " href="https://mozilla.design/firefox/#color"><span>04</span>Color</a></li> <li id="menu-item-252" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-252"><a title=" " href="https://mozilla.design/firefox/#visuals"><span>05</span>Visuals</a></li> <li id="menu-item-251" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-251"><a title=" " href="https://mozilla.design/firefox/#typography"><span>06</span>Typography</a></li> </ul> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-256"><a href="https://mozilla.design/mozilla/">Mozilla Brand</a> <ul class="sub-menu"> <li id="menu-item-2225" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2225"><a href="https://mozilla.design/mozilla/#about"><span>01</span>About</a></li> <li id="menu-item-2226" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2226"><a href="https://mozilla.design/mozilla/#personality"><span>02</span>Personality</a></li> <li id="menu-item-2227" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2227"><a href="https://mozilla.design/mozilla/#logo-usage"><span>03</span>Logo & Usage</a></li> <li id="menu-item-2228" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2228"><a href="https://mozilla.design/mozilla/#color"><span>04</span>Color</a></li> <li id="menu-item-2229" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2229"><a href="https://mozilla.design/mozilla/#visuals"><span>05</span>Visuals</a></li> <li id="menu-item-2230" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2230"><a href="https://mozilla.design/mozilla/#typography"><span>06</span>Typography</a></li> </ul> </li> <li class="quick-links-toggle menu-item menu-item-type-custom menu-item-object-custom menu-item-2216"><a href="#">Quick Links</a></li> </ul> </div> </div> </div> </div> </header> <div data-barba="wrapper"> <div class="barba-container" data-barba="container" data-barba-namespace="brand"> <div id="content" role="main" class="page-section--main"> <div class="transition-content transition-out"> <div class="interior-page-wrap"> <div class="section-nav col-xl-3 col-lg-4"> <div class="section-nav-menu type--h-sm type--mb-h-xxs"> <ul class="section-nav-menu-links"> <li> <a class="" href="https://mozilla.design/firefox/#about"> <span class="count">01</span><span class="link-title">About</span> </a> </li> <li> <a class="" href="https://mozilla.design/firefox/#personality"> <span class="count">02</span><span class="link-title">Personality</span> </a> </li> <li> <a class="" href="https://mozilla.design/firefox/#logos-usage"> <span class="count">03</span><span class="link-title">Logos & Usage</span> </a> </li> <li> <a class="" href="https://mozilla.design/firefox/#color"> <span class="count">04</span><span class="link-title">Color</span> </a> </li> <li> <a class="" href="https://mozilla.design/firefox/#visuals"> <span class="count">05</span><span class="link-title">Visuals</span> </a> </li> <li> <a class="" href="https://mozilla.design/firefox/#typography"> <span class="count">06</span><span class="link-title">Typography</span> </a> </li> </ul> </div> </div> <div class="page-section page-section--brand-interactive brand-interactive"> <div class="brand-interactive firefox-interactive"> <svg id="blobs-kLEsZ" viewBox="0 0 1280 800"> <defs> <linearGradient id="a" x2="1" gradientTransform="rotate(35.857 -387.13 1375.752) scale(357.578)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#e31587"/> <stop offset="1" stop-color="#fc4055"/> </linearGradient> <linearGradient id="b" x2="1" gradientTransform="matrix(-492.5 139 -139 -492.5 139 -833)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#e31587"/> <stop offset="1" stop-color="#20123a"/> </linearGradient> <linearGradient id="c" x2="1" gradientTransform="rotate(14.56 1327.639 1019.81) scale(878.026)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#ff9640"/> <stop offset="1" stop-color="#fc4055"/> </linearGradient> </defs> <g> <g fill-rule="nonzero" class="path-1"> <path fill="url(#a)" d="M-389.626-235.688c-197.308-56.091-403.724 59.111-461.043 257.311-57.319 198.2 56.165 404.344 253.473 460.435l1544.02 438.939c197.312 56.091 403.722-59.111 461.042-257.311 57.32-198.2-56.16-404.344-253.47-460.435l-1544.03-438.939z"/> </g> <g fill-rule="nonzero" class="path-2"> <path fill="url(#b)" d="M-1180.35 894.845c-205.11 11.481-363.23 187.645-353.18 393.485 10.06 205.83 184.48 363.39 389.59 351.91 914.275-51.18 1619.1-836.469 1574.28-1754.01-44.824-917.504-822.335-1619.81-1736.6-1568.63-205.11 11.48-363.23 187.65-353.18 393.48 10.06 205.84 184.48 363.394 389.59 351.913C-765.801-965.22-337.141-578.02-312.429-72.19c24.714 505.871-363.873 938.821-867.921 967.035z"/> </g> <path fill-opacity="0.6" d="M72.8 374H101.2V315H166.8V288.6H101.2V254.8H166.8V228H72.8V374ZM187.597 374H215.797V266H187.597V374ZM183.997 235.6C183.997 245.8 191.197 253.2 201.597 253.2C212.197 253.2 219.397 245.8 219.397 235.6C219.397 225.2 212.197 217.6 201.597 217.6C191.397 217.6 183.997 225.2 183.997 235.6ZM237.792 374H265.192V317C265.192 298.8 274.392 291.6 288.592 291.6C294.792 291.6 299.992 293.2 302.992 295.4L312.992 268.2C308.392 265.8 301.992 264 294.792 264C280.992 264 270.192 269.8 264.992 282.6V266H237.792V374ZM372.061 376.2C395.861 376.2 411.061 366.4 421.861 351.2L399.261 338C393.861 346.8 385.261 352.4 372.461 352.4C356.461 352.4 345.061 343.6 341.461 329.6H427.261V319.2C427.261 287.2 403.861 263.8 371.461 263.8C339.261 263.8 314.861 288.8 314.861 320.2C314.861 351.6 337.261 376.2 372.061 376.2ZM371.461 287.2C385.861 287.2 396.261 294.6 399.861 308H342.261C346.661 295.4 357.461 287.2 371.461 287.2ZM435.122 290.8H452.922V374H480.322V290.8H506.322V266H480.322V260.8C480.322 244.4 482.522 241.6 501.722 241.6H506.322V216.4H499.122C463.922 216.4 452.922 227.2 452.922 262.2V266H435.122V290.8ZM569.713 376.2C602.313 376.2 626.913 351 626.913 320C626.913 288.8 601.913 263.8 569.713 263.8C537.313 263.8 512.713 288.8 512.713 320C512.713 351 537.313 376.2 569.713 376.2ZM569.913 350C553.313 350 540.313 336.6 540.313 319.8C540.313 303 553.313 289.6 569.913 289.6C586.313 289.6 599.513 303 599.513 319.8C599.513 336.6 586.313 350 569.913 350ZM627.834 374H661.034L685.234 340.2L710.034 374H743.434L702.234 318.8L740.634 266H708.234L685.434 298L662.834 266H630.034L668.234 318.6L627.834 374ZM132.2 569.2C158.8 569.2 184 547.4 184 513C184 478.6 159.2 456.8 132 456.8C117.4 456.8 105.4 463.4 98.2 473.8V409.2H70.8V567H98V552C105.2 562.8 117.8 569.2 132.2 569.2ZM126.6 543.2C109.6 543.2 96.6 529.6 96.6 512.8C96.6 496 109.6 482.4 126.6 482.4C143.2 482.4 156.4 495.8 156.4 512.8C156.4 529.8 143.2 543.2 126.6 543.2ZM202.05 567H229.45V510C229.45 491.8 238.65 484.6 252.85 484.6C259.05 484.6 264.25 486.2 267.25 488.4L277.25 461.2C272.65 458.8 266.25 457 259.05 457C245.25 457 234.45 462.8 229.25 475.6V459H202.05V567ZM318.858 569.2C335.858 569.2 350.658 561.6 358.458 550.4V567H385.058V500.6C385.058 473.4 366.858 456.8 335.058 456.8C310.858 456.8 295.058 467 284.058 481.4L309.458 494C314.458 485 322.658 479.8 334.858 479.8C350.458 479.8 358.258 487.8 358.258 499.4V500.8H329.858C299.858 500.8 281.258 514.6 281.258 537C281.258 556 295.258 569.2 318.858 569.2ZM326.858 546.4C315.458 546.4 310.058 542.4 310.058 534.6C310.058 526.2 316.658 521 333.058 521H358.458V526.8C353.058 538.4 340.058 546.4 326.858 546.4ZM406.347 567H434.147V507.4C434.147 490.6 444.147 481 457.147 481C471.747 481 479.147 490.6 479.147 506V567H507.347V501.8C507.347 473.6 491.147 456.8 465.547 456.8C452.147 456.8 440.947 462.8 433.947 472.6V459H406.347V567ZM577.213 569.2C591.213 569.2 603.413 562.8 611.013 552.2V567H638.213V409.2H611.013V472.8C603.613 462.8 591.813 456.8 577.613 456.8C550.013 456.8 525.213 478.6 525.213 513C525.213 547.4 550.613 569.2 577.213 569.2ZM582.613 543.2C566.013 543.2 552.613 529.8 552.613 512.8C552.613 495.8 566.013 482.4 582.613 482.4C599.613 482.4 612.613 496 612.613 512.8C612.613 529.6 599.613 543.2 582.613 543.2Z" fill="white"/> <g fill-rule="nonzero" class="path-3"> <path fill="url(#c)" d="M2333-1358.76c108.35-174.91 337.3-227.77 511.36-118.06 174.07 109.72 227.34 340.45 118.98 515.362l-959.31 1548.59c-108.36 174.911-337.3 227.769-511.37 118.062L-48.47-266.12c-174.067-109.708-227.34-340.44-118.988-515.355 108.351-174.915 337.297-227.772 511.364-118.067l1225.96 772.674 763.13-1231.89z"/> </g> </g> </svg> </div> <div class="container-fluid"> </div> </div> <div class="page-body" data-section-url="https://mozilla.design/firefox/"> <div class="container-fluid"> <div class="row"> <div class="col-12 col-xxl-9 col-xl-9 col-lg-8 force-max-width"> <section class="brand-page-section" id="about"> <div class="wp-block-group page-section page-section--page-intro page-intro is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <div class="wp-block-columns row d-flex align-items-center is-layout-flex wp-container-2 wp-block-columns-is-layout-flex"> <div class="wp-block-column col col-xl-10 offset-xl-1 col-lg-12 offset-lg-0 page-intro--title type--h-xxl type--mb-h-md is-layout-flow wp-block-column-is-layout-flow"> <p class="count">01</p> <h1 class="type--h-xxl type--mb-h-md wp-block-heading">About</h1> <p class="tagline has-text-color" style="color:#9059ff">Firefox fights<br>for you</p> </div> </div> </div></div> <div class="wp-block-group from-browser-to-parent-brand is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-5 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-10 offset-none offset-lg-none wysiwyg-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <h1 class="type--h-xxl text--line-height-1 has-text-color wp-block-heading" style="color:#797088;font-size:120px">From<br>Browser to</h1> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-7 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-2 col-lg-2 offset-5 offset-lg-7 standard-section is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <figure class="wp-block-image size-full"><img decoding="async" src="https://mozilla.design/files/2019/06/Fx-Brand-Arrow.svg" alt=""/></figure> </div> </div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-9 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-11 offset-none offset-lg-1 wysiwyg-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <h1 class="type--h-xxl text--line-height-1 has-text-color wp-block-heading" style="color:#9059ff;font-size:120px">Parent Brand</h1> </div> </div> </div></div> <div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row is-layout-flex wp-container-12 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-10 col-lg-7 offset-2 offset-lg-5 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-lg-font-size">Most consumers know Firefox as a web browser – but that’s changing. We’ve been busy building a suite of new products and services that empower users and demonstrate that we’re the tech company that’s on their side.</p> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <h2 class="has-h-xl-font-size wp-block-heading">Our Brand Platform</h2> <div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row is-layout-flex wp-container-14 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-10 col-lg-7 offset-2 offset-lg-5 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <h3 class="has-h-sm-font-size wp-block-heading">Brand Positioning</h3> <p class="has-lg-font-size">To even have a seat at the table, our products have to perform as well as everything else out there, and meet users’ felt needs. But it’s our dual purpose – improving online life for people and improving the internet – that truly sets us apart.</p> <div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div> <h3 class="has-h-sm-font-size wp-block-heading">Brand Purpose</h3> <p class="has-lg-font-size">We help people believe that Firefox is the tech brand that has their best interests at heart, so that they are safer and more empowered online.</p> <div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div> <h3 class="has-h-sm-font-size wp-block-heading">Brand Promise</h3> <p class="has-lg-font-size">Firefox fights for you.</p> <div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div> <h3 class="has-h-sm-font-size wp-block-heading">Consumer Takeaway</h3> <p class="has-lg-font-size">Firefox is on your side.</p> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <h2 class="has-h-xl-font-size wp-block-heading">Our Audience</h2> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-16 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-lg-font-size">We speak to the Conscious Chooser, which we define as people who make an effort to purchase brands and support the organizations that align with their personal values and beliefs.</p> <p class="has-lg-font-size">Within that group, we prioritize two user segments which we believe are more likely to be engaged by our brand.</p> </div> </div> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row is-layout-flex wp-container-18 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-10 col-lg-7 offset-2 offset-lg-5 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <h3 class="has-h-sm-font-size wp-block-heading">Adventurous Amplifiers</h3> <p class="has-lg-font-size">This segment wants to discover all that the internet has to offer but has little interest in browsers as the tool to get there. They seek emotional brand experiences which help them look good, and which they can share with friends and family.</p> <div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div> <h3 class="has-h-sm-font-size wp-block-heading">Caring Confidentials</h3> <p class="has-lg-font-size">This segment is predisposed towards caring about security as part of their overall sense of worry. They choose Firefox for its best-in-class data and security protection, and because it feels like they are supporting the good guys.</p> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> </section> <section class="brand-page-section" id="personality"> <div class="wp-block-group page-section page-section--page-intro page-intro is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <div class="wp-block-columns row d-flex align-items-center is-layout-flex wp-container-20 wp-block-columns-is-layout-flex"> <div class="wp-block-column col col-xl-10 offset-xl-1 col-lg-12 offset-lg-0 page-intro--title type--h-xxl type--mb-h-md is-layout-flow wp-block-column-is-layout-flow"> <p class="count">02</p> <h1 class="type--h-xxl type--mb-h-md wp-block-heading">Personality</h1> <p class="tagline has-text-color" style="color:#ffd567">It’s what makes Firefox tick</p> </div> </div> </div></div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-23 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-lg-font-size">Our brand personality helps us cultivate a shared vision for our brand, so we can achieve consistency in everything we put into the world. These four words, when taken together, describe how we come across in our tone, design and spirit. You’ll see these words repeated several times throughout the guidelines, as we define them for design, tone of voice, and specific communication channels.</p> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <p class="type--h-mega has-text-color" style="color:#ff7139;font-size:200px">Opinion-<br>ated</p> <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row is-layout-flex wp-container-25 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-10 col-lg-7 offset-2 offset-lg-5 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-lg-font-size">Our products prove that we are driven by strong convictions. Now we’re giving voice to our point of view. While others can only speak to settings, we ground everything in our ethos.</p> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div> <p class="type--h-mega has-warm-red-color has-text-color" style="font-size:200px">Open</p> <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row is-layout-flex wp-container-27 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-10 col-lg-7 offset-2 offset-lg-5 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-lg-font-size">Open-minded. Open-hearted. Open source. An open book. We make transparency and a global perspective integral to our brand, speaking many languages and striving to reflect all vantage points.</p> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div> <p class="type--h-mega has-text-color" style="color:#9059ff;font-size:200px">Radical</p> <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row is-layout-flex wp-container-29 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-10 col-lg-7 offset-2 offset-lg-5 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-lg-font-size">It’s a radical act to be optimistic about the future of the internet. It’s a radical act to serve users before ourselves.We disrupt the status quo because it’s the right thing to do.</p> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div> <p class="type--h-mega has-text-color" style="color:#b833e1;font-size:200px">Kind</p> <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row is-layout-flex wp-container-31 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-10 col-lg-7 offset-2 offset-lg-5 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-lg-font-size">We want what’s best for the internet, and for the world. So we lead by example. Build better products. Start conversations. Partner, collaborate, educate and inform. Our empathy extends to everybody.</p> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div> <h2 class="has-h-xl-font-size wp-block-heading">Brand Voice & Tone</h2> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-33 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-lg-font-size">As with all aspects of our brand expression, our tone of voice is guided by our brand personality – translating those traits into actionable writing direction.</p> </div> </div> <div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div> <h3 class="has-text-color has-h-md-font-size wp-block-heading" style="color:#ff7139">Opinionated</h3> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-35 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p>We assert an informed point of view, grounding that POV in proof and truth. We speak with confidence and authority, guided by our convictions and focused on solutions. We don’t qualify or hedge. We choose strong verbs over adverbs, and clarity over comprehensiveness. And it’s always in service of the user. We never go so far as to feel bossy, accusatory or know-it-all.</p> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-38 wp-block-columns-is-layout-flex"> <div class="wp-block-column col col-lg-5 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="type--h-xs has-h-xxs-font-size">Like this</p> <p>Your life is your business, not ours. Everything we make and do fights for you. (assertive POV)</p> <p>It shouldn’t be hard to own your life online. (clear, confident, inclusive, concise)</p> <p>Privacy isn’t a setting. It’s a mindset. (speaks directly to our ethos)</p> </div> <div class="wp-block-column col col-lg-5 offset-none offset-lg-1 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="type--h-xs has-h-xxs-font-size">Not this</p> <p>Do the work to protect yourself online. (bossy)</p> <p>Big Tech doesn’t care about you. Choose Firefox. (accusatory)</p> <p>You’re doing passwords all wrong. Get Firefox Lockbox. (accusatory, know-it-all)</p> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <h3 class="has-warm-red-color has-text-color has-h-md-font-size wp-block-heading">Open</h3> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-40 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p>We think about and write for everyone, challenging ourselves to find warmth, humor and brevity that translates – across cultures, generations and languages. We consider accessibility and inclusion in every sentence we write. We strive to be ungendered – speaking in the second person “you” most often, but choosing “they” when we speak about users either singular or plural. We practice transparency, sharing the why and how behind what we do – not just the what. And we are always open to and inviting of other perspectives.</p> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-43 wp-block-columns-is-layout-flex"> <div class="wp-block-column col col-lg-5 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="type--h-xs has-h-xxs-font-size">Like this</p> <p>Ad trackers aren’t just annoying and intrusive. They also slow you down. (sharing how/why)</p> <p>No account required. But you might want one. (transparency/privacy as a selling point)</p> <p>Be weird. Be safe. (welcoming, inclusive, accepting)</p> </div> <div class="wp-block-column col col-lg-5 offset-none offset-lg-1 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="type--h-xs has-h-xxs-font-size">Not this</p> <p>Get the 411 on 404s. (turns into nonsense when translated)</p> <p>Hey guys! or Ladies and Gentlemen! (assumes binary gender association)</p> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <h3 class="has-text-color has-h-md-font-size wp-block-heading" style="color:#9059ff">Radical</h3> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-45 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p>We are radically optimistic. We foresee a vibrant future ahead, and we paint the picture of how we can build it together. We don’t “float above” what we’re describing – we use language to evoke feeling, memory, connection, optimism. Energy. We take calculated risks, looking for moments to push the conversation further than we’ve been before. But we don’t get Pollyanna about the future, and we never shock for shock’s sake.</p> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-48 wp-block-columns-is-layout-flex"> <div class="wp-block-column col col-lg-5 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="type--h-xs has-h-xxs-font-size">Like this</p> <p>Improve lives, not profits. (painting a picture, rallying cry to our peers)</p> <p>Live your life. Own your life. (evoking feeling, connection, about the user not us)</p> <p>Firefox fights for you. (pushing the conversation further than it’s been)</p> <p>Get the browser built for you, not advertisers (points to the problem without pointing the finger)</p> </div> <div class="wp-block-column col col-lg-5 offset-none offset-lg-1 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="type--h-xs has-h-xxs-font-size">Not this</p> <p>Fuck Tech. (too much shock, not enough substance)</p> <p>Browse against the machine. (radical? yes, kind? no)</p> <p>If you’re not paying for it, you’re the product. (“truth-telling” that’s sensational, not categorically true)</p> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <h3 class="has-text-color has-h-md-font-size wp-block-heading" style="color:#b833e1">Kind</h3> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-50 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p>We approach every conversation in the spirit of collaboration. We speak to you with warmth, empathy and understanding – like a person, not an algorithm. We respect, inform and empower users. But we don’t get too familiar or chummy. And we never deliver a dissertation when a single line will do. We stay focused on you and what will serve you best in each moment.</p> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-53 wp-block-columns-is-layout-flex"> <div class="wp-block-column col col-lg-5 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="type--h-xs has-h-xxs-font-size">Like this</p> <p>The future is you. We’re here for it. (human, empowering, user as hero)</p> <p>Been hacked? Don’t panic. Let’s talk next steps. (empathetic, human, emotive, reassuring)</p> <p>More power to you. (warm, empowering: a compliment and a promise)</p> </div> <div class="wp-block-column col col-lg-5 offset-none offset-lg-1 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="type--h-xs has-h-xxs-font-size">Not this</p> <p>We’re here to keep you safe. (too familiar, soft, unclear)</p> <p>We’ve got your back. (too chummy, too slangy)</p> <p>We got those ad trackers out of your way. (too familiar, not informative)</p> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> </section> <section class="brand-page-section" id="logos-usage"> <div class="wp-block-group page-section page-section--page-intro page-intro is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <div class="wp-block-columns row d-flex align-items-center is-layout-flex wp-container-55 wp-block-columns-is-layout-flex"> <div class="wp-block-column col col-xl-9 offset-xl-1 col-lg-12 offset-lg-0 page-intro--title type--h-xxl type--mb-h-md is-layout-flow wp-block-column-is-layout-flow"> <p class="count">03</p> <h1 class="wp-block-heading type--h-xxl type--mb-h-md">Logos & Usage</h1> <p class="tagline has-warm-red-color has-text-color">Knowing which to choose and use</p> </div> </div> </div></div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-58 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <h2 class="wp-block-heading has-h-xl-font-size">Parent brand logo and usage</h2> <div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div> <p class="has-lg-font-size">We use the Firefox parent brand logo to represent the entire Firefox ecosystem including browsers, products and services. It appears in places where people encounter all of our offerings, such as web pages covering setting up or signing in to an account with Firefox or events hosted by the Firefox brand.</p> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-60 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-8 offset-none offset-lg-2 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-lg-font-size">The parent brand lockup of icon + wordmark is the preferred usage for partnerships, co-branding, and in media articles.</p> <p class="has-lg-font-size">The icon should never be used to represent a single product in the line. Firefox browsers, in particular, have their own unique marks.</p> <p class="has-lg-font-size">The wordmark “Firefox” on its own should only be used with the parent brand icon. Firefox products and services each include a supporting name such as “Firefox Send” or “Firefox Monitor.”</p> </div> </div> <div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-64 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <figure class="wp-block-image size-full is-resized h-100px"><img decoding="async" src="https://mozilla.design/files/2019/10/logo-firefox.svg" alt=""/></figure> <div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-group asset is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <div class="wp-block-group text-wrap is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <p class="text text--download type--ff-sm">Download the Firefox Parent Brand logo</p> </div></div> <p class="link has-white-color has-text-color"> <a href="https://mozilla.design/files/2019/06/Firefox-Parent-Brand.zip">Link</a> </p> </div></div> </div> </div> <div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row is-layout-flex wp-container-66 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-6 col-lg-5 offset-6 offset-lg-6 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <h3 class="wp-block-heading has-h-xs-font-size">Logotype</h3> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <ul> <li>The Firefox logomark is a custom mark based on the Firefox Sharp Sans typeface</li> <li>The logotype is always Black or White</li> </ul> </div> </div> <figure class="wp-block-image size-full w-100"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/06/FX_Design_Logo_Masterlogo-1.svg" alt="" class="wp-image-1257"/></figure> <div class="wp-block-columns row is-layout-flex wp-container-69 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-6 col-lg-5 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-h-xs-font-size">The Logomark</p> <ul> <li>Refers to Firefox the product company, not Firefox the web browser</li> </ul> </div> <div class="wp-block-column col-6 col-lg-5 offset-none offset-lg-1 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-h-xs-font-size">The Parent Brand logo (horizontal)</p> <ul> <li>The primary logo for the parent brand is the logomark and the logotype together</li> <li>They should always appear in this size relationship</li> <li>Always use the logo files provided in the logo pack</li> <li>Do not recreate</li> </ul> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-71 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <div class="wp-block-media-text alignwide has-media-on-the-right is-vertically-aligned-top" style="grid-template-columns:auto 30.8%"><div class="wp-block-media-text__content"> <p class="has-h-xs-font-size">The Parent Brand logo (stacked)</p> <ul> <li>The stacked logo is for large scale use, or where horizontal space isn’t available</li> <li>Avoid using it at small sizes</li> <li>Always use the logo files provided in the logo pack</li> <li>Do not recreate</li> </ul> </div><figure class="wp-block-media-text__media"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/10/firefox-master-lockup-vertical.svg" alt="" class="wp-image-1824 size-full"/></figure></div> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-73 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <div class="wp-block-media-text alignwide has-media-on-the-right is-vertically-aligned-top" style="grid-template-columns:auto 30.8%"><div class="wp-block-media-text__content"> <p class="has-h-xs-font-size">Logo construction and clear space</p> <ul> <li>The space between the logomark and the logotype is equal to 20% of the height of the logomark</li> <li>For clear space around the logo, use the uppercase F (or 40% of the height of the logomark) as a guide.</li> </ul> </div><figure class="wp-block-media-text__media"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/06/FX_Design_Logo_Masterlogo-space-vertical-1.svg" alt="" class="wp-image-1250 size-full"/></figure></div> </div> </div> <div class="wp-block-columns is-layout-flex wp-container-76 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"></div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <figure class="wp-block-image size-full"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/06/FX_Design_Logo_Masterlogo-space-horizontal-1.svg" alt="" class="wp-image-1249"/></figure> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row is-layout-flex wp-container-79 wp-block-columns-is-layout-flex"> <div class="wp-block-column col col-lg-5 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-h-xs-font-size">Logos on background colors</p> <ul> <li>The full color logos should only be used on very light or very dark backgrounds.</li> <li>Don’t use the full color logo on top of a photograph or gradient unless it sits on a very light or very dark area of the image.</li> </ul> </div> <div class="wp-block-column col col-lg-5 offset-none offset-lg-1 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"></div> </div> <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div> <figure class="wp-block-image size-full w-100"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/06/FX_Design_Logo_Masterlogo-backgrounds-1.svg" alt="" class="wp-image-1246"/></figure> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row is-layout-flex wp-container-82 wp-block-columns-is-layout-flex"> <div class="wp-block-column col col-lg-5 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-h-xs-font-size">The Parent Brand one-color glyph</p> <ul> <li>The full-color logo is our primary logo.</li> <li>In cases where we need a single color glyph, please use only either Black or White for the glyph and the wordmark.</li> </ul> </div> <div class="wp-block-column col col-lg-5 offset-none offset-lg-1 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <figure class="wp-block-image size-full w-100"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/06/FX_Design_Logo_Masterlogo-black-1.svg" alt="" class="wp-image-1247"/></figure> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row is-layout-flex wp-container-85 wp-block-columns-is-layout-flex"> <div class="wp-block-column col col-lg-5 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-h-xs-font-size">Firefox + Mozilla logos</p> <ul> <li>In some cases it may be appropriate for the Firefox logo and the Mozilla logo to appear in the same design</li> <li>In that situation, keep them on the same baseline grid and match the x-height, as shown below</li> <li>The Mozilla logo is 60% as tall as the Firefox logo</li> </ul> </div> <div class="wp-block-column col col-lg-5 offset-none offset-lg-1 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"></div> </div> <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div> <figure class="wp-block-image size-full w-100"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/06/FX_Design_Logo_Masterlogo-mozilla-1.svg" alt="" class="wp-image-1248"/></figure> <div style="height:240px" aria-hidden="true" class="wp-block-spacer"></div> <h2 class="wp-block-heading has-h-xl-font-size">Firefox browser logos</h2> <div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns is-layout-flex wp-container-98 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-group asset is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <div class="wp-block-group thumbnail is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <figure class="wp-block-image size-full content"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/10/Fx-Browser-icon-fullColor.svg" alt="" class="wp-image-1795"/></figure> </div></div> <div class="wp-block-group text-wrap is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <p class="text text--download type--ff-sm"><br>Firefox Browser</p> </div></div> <p class="link has-white-color has-text-color"> <a href="https://mozilla.design/files/2019/10/Firefox-Browser-Logo-Assets.zip">Link</a> </p> </div></div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-group asset is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <div class="wp-block-group thumbnail is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <figure class="wp-block-image size-full content"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/10/Fx-Browser-Developer-icon-fullColor.svg" alt="" class="wp-image-1797"/></figure> </div></div> <div class="wp-block-group text-wrap is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <p class="text text--download type--ff-sm">Firefox Developer Edition</p> </div></div> <p class="link has-white-color has-text-color"> <a href="https://mozilla.design/files/2019/10/Firefox-Browser-Developer-Logo-Assets.zip">Link</a> </p> </div></div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-group asset is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <div class="wp-block-group thumbnail is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <figure class="wp-block-image size-full content"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/10/Fx-Browser-Nightly-icon-fullColor.svg" alt="" class="wp-image-1798"/></figure> </div></div> <div class="wp-block-group text-wrap is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <p class="text text--download type--ff-sm">Firefox Nightly</p> </div></div> <p class="link has-white-color has-text-color"> <a href="https://mozilla.design/files/2019/10/Firefox-Browser-Nightly-Logo-Assets.zip">Link</a> </p> </div></div> </div> </div> <div class="wp-block-columns is-layout-flex wp-container-111 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-group asset is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <div class="wp-block-group thumbnail is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <figure class="wp-block-image size-full content"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/10/Fx-Browser-Beta-icon-fullColor.svg" alt="" class="wp-image-1796"/></figure> </div></div> <div class="wp-block-group text-wrap is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <p class="text text--download type--ff-sm">Firefox Beta</p> </div></div> <p class="link has-white-color has-text-color"> <a href="https://mozilla.design/files/2019/10/Firefox-Browser-Beta-Logo-Assets.zip">Link</a> </p> </div></div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-group asset is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <div class="wp-block-group thumbnail is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <figure class="wp-block-image size-full content"><img decoding="async" fetchpriority="high" width="512" height="512" src="http://blog.mozilla.org/design/files/2019/10/Fx-Browser-Reality-icon-fullColor-512.png" alt="" class="wp-image-1790" srcset="https://mozilla.design/files/2019/10/Fx-Browser-Reality-icon-fullColor-512.png 512w, https://mozilla.design/files/2019/10/Fx-Browser-Reality-icon-fullColor-512-150x150.png 150w, https://mozilla.design/files/2019/10/Fx-Browser-Reality-icon-fullColor-512-300x300.png 300w" sizes="(max-width: 512px) 100vw, 512px" /></figure> </div></div> <div class="wp-block-group text-wrap is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <p class="text text--download type--ff-sm"><br>Firefox Reality</p> </div></div> <p class="link has-white-color has-text-color"> <a href="https://mozilla.design/files/2019/06/Firefox-Reality.zip">Link</a> </p> </div></div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-group asset is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <div class="wp-block-group thumbnail is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <figure class="wp-block-image size-full content"><img decoding="async" width="244" height="243" src="http://blog.mozilla.org/design/files/2019/06/Glyph.png" alt="" class="wp-image-1346" srcset="https://mozilla.design/files/2019/06/Glyph.png 244w, https://mozilla.design/files/2019/06/Glyph-150x150.png 150w" sizes="(max-width: 244px) 100vw, 244px" /></figure> </div></div> <div class="wp-block-group text-wrap is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <p class="text text--download type--ff-sm"><br>Firefox logomark</p> </div></div> <p class="link has-white-color has-text-color"> <a href="https://mozilla.design/files/2019/06/Firefox-Logomark.zip">Link</a> </p> </div></div> </div> </div> <div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div> <h2 class="wp-block-heading has-h-md-font-size">Global guidelines for Firefox products</h2> <div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row is-layout-flex wp-container-114 wp-block-columns-is-layout-flex"> <div class="wp-block-column col col-lg-5 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <figure class="wp-block-image size-full w-100"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/06/Logo-Lockups.svg" alt="" class="wp-image-1752"/></figure> </div> <div class="wp-block-column col col-lg-5 offset-none offset-lg-1 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-h-xs-font-size">Product logos</p> <ul> <li>Built on the same geometry as the parent brand logo</li> <li>The rules about spacing, text color, background colors, single-color glyphs etc, all stay the same</li> <li>The modifying word is set in Sharp Sans Medium</li> <li>Don’t create your own colorway of the browser logo</li> <li>Don’t use the browser logo where the Parent Brand logo should be used*</li> </ul> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <figure class="wp-block-image size-full w-100"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/06/FX_Design_Logo_Browser-logos-lockup-2.svg" alt="" class="wp-image-1258"/></figure> </div> </div> <div style="height:180px" aria-hidden="true" class="wp-block-spacer"></div> <h2 class="wp-block-heading has-h-xl-font-size">Firefox product logos</h2> <div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns is-layout-flex wp-container-127 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-group asset is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <div class="wp-block-group thumbnail is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <figure class="wp-block-image size-large content"><img decoding="async" width="939" height="1024" src="http://blog.mozilla.org/design/files/2019/06/Monitor_icon-939x1024.png" alt="" class="wp-image-638" srcset="https://mozilla.design/files/2019/06/Monitor_icon-939x1024.png 939w, https://mozilla.design/files/2019/06/Monitor_icon-275x300.png 275w, https://mozilla.design/files/2019/06/Monitor_icon-768x837.png 768w, https://mozilla.design/files/2019/06/Monitor_icon.png 1582w" sizes="(max-width: 939px) 100vw, 939px" /></figure> </div></div> <div class="wp-block-group text-wrap is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <p class="text text--download type--ff-sm">Firefox Monitor</p> </div></div> <p class="link has-white-color has-text-color"> <a href="https://mozilla.design/files/2019/06/Firefox-Monitor.zip">Link</a> </p> </div></div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-group asset is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <div class="wp-block-group thumbnail is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <figure class="wp-block-image size-full content"><img decoding="async" loading="lazy" width="450" height="451" src="http://blog.mozilla.org/design/files/2019/06/Logo.png" alt="" class="wp-image-639" srcset="https://mozilla.design/files/2019/06/Logo.png 450w, https://mozilla.design/files/2019/06/Logo-150x150.png 150w, https://mozilla.design/files/2019/06/Logo-300x300.png 300w" sizes="(max-width: 450px) 100vw, 450px" /></figure> </div></div> <div class="wp-block-group text-wrap is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <p class="text text--download type--ff-sm"><br>Firefox Lockwise</p> </div></div> <p class="link has-white-color has-text-color"> <a href="https://mozilla.design/files/2019/06/Firefox-Lockwise.zip">Link</a> </p> </div></div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-group asset is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <div class="wp-block-group thumbnail is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <figure class="wp-block-image size-full content"><img decoding="async" loading="lazy" width="498" height="489" src="http://blog.mozilla.org/design/files/2019/06/send_logo.png" alt="" class="wp-image-640" srcset="https://mozilla.design/files/2019/06/send_logo.png 498w, https://mozilla.design/files/2019/06/send_logo-300x295.png 300w" sizes="(max-width: 498px) 100vw, 498px" /></figure> </div></div> <div class="wp-block-group text-wrap is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <p class="text text--download type--ff-sm"><br>Firefox Send</p> </div></div> <p class="link has-white-color has-text-color"> <a href="https://mozilla.design/files/2019/06/Firefox-Send.zip">Link</a> </p> </div></div> </div> </div> <div style="height:180px" aria-hidden="true" class="wp-block-spacer"></div> </section> <section class="brand-page-section" id="color"> <div class="wp-block-group page-section page-section--page-intro page-intro is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <div class="wp-block-columns row d-flex align-items-center is-layout-flex wp-container-129 wp-block-columns-is-layout-flex"> <div class="wp-block-column col col-xl-9 offset-xl-1 col-lg-12 offset-lg-0 page-intro--title type--h-xxl type--mb-h-md is-layout-flow wp-block-column-is-layout-flow"> <p class="count">04</p> <h1 class="type--h-xxl type--mb-h-md wp-block-heading">Color</h1> <p class="tagline has-text-color" style="color:#b833e1">Basically the whole box of crayons</p> </div> </div> </div></div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-132 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <h2 class="has-h-lg-font-size wp-block-heading">Brand Palette</h2> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <p class="has-lg-font-size">Our new brand palette consists of eight core hues — one more than the standard rainbow — used as solids and gradients.</p> </div> </div> <div class="page-section page-section--color-table color-table"> <div class="row"> <div class="col-12 d-sm-flex"> <div class="color-table color-table--full"> <table> <tbody> <tr> <td><div class="color" data-hex="#E3FFF3" data-label="" style="background:#E3FFF3;"></div></td> <td><div class="color" data-hex="#D0FFED" data-label="" style="background:#D0FFED;"></div></td> <td><div class="color" data-hex="#B3FFE3" data-label="" style="background:#B3FFE3;"></div></td> <td><div class="color" data-hex="#88FFD1" data-label="" style="background:#88FFD1;"></div></td> <td><div class="color" data-hex="#53FEBE" data-label="" style="background:#53FEBE;"></div></td> <td><div class="color" data-hex="#3FE1B0" data-label="" style="background:#3FE1B0;"></div></td> <td><div class="color" data-hex="#2BC4A2" data-label="" style="background:#2BC4A2;"></div></td> <td><div class="color" data-hex="#068989" data-label="" style="background:#068989;"></div></td> <td><div class="color" data-hex="#005E5D" data-label="" style="background:#005E5D;"></div></td> <td><div class="color" data-hex="#083F37" data-label="" style="background:#083F37;"></div></td> </tr> <tr> <td><div class="color" data-hex="#ACF1FF" data-label="" style="background:#ACF1FF;"></div></td> <td><div class="color" data-hex="#80EAFF" data-label="" style="background:#80EAFF;"></div></td> <td><div class="color" data-hex="#00DDFF" data-label="" style="background:#00DDFF;"></div></td> <td><div class="color" data-hex="#00B3F5" data-label="" style="background:#00B3F5;"></div></td> <td><div class="color" data-hex="#0290EE" data-label="" style="background:#0290EE;"></div></td> <td><div class="color" data-hex="#0060E0" data-label="" style="background:#0060E0;"></div></td> <td><div class="color" data-hex="#0250BC" data-label="" style="background:#0250BC;"></div></td> <td><div class="color" data-hex="#063F96" data-label="" style="background:#063F96;"></div></td> <td><div class="color" data-hex="#073072" data-label="" style="background:#073072;"></div></td> <td><div class="color" data-hex="#0A214D" data-label="" style="background:#0A214D;"></div></td> </tr> <tr> <td><div class="color" data-hex="#E6DFFF" data-label="" style="background:#E6DFFF;"></div></td> <td><div class="color" data-hex="#D9BFFF" data-label="" style="background:#D9BFFF;"></div></td> <td><div class="color" data-hex="#CC9EFF" data-label="" style="background:#CC9EFF;"></div></td> <td><div class="color" data-hex="#C588FF" data-label="" style="background:#C588FF;"></div></td> <td><div class="color" data-hex="#AC71FF" data-label="" style="background:#AC71FF;"></div></td> <td><div class="color" data-hex="#9059FF" data-label="" style="background:#9059FF;"></div></td> <td><div class="color" data-hex="#7543E3" data-label="" style="background:#7543E3;"></div></td> <td><div class="color" data-hex="#582ACB" data-label="" style="background:#582ACB;"></div></td> <td><div class="color" data-hex="#46278E" data-label="" style="background:#46278E;"></div></td> <td><div class="color" data-hex="#321C64" data-label="" style="background:#321C64;"></div></td> </tr> <tr> <td><div class="color" data-hex="#F7E3FF" data-label="" style="background:#F7E3FF;"></div></td> <td><div class="color" data-hex="#F6B9FF" data-label="" style="background:#F6B9FF;"></div></td> <td><div class="color" data-hex="#F690FF" data-label="" style="background:#F690FF;"></div></td> <td><div class="color" data-hex="#F564FF" data-label="" style="background:#F564FF;"></div></td> <td><div class="color" data-hex="#D64CF1" data-label="" style="background:#D64CF1;"></div></td> <td><div class="color" data-hex="#B933E1" data-label="" style="background:#B933E1;"></div></td> <td><div class="color" data-hex="#962BB9" data-label="" style="background:#962BB9;"></div></td> <td><div class="color" data-hex="#712290" data-label="" style="background:#712290;"></div></td> <td><div class="color" data-hex="#4D1A69" data-label="" style="background:#4D1A69;"></div></td> <td><div class="color" data-hex="#2B1141" data-label="" style="background:#2B1141;"></div></td> </tr> <tr> <td><div class="color" data-hex="#FFDFF0" data-label="" style="background:#FFDFF0;"></div></td> <td><div class="color" data-hex="#FFB4DB" data-label="" style="background:#FFB4DB;"></div></td> <td><div class="color" data-hex="#FF8AC6" data-label="" style="background:#FF8AC6;"></div></td> <td><div class="color" data-hex="#FF6BBB" data-label="" style="background:#FF6BBB;"></div></td> <td><div class="color" data-hex="#FE4AA3" data-label="" style="background:#FE4AA3;"></div></td> <td><div class="color" data-hex="#FF2A8A" data-label="" style="background:#FF2A8A;"></div></td> <td><div class="color" data-hex="#E11586" data-label="" style="background:#E11586;"></div></td> <td><div class="color" data-hex="#C60184" data-label="" style="background:#C60184;"></div></td> <td><div class="color" data-hex="#7F165B" data-label="" style="background:#7F165B;"></div></td> <td><div class="color" data-hex="#50134C" data-label="" style="background:#50134C;"></div></td> </tr> <tr> <td><div class="color" data-hex="#FFE0E8" data-label="" style="background:#FFE0E8;"></div></td> <td><div class="color" data-hex="#FFBEC6" data-label="" style="background:#FFBEC6;"></div></td> <td><div class="color" data-hex="#FF9AA2" data-label="" style="background:#FF9AA2;"></div></td> <td><div class="color" data-hex="#FF848C" data-label="" style="background:#FF848C;"></div></td> <td><div class="color" data-hex="#FF6A75" data-label="" style="background:#FF6A75;"></div></td> <td><div class="color" data-hex="#FF505F" data-label="" style="background:#FF505F;"></div></td> <td><div class="color" data-hex="#E02950" data-label="" style="background:#E02950;"></div></td> <td><div class="color" data-hex="#C50143" data-label="" style="background:#C50143;"></div></td> <td><div class="color" data-hex="#800220" data-label="" style="background:#800220;"></div></td> <td><div class="color" data-hex="#440307" data-label="" style="background:#440307;"></div></td> </tr> <tr> <td><div class="color" data-hex="#FFF4DE" data-label="" style="background:#FFF4DE;"></div></td> <td><div class="color" data-hex="#FFD6B2" data-label="" style="background:#FFD6B2;"></div></td> <td><div class="color" data-hex="#FFB588" data-label="" style="background:#FFB588;"></div></td> <td><div class="color" data-hex="#FEA365" data-label="" style="background:#FEA365;"></div></td> <td><div class="color" data-hex="#FE8A4F" data-label="" style="background:#FE8A4F;"></div></td> <td><div class="color" data-hex="#FF7139" data-label="" style="background:#FF7139;"></div></td> <td><div class="color" data-hex="#E25821" data-label="" style="background:#E25821;"></div></td> <td><div class="color" data-hex="#CD3D00" data-label="" style="background:#CD3D00;"></div></td> <td><div class="color" data-hex="#9D280C" data-label="" style="background:#9D280C;"></div></td> <td><div class="color" data-hex="#7B1604" data-label="" style="background:#7B1604;"></div></td> </tr> <tr> <td><div class="color" data-hex="#FFFFCD" data-label="" style="background:#FFFFCD;"></div></td> <td><div class="color" data-hex="#FEFF95" data-label="" style="background:#FEFF95;"></div></td> <td><div class="color" data-hex="#FFEA7F" data-label="" style="background:#FFEA7F;"></div></td> <td><div class="color" data-hex="#FFD567" data-label="" style="background:#FFD567;"></div></td> <td><div class="color" data-hex="#FFBD4F" data-label="" style="background:#FFBD4F;"></div></td> <td><div class="color" data-hex="#FFA537" data-label="" style="background:#FFA537;"></div></td> <td><div class="color" data-hex="#E17F2E" data-label="" style="background:#E17F2E;"></div></td> <td><div class="color" data-hex="#C45A28" data-label="" style="background:#C45A28;"></div></td> <td><div class="color" data-hex="#A7341F" data-label="" style="background:#A7341F;"></div></td> <td><div class="color" data-hex="#960F18" data-label="" style="background:#960F18;"></div></td> </tr> </tbody> </table> </div> <div class="current">#000000</div> </div> </div> </div> <div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns is-layout-flex wp-container-136 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <figure class="wp-block-image size-full"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/06/Fx_Color_Gradient-1.svg" alt="" class="wp-image-1230"/></figure> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <figure class="wp-block-image size-full w-100"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/06/Fx_Color_Gradient-2.svg" alt="" class="wp-image-1231"/></figure> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <figure class="wp-block-image size-full w-100"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/06/Fx_Color_Gradient-3.svg" alt="" class="wp-image-1232"/></figure> </div> </div> <div style="height:180px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-138 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <h2 class="has-h-lg-font-size wp-block-heading">Accessibility</h2> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <p class="has-lg-font-size">We’ve also defined comprehensive accessibility standards with regard to color, in the hope that our experiences can be used by everyone everywhere. Here’s an example:</p> </div> </div> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <figure class="wp-block-image size-full w-100"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/06/FX_Design_Color_Accessibility.svg" alt="" class="wp-image-473"/></figure> <div style="height:180px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-140 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <h2 class="has-h-lg-font-size wp-block-heading">Signal Colors</h2> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <p class="has-lg-font-size">We use specific colors to signal particular actions and confirmation in our products.</p> </div> </div> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns is-layout-flex wp-container-145 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <figure class="wp-block-image size-full w-100"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/06/FX_Design_Color_Functional-Colors_Click.svg" alt="" class="wp-image-493"/><figcaption>Click</figcaption></figure> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <figure class="wp-block-image size-full w-100"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/06/FX_Design_Color_Functional-Colors_Success.svg" alt="" class="wp-image-505"/><figcaption>Success</figcaption></figure> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <figure class="wp-block-image size-full w-100"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/06/FX_Design_Color_Functional-Colors_Warning.svg" alt="" class="wp-image-497"/><figcaption>Warning</figcaption></figure> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <figure class="wp-block-image size-full w-100"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/06/FX_Design_Color_Functional-Colors_Error.svg" alt="" class="wp-image-494"/><figcaption>Error</figcaption></figure> </div> </div> <div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div> <figure class="wp-block-image size-full w-100"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/06/FX_Design_Color_Functional-Colors_Status-1.svg" alt="" class="wp-image-502"/></figure> <div style="height:180px" aria-hidden="true" class="wp-block-spacer"></div> </section> <section class="brand-page-section" id="visuals"> <div class="wp-block-group page-section page-section--page-intro page-intro is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <div class="wp-block-columns row d-flex align-items-center is-layout-flex wp-container-147 wp-block-columns-is-layout-flex"> <div class="wp-block-column col col-xl-9 offset-xl-1 col-lg-12 offset-lg-0 page-intro--title type--h-xxl type--mb-h-md is-layout-flow wp-block-column-is-layout-flow"> <p class="count">05</p> <h1 class="type--h-xxl type--mb-h-md wp-block-heading">Visuals</h1> <p class="tagline has-text-color" style="color:#ff7139">Picture this and this and this</p> </div> </div> </div></div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-150 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-lg-font-size">A shape system derived from the geometry of the product logos forms beautiful background patterns, spot illustrations, motion graphics and pictograms.</p> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="1215" height="406" src="https://mozilla.design/files/2019/06/FX_Design_Blog_Shapes.png" alt="" class="wp-image-753" srcset="https://mozilla.design/files/2019/06/FX_Design_Blog_Shapes.png 1215w, https://mozilla.design/files/2019/06/FX_Design_Blog_Shapes-300x100.png 300w, https://mozilla.design/files/2019/06/FX_Design_Blog_Shapes-768x257.png 768w, https://mozilla.design/files/2019/06/FX_Design_Blog_Shapes-1024x342.png 1024w" sizes="(max-width: 1215px) 100vw, 1215px" /></figure> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="1069" height="803" src="https://mozilla.design/files/2019/06/FX_Design_Blog_Shapes-4.png" alt="" class="wp-image-755" srcset="https://mozilla.design/files/2019/06/FX_Design_Blog_Shapes-4.png 1069w, https://mozilla.design/files/2019/06/FX_Design_Blog_Shapes-4-300x225.png 300w, https://mozilla.design/files/2019/06/FX_Design_Blog_Shapes-4-768x577.png 768w, https://mozilla.design/files/2019/06/FX_Design_Blog_Shapes-4-1024x769.png 1024w" sizes="(max-width: 1069px) 100vw, 1069px" /></figure> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="1223" height="636" src="https://mozilla.design/files/2019/06/FX_Design_Blog_Illustration.png" alt="" class="wp-image-1298" srcset="https://mozilla.design/files/2019/06/FX_Design_Blog_Illustration.png 1223w, https://mozilla.design/files/2019/06/FX_Design_Blog_Illustration-300x156.png 300w, https://mozilla.design/files/2019/06/FX_Design_Blog_Illustration-768x399.png 768w, https://mozilla.design/files/2019/06/FX_Design_Blog_Illustration-1024x533.png 1024w" sizes="(max-width: 1223px) 100vw, 1223px" /></figure> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row is-layout-flex wp-container-153 wp-block-columns-is-layout-flex"> <div class="wp-block-column col col-lg-5 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="546" height="344" src="http://blog.mozilla.org/design/files/2019/06/screenshots.gif" alt="" class="wp-image-1489"/></figure> </div> <div class="wp-block-column col col-lg-5 offset-none offset-lg-1 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="485" height="403" src="http://blog.mozilla.org/design/files/2019/06/add-ons.gif" alt="" class="wp-image-1486"/></figure> </div> </div> <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row is-layout-flex wp-container-156 wp-block-columns-is-layout-flex"> <div class="wp-block-column col col-lg-5 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="1230" height="1080" src="https://mozilla.design/files/2019/06/phone-1.2.gif" alt="" class="wp-image-1485"/></figure> </div> <div class="wp-block-column col col-lg-5 offset-none offset-lg-1 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="585" height="382" src="http://blog.mozilla.org/design/files/2019/06/private-browsing-2.7.gif" alt="" class="wp-image-1490"/></figure> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-159 wp-block-columns-is-layout-flex"> <div class="wp-block-column col col-lg-5 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="1080" height="1080" src="https://mozilla.design/files/2019/06/noodles-1.gif" alt="" class="wp-image-1482"/></figure> </div> <div class="wp-block-column col col-lg-5 offset-none offset-lg-1 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="1080" height="1080" src="https://mozilla.design/files/2019/06/noodles-2.gif" alt="" class="wp-image-1483"/></figure> </div> </div> <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div> <figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="1080" height="1080" src="https://mozilla.design/files/2019/06/noodles-3.gif" alt="" class="wp-image-1484"/></figure> <div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div> <figure class="wp-block-image size-full w-100"><img decoding="async" loading="lazy" width="1024" height="710" src="https://mozilla.design/files/2019/06/1l9LnZ2efVn1u7APHWtZAtRquiEEqjGLMiFGMBMmg_A.jpeg" alt="" class="wp-image-1724" srcset="https://mozilla.design/files/2019/06/1l9LnZ2efVn1u7APHWtZAtRquiEEqjGLMiFGMBMmg_A.jpeg 1024w, https://mozilla.design/files/2019/06/1l9LnZ2efVn1u7APHWtZAtRquiEEqjGLMiFGMBMmg_A-300x208.jpeg 300w, https://mozilla.design/files/2019/06/1l9LnZ2efVn1u7APHWtZAtRquiEEqjGLMiFGMBMmg_A-768x533.jpeg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure> <figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="1024" height="710" src="https://mozilla.design/files/2019/06/1foCAlLKpNNs6suDYZ5CKmldzAGvsIKQNP2mQBt91Ig.jpeg" alt="" class="wp-image-1723" srcset="https://mozilla.design/files/2019/06/1foCAlLKpNNs6suDYZ5CKmldzAGvsIKQNP2mQBt91Ig.jpeg 1024w, https://mozilla.design/files/2019/06/1foCAlLKpNNs6suDYZ5CKmldzAGvsIKQNP2mQBt91Ig-300x208.jpeg 300w, https://mozilla.design/files/2019/06/1foCAlLKpNNs6suDYZ5CKmldzAGvsIKQNP2mQBt91Ig-768x533.jpeg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure> <div class="wp-block-columns is-layout-flex wp-container-162 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="537" height="1600" src="https://mozilla.design/files/2019/06/1QHdTm9HX5lZ2kJHalkyeLgMisj28pUmHyUSnlJ4hcQ.jpeg" alt="" class="wp-image-1726" srcset="https://mozilla.design/files/2019/06/1QHdTm9HX5lZ2kJHalkyeLgMisj28pUmHyUSnlJ4hcQ.jpeg 537w, https://mozilla.design/files/2019/06/1QHdTm9HX5lZ2kJHalkyeLgMisj28pUmHyUSnlJ4hcQ-101x300.jpeg 101w, https://mozilla.design/files/2019/06/1QHdTm9HX5lZ2kJHalkyeLgMisj28pUmHyUSnlJ4hcQ-344x1024.jpeg 344w" sizes="(max-width: 537px) 100vw, 537px" /></figure> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"></div> </div> <figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="1451" height="724" src="https://mozilla.design/files/2019/06/1pX8N0JCPYNtCaqkolb_84pXX_MHWMJRSJn5mLyRgyA.png" alt="" class="wp-image-1725" srcset="https://mozilla.design/files/2019/06/1pX8N0JCPYNtCaqkolb_84pXX_MHWMJRSJn5mLyRgyA.png 1451w, https://mozilla.design/files/2019/06/1pX8N0JCPYNtCaqkolb_84pXX_MHWMJRSJn5mLyRgyA-300x150.png 300w, https://mozilla.design/files/2019/06/1pX8N0JCPYNtCaqkolb_84pXX_MHWMJRSJn5mLyRgyA-768x383.png 768w, https://mozilla.design/files/2019/06/1pX8N0JCPYNtCaqkolb_84pXX_MHWMJRSJn5mLyRgyA-1024x511.png 1024w" sizes="(max-width: 1451px) 100vw, 1451px" /></figure> <figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="1294" height="562" src="https://mozilla.design/files/2019/06/1w7iVpWePFJWGhai3LNkOQWhBVIrslD8NBEuxe2YYXg.png" alt="" class="wp-image-1727" srcset="https://mozilla.design/files/2019/06/1w7iVpWePFJWGhai3LNkOQWhBVIrslD8NBEuxe2YYXg.png 1294w, https://mozilla.design/files/2019/06/1w7iVpWePFJWGhai3LNkOQWhBVIrslD8NBEuxe2YYXg-300x130.png 300w, https://mozilla.design/files/2019/06/1w7iVpWePFJWGhai3LNkOQWhBVIrslD8NBEuxe2YYXg-768x334.png 768w, https://mozilla.design/files/2019/06/1w7iVpWePFJWGhai3LNkOQWhBVIrslD8NBEuxe2YYXg-1024x445.png 1024w" sizes="(max-width: 1294px) 100vw, 1294px" /></figure> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> </section> <section class="brand-page-section" id="typography"> <div class="wp-block-group page-section page-section--page-intro page-intro is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <div class="wp-block-columns row d-flex align-items-center is-layout-flex wp-container-164 wp-block-columns-is-layout-flex"> <div class="wp-block-column col col-xl-9 offset-xl-1 col-lg-12 offset-lg-0 page-intro--title type--h-xxl type--mb-h-md is-layout-flow wp-block-column-is-layout-flow"> <p class="count">06</p> <h1 class="type--h-xxl type--mb-h-md wp-block-heading">Typography</h1> <p class="tagline has-text-color" style="color:#ff298a">Because the internet is mostly made of words</p> </div> </div> </div></div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-167 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <figure class="wp-block-image size-full w-100"><img decoding="async" src="http://blog.mozilla.org/design/files/2019/07/Firefox-Sharp-Sans.svg" alt="" class="wp-image-1779"/></figure> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-169 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-3 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-lg-font-size">Firefox Sharp Sans is the distinctive font used to create the logo lockups for Firefox products. Product logomarks echo the rounded forms in our product identity system. As images, these load universally across the web.</p> <div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div> <figure class="wp-block-image size-large w-100"><img decoding="async" loading="lazy" width="1024" height="202" src="http://blog.mozilla.org/design/files/2019/06/FX_Design_Blog_Typeface-1024x202.png" alt="" class="wp-image-1214" srcset="https://mozilla.design/files/2019/06/FX_Design_Blog_Typeface-1024x202.png 1024w, https://mozilla.design/files/2019/06/FX_Design_Blog_Typeface-300x59.png 300w, https://mozilla.design/files/2019/06/FX_Design_Blog_Typeface-768x152.png 768w, https://mozilla.design/files/2019/06/FX_Design_Blog_Typeface.png 1328w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure> </div> </div> <div style="height:180px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-group zap-container is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <p class="type--h-mega has-zap has-warm-red-color has-text-color" style="font-size:150px">Metropolis</p> <p class="zap-text">open-source</p> </div></div> <div class="wp-block-columns row is-layout-flex wp-container-172 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-3 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-lg-font-size">Metropolis is the font used for headlines on marketing and product web experiences. It’s available for most world alphabets. Metropolis is a sans geo font very similar to SharpSans. You can find it <a href="https://fontsarena.com/metropolis-by-chris-simpson/" style="color: #ff7139">here</a>.</p> <p class="has-lg-font-size">Please refer to the <a href="https://choosealicense.com/licenses/ofl-1.1/" style="color: #ff4f5e;">SIL Open Font License 1.1</a> for exact details on what the conditions and restrictions are.</p> </div> </div> <div style="height:180px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-group zap-container is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <p class="type--h-mega has-zap font-inter has-text-color" style="color:#ff7139;font-size:150px">Inter</p> <p class="zap-text">open source too!</p> </div></div> <div class="wp-block-columns row is-layout-flex wp-container-175 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-3 text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-lg-font-size">Inter is the font we use as our secondary typeface for use in paragraph text and small UI elements. In cases that Metropolis is not available, Inter may be substituted for headlines as well.</p> <p class="has-lg-font-size">Inter is a <a href="https://github.com/rsms/inter" style="color: #ff7139;">free</a> font family. You are free to use this font in almost any way imaginable. Refer to the <a href="https://choosealicense.com/licenses/ofl-1.1/" style="color: #9059ff;">SIL Open Font License 1.1</a> for exact details on what the conditions and restrictions are. You can follow the <a href="https://github.com/google/fonts/issues/1455" style="color: #b833e1;">github ticket</a> to see when it will be available on Google Fonts.</p> </div> </div> <div style="height:180px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row mb-5 is-layout-flex wp-container-177 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-9 offset-none offset-lg-none text-content is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <h3 class="has-h-lg-font-size wp-block-heading">Type Scale</h3> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <p>Metropolis Bold for Headings and Inter Regular for body copy:</p> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-182 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-10 offset-none offset-lg-2 type-scale is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-180 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center text is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:70%"> <p class="has-h-xxl-font-size">Heading – XXL</p> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <p class="has-xs-font-size">Font size: 64px (4rem)<br>Line height: 72px*</p> </div> </div> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-187 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-10 offset-none offset-lg-2 type-scale is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-185 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center text is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:70%"> <p class="has-h-xl-font-size">Heading – XL</p> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <p class="has-xs-font-size">Font size: 56px (3.5rem)<br>Line height: 64px*</p> </div> </div> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-192 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-10 offset-none offset-lg-2 type-scale is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-190 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center text is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:70%"> <p class="has-h-lg-font-size">Heading – LG</p> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <p class="has-xs-font-size">Font size: 48px (3rem)<br>Line height: 56px*</p> </div> </div> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-197 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-10 offset-none offset-lg-2 type-scale is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-195 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center text is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:70%"> <p class="has-h-md-font-size">Heading – MD</p> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <p class="has-xs-font-size">Font size: 40px (2.5rem)<br>Line height: 44px*</p> </div> </div> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-202 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-10 offset-none offset-lg-2 type-scale is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-200 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center text is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:70%"> <p class="has-h-sm-font-size">Heading – SM</p> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <p class="has-xs-font-size">Font size: 32px (2rem)<br>Line height: 36px*</p> </div> </div> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-207 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-10 offset-none offset-lg-2 type-scale is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-205 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center text is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:70%"> <p class="has-h-xs-font-size">Heading – XS</p> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <p class="has-xs-font-size">Font size: 24px (1.5rem)<br>Line height: 28px*</p> </div> </div> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-212 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-10 offset-none offset-lg-2 type-scale is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-210 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center text is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:70%"> <p class="has-h-xxs-font-size">Heading – XXS</p> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <p class="has-xs-font-size">Font size: 20px (1.25rem)<br>Line height: 24px*</p> </div> </div> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-217 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-10 offset-none offset-lg-2 type-scale is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-215 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center text is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:70%"> <p class="has-h-xxxs-font-size">Heading – XXXS</p> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <p class="has-xs-font-size">Font size: 16px (1rem)<br>Line height: 20px*</p> </div> </div> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-222 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-10 offset-none offset-lg-2 type-scale is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-220 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center text is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:70%"> <p></p> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <p class="has-xs-font-size"><meta charset="utf-8">*(110% rounded to a multiple of 4)</p> </div> </div> </div> </div> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns row is-layout-flex wp-container-227 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-10 offset-none offset-lg-2 type-scale is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-225 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center text is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:70%"> <p class="has-lg-font-size">Body LG</p> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <p class="has-xs-font-size">Font size: 18px (1.125rem)<br>Line height: 36px*</p> </div> </div> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-232 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-10 offset-none offset-lg-2 type-scale is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-230 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center text is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:70%"> <p>Body MD</p> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <p class="has-xs-font-size">Font size: 16px (1rem)<br>Line height: 24px*</p> </div> </div> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-237 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-10 offset-none offset-lg-2 type-scale is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-235 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center text is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:70%"> <p class="has-sm-font-size">Body SM</p> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <p class="has-xs-font-size">Font size: 14px (.875rem)<br>Line height: 22px*</p> </div> </div> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-242 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-10 offset-none offset-lg-2 type-scale is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-240 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center text is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:70%"> <p class="has-xs-font-size">Body XS</p> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <p class="has-xs-font-size">Font size: 12px (.75rem)<br>Line height: 18px*</p> </div> </div> </div> </div> <div class="wp-block-columns row is-layout-flex wp-container-247 wp-block-columns-is-layout-flex"> <div class="wp-block-column col-12 col-lg-10 offset-none offset-lg-2 type-scale is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-245 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center text is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:70%"> <p></p> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <p class="has-xs-font-size">*(110% rounded to a multiple of 4)</p> </div> </div> </div> </div> <div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div> </section> </div> </div> </div> </div> </div> </div> </div> <footer class="page-section page-section--site-footer site-footer" role="contentinfo"> <div class="container-fluid"> <div class="row row-1"> <div class="col-12 type--h-xxxs"> <a class="site-title" href="https://mozilla.design">Mozilla Dot Design</a> </div> </div> <div class="row row-2"> <div class="col-lg-4 col-6 type--h-xxxs"> <ul id="menu-primary-navigation-2" class="menu"><li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-240 current_page_item menu-item-250"><a href="https://mozilla.design/firefox/" aria-current="page">Firefox Brand</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-256"><a href="https://mozilla.design/mozilla/">Mozilla Brand</a></li> <li class="quick-links-toggle menu-item menu-item-type-custom menu-item-object-custom menu-item-2216"><a href="#">Quick Links</a></li> </ul> </div> <div class="col-lg-4 col-6 type--h-xxxs"> <div class="supplemental-menu"> <ul id="menu-footer-navigation" class="menu"><li id="menu-item-225" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-225"><a title=" " href="https://mozilla.org">mozilla.org</a></li> <li id="menu-item-226" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-226"><a title=" " href="https://firefox.com">firefox.com</a></li> <li id="menu-item-227" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-227"><a title=" " href="https://careers.mozilla.org/">Careers</a></li> <li id="menu-item-228" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-228"><a title=" " href="https://twitter.com/firefox?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">Twitter</a></li> <li id="menu-item-229" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-229"><a title=" " href="https://www.instagram.com/firefox/">Instagram</a></li> <li id="menu-item-230" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-230"><a title=" " href="https://github.com/mozilla">Github</a></li> </ul> </div> </div> <div class="col-lg-4 col-12 ml-auto"> <div class="legal type--sm type--mb-xs"> <noscript> <img src="https://mozilla.design/files/2019/05/mozilla-black.svg" alt="" /> </noscript> <img class="lazyload" data-src="https://mozilla.design/files/2019/05/mozilla-black.svg" data-srcset="" alt="" /> <p><a href="https://www.mozilla.org/en-US/privacy/">Privacy</a> <a href="https://www.mozilla.org/en-US/privacy/websites/#cookies">Cookies</a> <a href="https://www.mozilla.org/en-US/about/legal/">Legal</a></p> <p>Visit Mozilla Corporation’s not-for-profit parent,  the <a style="text-decoration: underline" href="https://foundation.mozilla.org/en/">Mozilla Foundation</a>. Portions of this content are ©1998–2019 by individual mozilla.org contributors. Content available under a Creative Commons license.</p> <p>Please refer to our <a style="text-decoration: underline" href="https://www.mozilla.org/en-US/foundation/trademarks/policy/">trademark policy</a> regarding usage of Mozilla wordmarks and logos.</p> </div> </div> </div> </div> </footer> </div> </div> <style id='core-block-supports-inline-css' type='text/css'> .wp-container-2.wp-container-2,.wp-container-5.wp-container-5,.wp-container-7.wp-container-7,.wp-container-9.wp-container-9,.wp-container-12.wp-container-12,.wp-container-14.wp-container-14,.wp-container-16.wp-container-16,.wp-container-18.wp-container-18,.wp-container-20.wp-container-20,.wp-container-23.wp-container-23,.wp-container-25.wp-container-25,.wp-container-27.wp-container-27,.wp-container-29.wp-container-29,.wp-container-31.wp-container-31,.wp-container-33.wp-container-33,.wp-container-35.wp-container-35,.wp-container-38.wp-container-38,.wp-container-40.wp-container-40,.wp-container-43.wp-container-43,.wp-container-45.wp-container-45,.wp-container-48.wp-container-48,.wp-container-50.wp-container-50,.wp-container-53.wp-container-53,.wp-container-55.wp-container-55,.wp-container-58.wp-container-58,.wp-container-60.wp-container-60,.wp-container-64.wp-container-64,.wp-container-66.wp-container-66,.wp-container-69.wp-container-69,.wp-container-71.wp-container-71,.wp-container-73.wp-container-73,.wp-container-76.wp-container-76,.wp-container-79.wp-container-79,.wp-container-82.wp-container-82,.wp-container-85.wp-container-85,.wp-container-98.wp-container-98,.wp-container-111.wp-container-111,.wp-container-114.wp-container-114,.wp-container-127.wp-container-127,.wp-container-129.wp-container-129,.wp-container-132.wp-container-132,.wp-container-136.wp-container-136,.wp-container-138.wp-container-138,.wp-container-140.wp-container-140,.wp-container-145.wp-container-145,.wp-container-147.wp-container-147,.wp-container-150.wp-container-150,.wp-container-153.wp-container-153,.wp-container-156.wp-container-156,.wp-container-159.wp-container-159,.wp-container-162.wp-container-162,.wp-container-164.wp-container-164,.wp-container-167.wp-container-167,.wp-container-169.wp-container-169,.wp-container-172.wp-container-172,.wp-container-175.wp-container-175,.wp-container-177.wp-container-177,.wp-container-180.wp-container-180,.wp-container-182.wp-container-182,.wp-container-185.wp-container-185,.wp-container-187.wp-container-187,.wp-container-190.wp-container-190,.wp-container-192.wp-container-192,.wp-container-195.wp-container-195,.wp-container-197.wp-container-197,.wp-container-200.wp-container-200,.wp-container-202.wp-container-202,.wp-container-205.wp-container-205,.wp-container-207.wp-container-207,.wp-container-210.wp-container-210,.wp-container-212.wp-container-212,.wp-container-215.wp-container-215,.wp-container-217.wp-container-217,.wp-container-220.wp-container-220,.wp-container-222.wp-container-222,.wp-container-225.wp-container-225,.wp-container-227.wp-container-227,.wp-container-230.wp-container-230,.wp-container-232.wp-container-232,.wp-container-235.wp-container-235,.wp-container-237.wp-container-237,.wp-container-240.wp-container-240,.wp-container-242.wp-container-242,.wp-container-245.wp-container-245,.wp-container-247.wp-container-247{flex-wrap:nowrap;} </style> <script type='text/javascript' src='https://mozilla.design/wp-content/themes/mozilla.design.2021/assets/js/index-debug.js?ver=1686919483' id='script-js'></script> </body> </html>

CINXE.COM

Firefox Brand – Mozilla Dot Design