Mozilla Foundation Design

Mozilla Foundation Design

Branding

Key visual brand elements for Mozilla Foundation designs.


Logos

Mozilla Foundation uses the Mozilla logo and a Mozilla Foundation specific logo is not permitted. We do not divide the Foundation from the Corporation in order to reflect on the strengths and capabilities we bring together in pursuit of the Mozilla Manifesto.


Typography

Our official brand typeface is Zilla Slab. We use Zilla for our wordmark, for headlines, and throughout our designs.

⇓ Download the Zilla Slab

Nunito Sans is our primary sans-serif typeface pairing as it has similar x-heights, axis and shape of characters to compliment Zilla Slab. We use this for all our body text.

⇓ Download the Nunito Sans

Typography is a key part of UI so we have a set of typographic elements to help set font families, weights, sizes, line height, letter spacing, text case, text decoration and paragraph spacing. All web properties should follow the font styling outlined on our Typography Figma Page.


Color

These are the overarching Mozilla Foundation brand colors and they may be aliased for their intended usage and/or themed according to product/project usage.

⇓ View colors on our Color Figma Page

screen cap of color palette
Color Guidelines
  • Avoid using opacity when not using it for layered effects and establish tint/shade as a swatch
  • All UI should be from the Foundation palette only