Mozilla Foundation Design

Mozilla Foundation Design

Agency and Contractor Assets

Below is an overview of key brand assets of the Mozilla Foundation for agencies, contractors, and external stakeholders. A more in-depth overview of the Foundation brand can be found here.

Quick links


Mozilla logo and favicon

Mozilla logo and favicon


Colors

Color palettes are for the Mozilla Foundation, Privacy Not Included, and Mozilla Festival. Sketch and Adobe palettes can be downloaded below. Complete RGB and HEX codes are here.

Mozilla Foundation, Privacy Not Included, and Mozilla Festival palette colors.


Typography

Zilla Slab and Zilla Slab Highlight are our core typefaces. We use Zilla for our wordmark, for headlines, and throughout our designs. Nunito Sans is our primary san-serif type pairing as it has similar x-heights, axis and shape of characters to compliment Zilla Slab. More documentation on our typography is here.

Zilla Slab, Zilla Slab Highlight & Nunito Sans are all open-source fonts.


Patterns and textures

The Foundation patterns and textures can be found within the illustration asset file.

An image of the Illustrator Mozilla Foundation template.


Image Template

The .ai image template can be downloaded here and offers image sizes and export instructions for the various Mozilla Foundation social, foundation site, and blog needs.

Image of the Mozilla Image resolutions in Adobe Illustrator.
An image of the Illustrator Mozilla Foundation template.


Homepage Hero Image Template

The hero image template specifications can be seen in the link below, with examples of past hero images and dimensions for mobile devices.

An image of the Figma homepage hero image template for Mozilla Foundation.
An image of the Figma homepage hero image template for Mozilla Foundation.

Image sizes (in pixels)


Social Media

Instagram

Gridpost, 1080 x 1080 (1:1)

Story, 1080 x 1920

Twitter

Timeline post, 1200 x 675 (16:9)

Pinterest

Ad spec, 1000 x 1500 (2:3)

OG Share Image

General post, 1200 x 628



Mozilla Foundation Site

Hero Image, 4032 x 480

Page banner, 1984 x 567

Large feature/ thumbnail, 800 x 450

Spotlight, 540 x 400

16:9 Image,1600 x 900

16:6 Image, 1600 x 600

Text with image 1:1, 300 x 300

Text with small image, 100 x 100


Email

Email header, 1280 x 445

Image, 500 x 500


Blog

Blog header, 1080 x 564

16:9 Image, 1600 x 900

16:6 Image, 1600 x 600



Article Page

2X Images, 444 x 325.95

Wide Image, 1440 x custom height, default is 410

Image, 920 or full width of content div x custom height, no default

Images in Content, Variable: works to fit uploaded graphic


mozilla.org

Content cards (S/M/L), 1200 x 800


Themes

Themes are managed within the Mozilla Foundation brand. They have their own unique guidelines and expressions but closely follow and relate to the Foundation branding. To find out more about a theme, view one of the pages below.