Introduction

Introducing Project Chameleon

Design at Mozilla – spread across many project and teams – is crafted every day using methods and styles that in some cases are unique to the individual teams. This can result in a diluting of our overall message through inconsistent design practises. To address these concerns, we have initiated a cross-team effort we’re calling Project Chameleon.

What is Project Chameleon?

Key Goal

Secondary Goal

What this is not

This project is not a redesign or style overhaul. The purpose of the visual language is to document the current design standards across Mozilla projects/products into one overarching style and point out inconsistencies in order to align those styles across the board. There may be tweaks here and there based on the findings, but no sweeping changes.

Expanding on design values

The Firefox design values created by the UX team are a perfect foundation to build on when it comes to visual consistency and the key factors that drive it. Expanding on these – with a particular focus on the “Finely crafted” tier – will ensure a cohesive feel that ensures our work embodies the underlying values.

Within the finely crafted tier, it states that “a beautiful product is a pleasure to use and feels easy and clear. This only comes with craft and attention to detail.” This attention to detail combined with cross-team style unity are the building blocks to achieving the goals of the project.

Stay tuned for much more information over the next few weeks, including who is involved and how we plan to involve the greater Mozilla community in our process!

Forms

Form Elements

Buttons

Button Group

Combo Button

Dropdown Button

Icon Button

Text Inputs

Text Inputs with Labels

Text Inputs with Buttons

Validation Feedback

Radio & Checkbox

Navigation

Navigation

Vertical inContent Navigation

<nav class='nav-group vertical dark'>
  <ul>
    <li><a href='#'>One</a></li>
    <li><a href='#'>Two</a></li>
    <li><a href='#'>Three</a></li>
    <li><a href='#'>...</a></li>
  </ul>
</nav>
<nav class='nav-group vertical light'>
  <ul>
    <li><a href='#'>One</a></li>
    <li><a href='#'>Two</a></li>
    <li><a href='#'>Three</a></li>
    <li><a href='#'>...</a></li>
  </ul>
</nav>

Horizontal inContent Navigation

Layout

Layout

coming soon

Typography

Typography

Platform

Windows Typeface

Aa

Segoe UI

ABCDEFGHIFKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz s0123456789!@#$%^&*()

Text and copy are never just words, they're important. When designing anything, the content is the thing that gives the design purpose and direction.

Mozilla

Firefox Desktop

Australis

Bringing together all kinds of awesomeness to make browsing better for you.

Mac OSX Typeface

Aa

Lucida Grande

ABCDEFGHIFKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz s0123456789!@#$%^&*()

Text and copy are never just words, they're important. When designing anything, the content is the thing that gives the design purpose and direction.

Mozilla

Firefox Desktop

Australis

Bringing together all kinds of awesomeness to make browsing betteryou.

Platform Readermode

Readermode Serif Typeface

Aa

Charis

ABCDEFGHIFKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz s0123456789!@#$%^&*()

Text and copy are never just words, they're important. When designing anything, the content is the thing that gives the design purpose and direction.

Mozilla

Firefox Desktop

Australis

Bringing together all kinds of awesomeness to make browsing better for you.

Readermode Sans Serif Typeface

Aa

Clear Sans

ABCDEFGHIFKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz s0123456789!@#$%^&*()

Text and copy are never just words, they're important. When designing anything, the content is the thing that gives the design purpose and direction.

Mozilla

Firefox Desktop

Australis

Bringing together all kinds of awesomeness to make browsing betteryou.

In Content

Platform Readermode

Type for Headers

Aa

Fira Sans

ABCDEFGHIFKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz s0123456789!@#$%^&*()

Text and copy are never just words, they're important. When designing anything, the content is the thing that gives the design purpose and direction.

Mozilla

Firefox Desktop

Type for Everything Else

Aa

Clear Sans

ABCDEFGHIFKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz s0123456789!@#$%^&*()

Text and copy are never just words, they're important. When designing anything, the content is the thing that gives the design purpose and direction.

Australis

Bringing together all kinds of awesomeness to make browsing betteryou.

Color

Color

Platform & inContent Color

Light Grey

HEX: #FBFBFB;HOVER: #EBEBEB;ACTIVE: #DADADA;

Body Background Grey

HEX: #F2F2F2;

Dark Grey

HEX: #424F5A;HOVER: #5E6972;ACTIVE: #343F48;

Light Text

HEX: #C1C1C1;

Dark Text

HEX: #333333;

Blue

HEX: #0095DD;HOVER: #008ACB;ACTIVE: #006B9D;

Green

HEX: #74BF43;HOVER: #6CB23E;ACTIVE: #64A43A;

Highlight Orange

HEX: #FF9500;

Error Red

HEX: #D74345;
Glyphs

Glyphs

coming soon

Chrome

Chrome

Tabs

Windows 8

Windows 7

Windows XP

OSX

Linux