Mozilla Foundation Design

Mozilla Foundation Design

Illustrations

Evergreen Illustrations

Illustrations should primarily incorporate our brand palette, textures, and styles in order to maintain brand consistency. Examples of these could include illustrations created for Foundation specific purposes such as the Foundation site and evergreen materials, IHR, PNI, the Mozilla Festival, Foundation posts on Instagram, etc.

Mozilla-Fundraisi.2e16d0ba.fill-890x890-c100.format-jpeg_neyZg7w.jpg

Illustration for Trustworthy AI.

Foundation site illustration

Foundation site IHR illustration for the Initiatives page.

MozFest illustration 1

A Mozilla Festival background illustration.

house-square-v2.2e16d0ba.fill-890x890-c100.format-jpeg.jpg

IHR illustration using the Foundation brand colours.

PNI social share image

Privacy Not Included social share.

Mozilla Foundation Illustration 2

Foundation site Mozilla Festival illustration for the Initiatives page.

Editorial and One-off Illustrations

One-off illustrations can divert from the brand when appropriate, but should be led and created by a Foundation designer. Advocacy campaigns or editorial illustrations that do not follow the brand styling can help to differentiate the Foundation evergreen content from our one-off timely content. Non-branded illustrations also offer visual variation across our campaigns. Use (designer-led) creative freedom! 🙌

01_home-page-facebook-call-out(1).jpg

An illustration for a Facebook campaign and petition with Mozilla Advocacy.

Venmo-Social.jpg

An illustration for a Venmo petition with Mozilla Advocacy. The colors still reference Mozilla's palette but the overall feel is more one-off than entirely on brand.

blog.jpg

An illustration for the Youtube Regrets campaign with Mozilla Advocacy.

red-pen-895da279-6a03-4723-86d3-b364201107e5.jpg

A blog illustration on Facebook's microtargeting practices.

red-pen-5b100e6c-c219-4fd0-f995-25c53853afe5.png

An iconographic illustration for the Youtube Regrets campaign.

Screen Shot 2020-02-07 at 10.40.57 PM.png

A one-off illustration for the holiday edition of Privacy Not Included.

Pattern & Texture

The Foundation patterns and textures include grids, dots, grains, and repeatable shapes. For editorial illustrations, custom brushes or textures can be used depending on what is appropriate for the image.

Artboard 2 copy 6.jpg

A subtle textured pattern overtop the Initiatives illustrations.

MozFest Illustration 2

Use of gradient blurs, grid, and pixel squares for the Mozilla Festival branding.

Artboard 2 copy 7.jpg

Editorial illustration for the Youtube regrets campaign using a grain texture.

Screen Shot 2020-02-07 at 10.52.01 PM.png

Square dot pattern in the Foundation All Hands slide deck.

Artboard 2 copy 9.jpg

Binary pattern for the Mozilla Festival branding.

Screen Shot 2020-02-07 at 10.58.46 PM.png

Custom textures and illustrations created with photoshop brushes for an editorial illustration.

brand-expression_6.jpg

Noise textures can be used with gradients for trustworthy AI illustrations.

brand-expression_34.jpg

Seamless, subtle patterns may be used in backgrounds to accompany illustrations.

Visual Assets

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

⇓ Download asset file (.ai)

Image of an overview of the Mozilla Foundation illustration assets illustrator file.

Iconography

Our iconography is informed by Mozilla Festival icons and feather icons.

Icon Style

  • Border: center
  • Width: 2
 (0.5 for x-small icons)
  • Ends: round cap
  • Joins: round
  • Corner radius: 2 or 0

grid of example icons
grid of example social icons
Icon Grids

If icon is in-line with button text or UI elements use Small at 16px.

  • X-Small (12px)
  • Small (24px)
  • Medium (48px)
  • Large (96px)
icon grids